import { Tab, Tabs } from "@mui/material";
// import { TabContext, TabPanel } from "@material-ui/lab";
import React, { useState } from "react";
import AgricultureDefinitions from "./definitions/agricultureDefinitions";
import AviationDefinitions from "./definitions/aviationDefinitions";
import ConstructionDefinitions from "./definitions/constructionDefinitions";
import GeneralDefinitions from "./definitions/generalDefinitions";
import MiningDefinitions from "./definitions/miningDefinitions";

interface TabPanelProps {
  children?: React.ReactNode;
  index: any;
  value: any;
}

function TabPanelMine(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      aria-labelledby={`simple-tab-${index}`}
      {...other}>
      {value === index && <React.Fragment>{children}</React.Fragment>}
    </div>
  );
}

export default function Definitions() {
  const [currentTab, setCurrentTab] = useState("general");

  return (
    <>
      <Tabs
        value={currentTab}
        onChange={(_, value) => setCurrentTab(value)}
        indicatorColor="primary"
        textColor="primary"
        variant="fullWidth">
        <Tab label={"General"} value={"general"} />
        <Tab label={"Agriculture"} value={"agriculture"} />
        <Tab label={"Aviation"} value={"aviation"} />
        <Tab label={"Mining"} value={"mining"} />
        <Tab label={"Construction"} value={"construction"} />
      </Tabs>
      <TabPanelMine value={currentTab} index="general">
        <GeneralDefinitions />
      </TabPanelMine>
      <TabPanelMine value={currentTab} index="agriculture">
        <AgricultureDefinitions />
      </TabPanelMine>
      <TabPanelMine value={currentTab} index="aviation">
        <AviationDefinitions />
      </TabPanelMine>
      <TabPanelMine value={currentTab} index="mining">
        <MiningDefinitions />
      </TabPanelMine>
      <TabPanelMine value={currentTab} index="construction">
        <ConstructionDefinitions />
      </TabPanelMine>
    </>
  );
}
