// @mui
import {
  Box,
  Button,
  Card,
  Collapse,
  IconButton,
  MenuItem,
  Table,
  TableBody,
  TableCell,
  TableRow,
  TextField,
  Typography,
  Stack,
  Menu,
  ButtonGroup,
  Link,
  Chip,
} from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import AddIcon from '@mui/icons-material/Add';
import UploadIcon from '@mui/icons-material/Upload';
import CancelIcon from '@mui/icons-material/Cancel';
// hooks
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
import useSettings from '@/hooks/useSettings';
// components
import axios from '../../utils/axios';
import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../@types/paginated-data';
import DataTable from '../../components/LaravelTable';
import { fCurrency } from '../../utils/formatNumber';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
import { LoadingButton } from '@mui/lab';
import { enqueueSnackbar } from 'notistack';
import { Divider } from '@mui/material';
import Iconify from '@/components/Iconify';
import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
// import LoadingButton from '@/theme/overrides/LoadingButton';

export default function List() {
  const { themeColorPresets } = useSettings();
  const [searchParams, setSearchParams] = useSearchParams();
  const [importResult, setImportResult] = useState(null);

  function SearchInput(props: any) {
    // SEARCH
    const searchInput = useRef<HTMLInputElement>(null);
    const [searchText, setSearchText] = useState('');

    const handleSearchChange = (event: any) => {
      const newSearchText = event.target.value ?? '';
      setSearchText(newSearchText);
    };

    const handleSearchSubmit = (event: any) => {
      event.preventDefault();
      props.onSearch({ search: searchText }); // Trigger to Parent
    };

    useEffect(() => {
      // Trigger First Search
      setSearchText(searchParams.get('search') ?? '');
    }, []);

    return (
      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
        <TextField
          id="search-input"
          ref={searchInput}
          label="Search"
          variant="outlined"
          fullWidth
          onChange={handleSearchChange}
          value={searchText}
        />
      </form>
    );
  }

  function ImportForm(props: any) {
    // IMPORT
    // Create Button Menu
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const createMenu = Boolean(anchorEl);
    const importForm = useRef<HTMLInputElement>(null);
    const [currentImportFileName, setCurrentImportFileName] = useState(null);

    const handleClose = () => {
      setAnchorEl(null);
    };

    return (
      <div>
        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
          <SearchInput onSearch={applyFilter} />
          {/* <Button
            variant="outlined"
            startIcon={<AddIcon />}
            sx={{ p: 1.8 }}
            onClick={() => {
              navigate('/claims/create');
            }}
          >
            Create
          </Button> */}
        </Stack>
      </div>
    );
  }

  // Dummy Default Data
  const [dataTableIsLoading, setDataTableLoading] = useState(true);
  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
    LaravelPaginatedDataDefault
  );

  const loadDataTableData = async (appliedFilter: any | null = null) => {
    setDataTableLoading(true);
    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
    const response = await axios.get('/claim-requests', { params: filter });
    // console.log(response.data);
    setDataTableLoading(false);

    setDataTableData(response.data);
  };

  const applyFilter = async (searchFilter: { search: string }) => {
    await loadDataTableData(searchFilter);
    setSearchParams(searchFilter);
  };

  const handlePageChange = (event: ChangeEvent, value: number): void => {
    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
    loadDataTableData(filter);
    setSearchParams(filter);
  };

  const handleApprove = (claimRequest) => {
    axios
      .post(`claim-requests/${claimRequest.id}/approve`)
      .then((response) => {
        enqueueSnackbar('Success Approve', { variant: 'success' });
        loadDataTableData();
      })
      .catch(({ response }) => {
        enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
      });
  };

  useEffect(() => {
    loadDataTableData();
  }, []);

  const headStyle = {
    fontWeight: 'bold',
  };

  // Called on every row to map the data to the columns
  function createData(data: any): any {
    return {
      ...data,
    };
  }

  {
    /* ------------------ TABLE ROW ------------------ */
  }
  function Row(props: { row: ReturnType<typeof createData> }) {
    const { row } = props;
    const [open, setOpen] = React.useState(false);
    const [loadingApprove, setLoadingApprove] = React.useState(false);

    return (
      <React.Fragment>
        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
          <TableCell>
            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
            </IconButton>
          </TableCell>
          <TableCell align="left">
            <Typography
              onClick={() => {
                handleShowClaim(row);
              }}
              color={themeColorPresets}
            >
              {row.code}
            </Typography>
          </TableCell>
          <TableCell align="left">{row.member?.full_name}</TableCell>
          <TableCell align="left">{row.member?.full_name}</TableCell>
          <TableCell align="left">{row.submission_date}</TableCell>
          <TableCell align="left">{row.service_name}</TableCell>
          <TableCell align="left">{row.payment_type_name}</TableCell>
          <TableCell align="right">
            <Chip label={row.status} />
          </TableCell>
          <TableCell align="right">
            {row.status == 'requested' && (
              <LoadingButton
                loading={loadingApprove}
                variant="outlined"
                size="small"
                onClick={() => {
                  handleApprove(row);
                }}
              >
                Ajukan Claim <Iconify icon="eva:arrow-forward-outline"></Iconify>
              </LoadingButton>
            )}
          </TableCell>
          {/* <TableCell>
            
          <IconButton
                          onClick={() => {
                            handleShowClaim(row);
                          }}
                        >
                          <Iconify icon="eva:eye-fill" />
                        </IconButton>
          </TableCell> */}
        </TableRow>
        {/* COLLAPSIBLE ROW */}
        <TableRow>
          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
            <Collapse in={open} timeout="auto" unmountOnExit>
              <Box sx={{ borderBottom: 1 }}>
                <Stack
                  divider={<Divider orientation="horizontal" flexItem />}
                  spacing={1}
                  sx={{ marginY: 2 }}
                >
                  <Box>
                    <Typography fontWeight={600}>Berkas Hasil Penunjang</Typography>
                    {row.files_by_type?.result &&
                      row.files_by_type?.result.map((file, index) => (
                        <Stack direction="row" key={index}>
                          <Typography sx={{ marginRight: 2 }}>-</Typography>{' '}
                          <a href={file.url} target="_blank">
                            {file.name}
                          </a>
                        </Stack>
                      ))}

                    {!row.files_by_type?.result && <Typography>Tidak ada berkas</Typography>}
                  </Box>
                </Stack>
              </Box>
            </Collapse>
          </TableCell>
        </TableRow>
      </React.Fragment>
    );
  }
  {
    /* ------------------ END TABLE ROW ------------------ */
  }

  function TableContent() {
    return (
      <Table aria-label="collapsible table">
        {/* ------------------ TABLE HEADER ------------------ */}
        <TableBody>
          <TableRow>
            <TableCell style={headStyle} align="left" />
            <TableCell style={headStyle} align="left">
              Code
            </TableCell>
            <TableCell style={headStyle} align="left">
              Name
            </TableCell>
            <TableCell style={headStyle} align="left">
              Nomor Polis
            </TableCell>
            <TableCell style={headStyle} align="left">
              Tanggal Pengajuan
            </TableCell>
            <TableCell style={headStyle} align="left">
              Service Type
            </TableCell>
            <TableCell style={headStyle} align="left">
              Claim Type
            </TableCell>
            <TableCell style={headStyle} align="left">
              Status
            </TableCell>
            <TableCell style={headStyle} align="right"></TableCell>
          </TableRow>
        </TableBody>
        {/* ------------------ END TABLE HEADER ------------------ */}

        {/* ------------------ TABLE ROW ------------------ */}
        {dataTableIsLoading ? (
          <TableBody>
            <TableRow>
              <TableCell colSpan={8} align="center">
                Loading
              </TableCell>
            </TableRow>
          </TableBody>
        ) : dataTableData.data.length === 0 ? (
          <TableBody>
            <TableRow>
              <TableCell colSpan={8} align="center">
                No Data
              </TableCell>
            </TableRow>
          </TableBody>
        ) : (
          <TableBody>
            {dataTableData.data.map((row) => (
              <Row key={row.id} row={row} />
            ))}
          </TableBody>
        )}
        {/* ------------------ END TABLE ROW ------------------ */}
      </Table>
    );
  }

  // ---------------------------------------------------------
  // Dialog Detail Claim Request
  const [openDialogDetailClaim, setOpenDialogDetailClaim] = useState(false);
  const [loadingClaimDetail, setLoadingClaimDetail] = useState(true);
  const [currentClaim, setCurrentClaim] = useState(null);

  function handleShowClaim(claimRequest) {
    setLoadingClaimDetail(true);
    setOpenDialogDetailClaim(true);

    axios
      .get(`/claim-requests/${claimRequest.id}`)
      .then(({ data }) => {
        setCurrentClaim(data.data);
        setLoadingClaimDetail(false);
      })
      .catch((err) => {
        enqueueSnackbar(err.message, { variant: 'error' });
      });
  }

  function handleDownloadLog() {}

  return (
    <Card>
      <ImportForm />

      <DataTable
        isLoading={dataTableIsLoading}
        lastRequest={0}
        data={dataTableData}
        handlePageChange={handlePageChange}
        TableContent={<TableContent />}
      />

      <DialogDetailClaim
        openDialog={openDialogDetailClaim}
        setOpenDialog={setOpenDialogDetailClaim}
        title={{ name: 'Claim Request Detail' }}
        data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
      ></DialogDetailClaim>
    </Card>
  );
}
