import { useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { Tab, Tabs } from "@mui/material";
import { Dashboard } from "../dashboard/Dashboard";
import { SlaughterDashboard } from "../dashboard-slaughter/SlaughterDashboard";
// import { DashboardSlaughterPerformance } from "../dashboard-slaughter-performance/DashboardSlaughterPerformance";
import { DashboardPeriodicPerformance } from "../dashboard-periodic-performance/DashboardPeriodicPerformance";
import { DashboardSlaughterPerformance } from "../dashboard-slaughter-performance/DashboardSlaughterPerformance";
import { DashboardEquivalentTab } from "../dashboard-equivalent-tab/DashboardEquivalentTab";

export const DashboardTab = () => {
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <Grid container xs={12}>
      <Grid
        item
        xs={12}
        sx={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Tabs
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
          value={value}
          onChange={handleChange}
          sx={{
            maxWidth: "100vw",
            overflowX: "auto",
            borderBottom: { xs: "1px solid #E0E0E0", sm: "none" },
          }}
        >
          <Tab label="اطلاعات جامع" value={0} />
          <Tab label="مقایسه" value={4} />
          <Tab label="اطلاعات کشتار" value={1} />
          <Tab label="پایش کشتار" value={2} />
          {/* <Tab label="گزارش عملکرد دوره ای" value={3} /> */}
        </Tabs>
        <Grid container xs={12} pt={3}>
          {value === 0 && <Dashboard />}
          {value === 1 && <SlaughterDashboard />}
          {value === 2 && <DashboardPeriodicPerformance />}
          {value === 3 && <DashboardSlaughterPerformance />}
          {value === 4 && <DashboardEquivalentTab />}
        </Grid>
      </Grid>
    </Grid>
  );
};
