import { Box, Tab, Tabs } from "@mui/material";
import { BackButton } from "../components/back-button/BackButton";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { SLaughterPaymentOverview } from "../features/slaughter-house/components/slaughter-payment-overview/SLaughterPaymentOverview";
import { useState } from "react";
import { TabContext, TabPanel } from "@mui/lab";
import { SlaughterPaymentByWeight } from "../features/slaughter-house/components/slaughter-payment-by-weight/SlaughterPaymentByWeight";
import { SlaughterPayingFees } from "../features/slaughter-house/components/slaughter-paying-fees/SlaughterPayingFees";

const PaymentOfFees = () => {
  const [tabValue, setTabValue] = useState("1");

  const handleTabChange = (event, newValue) => {
    setTabValue(newValue);
  };
  return (
    <>
      <Box display={"flex"} justifyContent="center">
        <Grid
          container
          direction="column"
          justifyContent="center"
          ml={4}
          // sm={12}
          // md={10}
          // lg={10}
        >
          <Grid ml={4}>
            <BackButton />
          </Grid>
          <Grid xs={12} container alignItems="center" justifyContent="center">
            <Tabs
              scrollButtons="auto"
              variant="scrollable"
              allowScrollButtonsMobile
              value={tabValue}
              onChange={handleTabChange}
            >
              <Tab label="جزئیات" value="1" />
              <Tab label="پرداخت" value="2" />
            </Tabs>
          </Grid>
          <TabContext value={tabValue}>
            <TabPanel value="1">
              <Grid
                container
                justifyContent="space-between"
                gap={SPACING.SMALL}
                direction="column"
              >
                <Grid ml={4} mr={4}>
                  <SLaughterPaymentOverview />
                </Grid>
                <Grid>
                  <SlaughterPayingFees />
                </Grid>
              </Grid>
            </TabPanel>
            <TabPanel value="2" style={{ width: "100%" }}>
              <Grid
                container
                justifyContent="space-between"
                gap={SPACING.SMALL}
                direction="column"
              >
                <Grid xs={12} style={{ width: "100%" }}>
                  <SlaughterPaymentByWeight />
                </Grid>
              </Grid>
            </TabPanel>
          </TabContext>
        </Grid>
      </Box>
    </>
  );
};

export default PaymentOfFees;