import React from "react";
import { useSelector } from "react-redux";
import { Grid } from "@material-ui/core";
import ItemSearch from "../search/ItemSearch";
import Header from "./Header";
import LabelForm from "./LabelForm";
import AreaSelect from "./AreaSelect";
import Messages from "./Messages";
export const Home = () => {
  const area = useSelector((state) => state.main.area);
  const label = useSelector((state) => state.main.label);
  const areas = useSelector((state) => state.main.areas);
  const inventory_taking = useSelector((state) => state.main.inventory_taking);
  const alerts = useSelector((state) => state.main.alerts);
  return (
    <>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Header />
          {alerts.length > 0 ? <Messages /> : null}
        </Grid>
        <Grid item xs={5}></Grid>
        {areas && inventory_taking && !area ? <AreaSelect /> : null}
        {area && label ? <ItemSearch /> : null}
        {area && !label ? <LabelForm /> : null}
        <Grid item xs={5}></Grid>
      </Grid>
    </>
  );
};

export default Home;