import Box from "@mui/material/Box";
import Breadcrumbs from "@mui/material/Breadcrumbs";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import Divider from "@mui/material/Divider";
import CardContent from "@mui/material/CardContent";
import Grid from "@mui/material/Grid2";
import Link from "@mui/material/Link";
import Typography from "@mui/material/Typography";
import { Home, Save } from "@mui/icons-material";
import useTitle from "../../hooks/useTitle";
import IconButton from "../../components/IconButton";
import { Back } from "iconsax-react";
import { useParams } from "react-router";
import Form from "./Form";
import { FormEvent, useEffect } from "react";
import FlashMessage from "../../components/FlashMessage";
import { useFishboneStore } from "../../stores/fishboneStore";
import { FishboneRequest } from "../../types/fishbone.types";

export default function FishboneCreateOrEdit() {
  useTitle("Fishbone");
  const { pid } = useParams();
  const { update, create, isLoading, find, clearFishbone } = useFishboneStore();

  const IS_EDIT_PAGE = pid!!;

  const onSubmit = async (e: FormEvent) => {
    e.preventDefault();

    const formData = new FormData(e.target as HTMLFormElement);

    const data = Object.fromEntries(formData.entries()) as unknown as FishboneRequest;

    if (IS_EDIT_PAGE) {
      await update(pid!!, data);
    } else {
      await create(data);
    }  
  }

  useEffect(() => {
    if (pid!!) {
      (async () => {
        await find(pid!!);
      })()
    } else {
      (async () => {
        await clearFishbone()
      })()
    }
  }, [])

  return (
    <Box component="main">
      <Grid container spacing={2} alignItems={"center"} mb={4}>
        <Grid size="auto">
          <Box display={"flex"} alignItems={"center"} gap={1}>
            <IconButton variant="dashed" color="primary" href="/fishbone">
              <Back variant="Outline" color="currentColor" />
            </IconButton>
            <Typography variant="h3">{IS_EDIT_PAGE ? `Edit Fishbone - ${pid}` : 'Create Fishbone'}</Typography>
          </Box>
        </Grid>
        <Grid size={12}>
          <Breadcrumbs aria-label="breadcrumb">
            <Link underline="hover" color="inherit" href="/dashboard">
              <Home />
            </Link>
            <Link underline="hover" color="inherit" href="/fishbone">
              <Typography sx={{ color: "text.primary" }}>Fishbone</Typography>
            </Link>
            <Typography sx={{ color: "text.primary" }}>{IS_EDIT_PAGE ? pid : 'Create'}</Typography>
          </Breadcrumbs>
        </Grid>
      </Grid>

      <FlashMessage store={useFishboneStore} />

      <Card component="form" onSubmit={onSubmit}>
        <Box
          sx={{ px: 3, py: 1 }}
          display={"flex"}
          justifyContent={"space-between"}
          alignItems={"center"}
        >
          <Typography variant="h5">Fill the form</Typography>
          <Button
            disabled={isLoading}
            type="submit"
            variant="contained"
            size="small"
            startIcon={<Save color="inherit" />}
          >
            {IS_EDIT_PAGE ? "Save Changes" : "Create"}
          </Button>
        </Box>
        <Divider />
        <CardContent>
          <Form />
        </CardContent>
      </Card>
    </Box>
  );
}