import { Grid, Typography } from "@material-ui/core";
import clsx from "clsx";
import React from "react";

import { useUserContext } from "../../Contexts/UserContext";
import { VehicleProvider } from "../../Contexts/VehicleContext";
import { useLocalStorage } from "../../useLocalStorage";
import CarUpdatesTable from "../../Controls/CarUpdatesTable";
import CarVersionLogTable from "../../Controls/CarVersionLogTable";
import FlashpackInfoTable from "../../Controls/FlashpackInfoTable";
import SearchField from "../../Controls/SearchField";
import useStyles from "../../useStyles";

const MainForm = ({ vin }) => {
  const [search, setSearch] = useLocalStorage("CAR_UPDATES_SEARCH", "");
  const classes = useStyles();
  const {
    token: {
      idToken: { jwtToken: token },
    },
  } = useUserContext();

  const handleSearch = (query) => {
    setSearch(query);
  };

  return (
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Typography variant="h6">Car Updates</Typography>
      <Grid item md={4} className={classes.textCenterAlign}>
        <SearchField classes={classes} onSearch={handleSearch} savedSearchValue={search} />
      </Grid>
      <CarUpdatesTable vin={vin} token={token} classes={classes} search={search} />
      <Typography variant="h6" className={classes.labelInline}>Version Log</Typography>
      <CarVersionLogTable vin={vin} token={token} classes={classes} />
      <Typography variant="h6" className={classes.labelInline}>Flashpack Version Progress</Typography>
      <FlashpackInfoTable vin={vin} token={token} classes={classes} />
    </div>
  );
};

const CarUpdatesTab = ({ vin }) => (
  <VehicleProvider>
    <MainForm vin={vin} />
  </VehicleProvider>
);

export default CarUpdatesTab;
