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 CardContent from "@mui/material/CardContent";
import Divider from "@mui/material/Divider";
import Link from "@mui/material/Link";
import Grid from "@mui/material/Grid2";
import Typography from "@mui/material/Typography";
import AddIcon from "@mui/icons-material/Add";
import { Home } from "@mui/icons-material";
import ReactTable from "../components/ReactTable";
import { ColumnDef } from "@tanstack/react-table";
import IconButton from "../components/IconButton";
import { Edit } from "iconsax-react";
import useTitle from "../hooks/useTitle";
import { useFishboneStore } from "../stores/fishboneStore";
import { FishboneDataTable } from "../types/fishbone.types";
import FlashMessage from "../components/FlashMessage";
import { useEffect, useMemo } from "react";

export default function Fishbone() {
  useTitle("Fishbone");

  const { data, cacheExpired, getAll } = useFishboneStore();

  const columns: ColumnDef<FishboneDataTable>[] = useMemo(
    () => [
      {
        header: "Backbone",
        accessorKey: "backbone",
      },
      {
        header: "Device Start",
        accessorKey: "device_start",
      },
      {
        header: "Device End",
        accessorKey: "device_end",
      },
      {
        header: "Address",
        accessorKey: "address",
      },
      {
        header: "Core used",
        accessorKey: "core_amount",
      },
      {
        header: "",
        accessorKey: "action",
        enableSorting: false,
        cell: ({ row }) => (
          <>
            <IconButton
              variant="text"
              color="secondary"
              href={`/fishbone/${row.original.id}`}
            >
              <Edit variant="Bulk" color="currentColor" />
            </IconButton>
          </>
        ),
      },
    ],
    []
  );

  useEffect(() => {
    if (cacheExpired()) {
      (async () => {
        await getAll();
      })();
    }
  }, []);

  return (
    <Box component="main">
      <Grid container spacing={2} alignItems={"center"} mb={4}>
        <Grid size="grow">
          <Typography variant="h3">Fishbone</Typography>
        </Grid>
        <Grid size="auto">
          <Button
            href="/fishbone/create"
            variant="contained"
            startIcon={<AddIcon color="inherit" />}
          >
            Add New
          </Button>
        </Grid>
        <Grid size={12}>
          <Breadcrumbs aria-label="breadcrumb">
            <Link underline="hover" color="inherit" href="/dashboard">
              <Home />
            </Link>
            <Typography sx={{ color: "text.primary" }}>Fishbone</Typography>
          </Breadcrumbs>
        </Grid>
      </Grid>

      <FlashMessage store={useFishboneStore} />

      <Card>
        <Box sx={{ p: 2 }}>
          <Typography variant="h5">List Devices</Typography>
        </Box>
        <Divider />
        <CardContent sx={{ flex: "1 0 auto", pt: 2, px: 0 }}>
          <ReactTable data={data || []} columns={columns} />
        </CardContent>
      </Card>
    </Box>
  );
}