import TableMoreMenu from "@/components/table/TableMoreMenu"
import { FindInPageOutlined } from "@mui/icons-material"
import HistoryIcon from '@mui/icons-material/History';
import { Collapse, Grid, MenuItem, Paper, Table, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
import React, { useEffect } from "react";
import CategoryDetail from "./CategoryDetail";
import { CorporateFormulariumList, DetailCorpFormularium, RespDetailFormularium } from "./Types";
import axios from "@/utils/axios";
import { useNavigate, useParams } from "react-router-dom";

const CategoryRow: React.FC<CorporateFormulariumList> = (props) => {
  const [open, setOpen] = React.useState(false);
  const { corporate_id } = useParams();
  const navigate = useNavigate();
  
  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
  const [dataTableData, setDataTableData] = React.useState<RespDetailFormularium | null>(null)
  const [dataRow, setDataRow] = React.useState<DetailCorpFormularium[] | null>(null)

  const loadDataTableData = async (formulaurium_category_id: number) => {
    setDataTableLoading(true);
    const resp = await axios.get(`/corporates/${corporate_id}/formulariums/${formulaurium_category_id}`);
    console.log(resp.data);
    setDataTableLoading(false);
    setDataTableData(resp.data);
    setDataRow(resp.data.data);
  }

  return (
    <React.Fragment>
      <TableRow>
        <TableCell align="left" width={50}/>
        <TableCell align="left">{props.category}</TableCell>
        <TableCell align="left">{props.description}</TableCell>
        <TableCell align="center" width={100}>
          <TableMoreMenu actions = {
            <>
            <MenuItem onClick={async () => { loadDataTableData(props.formulaurium_category_id); setOpen(!open)}}>
              <FindInPageOutlined />
              Detail
            </MenuItem>
            <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/formulariums/${props.id}/history`)}>
              <HistoryIcon />
              History
            </MenuItem>
            </>
          } />
        </TableCell>        
      </TableRow>
      <TableRow >
        <TableCell colSpan={5} align="center" style={{paddingBottom: 0, paddingTop: 0}}>
          <Collapse in={open} timeout='auto' unmountOnExit>
            <TableContainer component={Paper}>
              <Table aria-label="collapsible table">
                <TableHead>
                  <TableRow>
                    <TableCell align="left" width={50} />
                    <TableCell align="left">Code</TableCell>
                    <TableCell align="left">Name</TableCell>
                    <TableCell align="left" width={100}>Status</TableCell>
                    <TableCell align="center" width={100}></TableCell>
                  </TableRow>
                </TableHead>
                {dataTableIsLoading ? (
                  <TableCell colSpan={5} align="center">Loading</TableCell>
                ) : dataTableData?.data.length == 0 ? (
                  <TableCell colSpan={5} align="center">No Data</TableCell>
                ) : (
                  dataRow?.map(item => (
                    <CategoryDetail props={item} formularium={props}/>
                  ))
                )}
              </Table>
            </TableContainer>
          </Collapse>
        </TableCell>
      </TableRow>
    </React.Fragment>
  )
}

export default CategoryRow