import { Box } from "@mui/material";
import { useParams } from "react-router-dom";
import { BackButton } from "../components/back-button/BackButton";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { ProvinceKillhousePaidFee } from "../features/province/components/province-killhouse-paid-fee/ProvinceKillhousePaidFee";
import { ProvincePaymentByWeight } from "../features/province/components/province-payment-by-weight/ProvincePaymentByWeight";
import { ProvinceKillhouseFee } from "../features/province/components/province-killhouse-fee/ProvinceKillhouseFee";
import { ProvinceDailyBarsDetails } from "../features/province/components/province-daily-bars-details/ProvinceDailyBarsDetails";
import { ProvincePaymentLiveChickenDetails } from "../features/province/components/province-payment-live-chicken-detail/ProvincePaymentLiveChickenDetails";
import { ProvincePaymentChainDetails } from "../features/province/components/province-payment-chain-detail/ProvincePaymentChainDetails";

const ProvinceFees = () => {
  const params = useParams();

  const getDetailComponent = () => {
    let component;
    switch (params.type) {
      case "unpaid":
        component = <ProvinceKillhouseFee killhouseKey={params.key} />;
        break;
      case "kill_house_key":
        component = (
          <ProvinceKillhousePaidFee
            killhouseKey={params.key}
            type={params.type}
          />
        );
        break;
      case "chain_company_key":
        component = (
          <ProvinceKillhousePaidFee
            killhouseKey={params.key}
            type={params.type}
          />
        );
        break;
      case "daily_bar":
        component = (
          <ProvinceDailyBarsDetails
            killhouseKey={params.key}
            type={params.type}
          />
        );
        break;
      case "live_chicken":
        component = (
          <ProvincePaymentLiveChickenDetails
            killhouseKey={params.key}
            type={"live"}
          />
        );
        break;
      case "carcassess":
        component = (
          <ProvincePaymentLiveChickenDetails
            killhouseKey={params.key}
            type={"carcass"}
          />
        );
        break;
      case "chain":
        component = <ProvincePaymentChainDetails killhouseKey={params.key} />;
        break;

      default:
        component = (
          <ProvinceKillhousePaidFee
            killhouseKey={params.key}
            type={params.type}
          />
        );
        break;
    }

    return component;
  };

  return (
    <>
      <Box display={"flex"} justifyContent="center">
        <Grid
          container
          direction="column"
          justifyContent="center"
          xs={12}
          sm={12}
          md={10}
          lg={10}
        >
          <Grid
            container
            justifyContent="space-between"
            gap={SPACING.SMALL}
            direction="column"
          >
            <BackButton />
            {params.type ? (
              <>{getDetailComponent()}</>
            ) : (
              <Grid>
                <ProvincePaymentByWeight />
              </Grid>
            )}
          </Grid>
        </Grid>
      </Box>
    </>
  );
};

export default ProvinceFees;
