import React, { useState } from "react";
import { Box, FormControl, MenuItem, Select, Grid } from "@mui/material";
import { BackButton } from "../components/back-button/BackButton";
import { SPACING } from "../data/spacing";
import { useLocation } from "react-router-dom";
import {
  ROUTE_PARENT_COMPANY_ALLOCATIONS,
  ROUTE_PARENT_COMPANY_PAYING_FEES_REQUESTS,
} from "../routes/routes";
import { ParentCompanyPaymentByWeightOverviewTable } from "../features/province/components/parent-company-payment-by-weight-overview/ParentCompanyPaymentByWeightOverview";
import { ParentCompanyVetFarmOperation } from "../features/vet-farm/components/parent-company-vet-farm-operation/ParentCompanyVetFarmOperation";

const PROVINCES = [
  { label: "استان مرکزی", value: "https://mabackend.rasadyar.com/" },
  { label: "استان همدان", value: "https://habackend.rasadyar.com/" },
  { label: "استان بوشهر", value: "https://bubackend.rasadyar.com/" },
];

const ParentCompany = () => {
  const [province, setProvince] = useState("https://mabackend.rasadyar.com/");
  const { pathname } = useLocation();

  const handleChange = (event) => setProvince(event.target.value);

  const renderContent = () => {
    if (pathname.includes(ROUTE_PARENT_COMPANY_PAYING_FEES_REQUESTS)) {
      return <ParentCompanyPaymentByWeightOverviewTable province={province} />;
    }
    if (pathname.includes(ROUTE_PARENT_COMPANY_ALLOCATIONS)) {
      return <ParentCompanyVetFarmOperation province={province} />;
    }
    return null;
  };

  return (
    <Box display="flex" justifyContent="center" sx={{ p: SPACING.SMALL }}>
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        md={10}
      >
        <Grid container justifyContent="space-between" gap={SPACING.SMALL}>
          <BackButton />

          <Box sx={{ width: 160 }}>
            <FormControl fullWidth>
              <Select
                labelId="province-select-label"
                id="province-select"
                value={province}
                onChange={handleChange}
              >
                {PROVINCES.map((province) => (
                  <MenuItem key={province.value} value={province.value}>
                    {province.label}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          </Box>
        </Grid>

        <Grid container sx={{ mt: SPACING.MEDIUM }}>
          {renderContent()}
        </Grid>
      </Grid>
    </Box>
  );
};

export default ParentCompany;
