// @mui
import {
  Box,
  Button,
  Card,
  Collapse,
  IconButton,
  MenuItem,
  Table,
  TableBody,
  TableCell,
  TableRow,
  TextField,
  Typography,
  Stack,
  Menu,
  ButtonGroup,
  Link,
  Chip,
  TableHead,
  Grid,
  Autocomplete,
} 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';

import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
// 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 { fDateOnly, fDateTimesecond } from '@/utils/formatTime';
import { capitalizeFirstLetter } from '@/utils/formatString';
import Label from '@/components/Label';
import TableMoreMenu from '@/components/table/TableMoreMenu';
import { Import } from '@/@types/claims';
import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// import LoadingButton from '@/theme/overrides/LoadingButton';

export default function List() {
  type ServiceCode = {
    value: string,
    label: string
  }
  const { themeColorPresets } = useSettings();
  const [searchParams, setSearchParams] = useSearchParams();
  const [importResult, setImportResult] = useState<Import>(null);
  const [selectedOptions, setSelectedOptions] = useState<ServiceCode|undefined>([]); // State untuk nilai terpilih

  const navigate = useNavigate()
  const defaultValue = [
    {
      value: '-',
      label: '-'
    }
  ];
  const [serviceCode, setServiceCode] = useState(defaultValue);

  const handleOptionService = () => {
    
  }

  const handleFilter = (event: React.SyntheticEvent<Element, Event>, newValue: { value: string, label: string }[], name:string) => { // 
    const serviceCodeArray :string[] = [];
    const codeArray :string[] = [];
    const typeArray :string[] = [];
    const planArray :string[] = [];
    if (name == 'service_code'){
        newValue.map(row => {
          serviceCodeArray.push(row.value);
        })
        setSelectedOptions(newValue)
    }
    var entries = [...searchParams.entries(), ['service_code', serviceCodeArray ?? '']];
    const filter = Object.fromEntries(entries);
    loadDataTableData(filter);
  } 

  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%' }}>
        <Grid container spacing={2} >
          <Grid item md={5}>
            <TextField 
              id="search-input"
              ref={searchInput}
              label="Search"
              variant="outlined"
              fullWidth
              onChange={handleSearchChange}
              onKeyDown={(event) => {
                if (event.key === 'Enter') {
                  handleSearchSubmit(event);
                }
              }}
              value={searchText}
              placeholder='Search Code or Name...'
            />
          </Grid>
          <Grid item md={2}>
            <LocalizationProvider dateAdapter={AdapterDateFns}>
              <DesktopDatePicker
                label="Start Date"
                value={searchParams.get('start_date')}
                inputFormat="dd/MM/yyyy"
                onChange={(value) => {
                  try {
                    if (value && !!Date.parse(value)) {
                      const date:string = value ? fDateOnly(value) : '';
                      var entries = [...searchParams.entries(), ['start_date', date ?? '']];
                      const filter = Object.fromEntries(entries);
                      setSearchParams(filter);
                      loadDataTableData(filter);
                    }
                  } catch (e) {}
                }}
                renderInput={(params) => <TextField {...params} variant="outlined" />}
              />
            </LocalizationProvider>
          </Grid>
          <Grid item md={2}>
            <LocalizationProvider dateAdapter={AdapterDateFns}>
              <DesktopDatePicker
                label="End Date"
                inputFormat="dd/MM/yyyy"
                value={searchParams.get('end_date')}
                onChange={(value) => {
                  try {
                    if (value && !!Date.parse(value)) {
                      const date = fDateOnly(value);
                      var entries = [...searchParams.entries(), ['end_date', date ?? '']];
                      const filter = Object.fromEntries(entries);
                      setSearchParams(filter);
                      loadDataTableData(filter);
                    }
                  } catch (e) {}
                }}
                renderInput={(params) => <TextField {...params} variant="outlined" />}
              />
            </LocalizationProvider>
          </Grid>
          <Grid item md={3}>
            <Autocomplete
                id="combo-box-demo"
                options={serviceCode}
                multiple
                limitTags={1}
                value={selectedOptions} 
                onChange={
                  (event, newValue) => handleFilter(event, newValue, 'service_code')
                }
                fullWidth
                disableCloseOnSelect
                getOptionLabel={(option) => option.label}
                renderInput={(params) => (
                    <TextField {...params} label="Service" variant="outlined" />
                )}
            />
          

          </Grid>
        </Grid>
        
      </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 [importLoading, setImportLoading] = useState(false);

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
      setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
      setAnchorEl(null);
    };

    const handleImportButton = () => {
      if (importForm?.current) {
        handleClose();
        importForm.current ? importForm.current.click() : console.log('No File selected');
      } else {
        alert('No file selected');
      }
    };

    const handleCancelImportButton = () => {
      importForm.current.value = '';
      importForm.current.dispatchEvent(new Event('change', { bubbles: true }));
    };

    const handleImportChange = (event: any) => {
      if (event.target.files[0]) {
        setCurrentImportFileName(event.target.files[0].name);
      } else {
        setCurrentImportFileName(null);
      }
    };

    const handleUpload = () => {
      if (importForm.current?.files.length) {
        const formData = new FormData();
        formData.append('file', importForm.current?.files[0]);

        setImportLoading(true);
        axios
          .post(`claim-requests/import`, formData)
          .then((response) => {
            handleCancelImportButton();
            loadDataTableData();
            setImportResult(response.data);
            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
            setImportLoading(false);
          })
          .catch((response) => {
            enqueueSnackbar(
              'Looks like something went wrong. Please check your data and try again. ' +
                response.message,
              { variant: 'error' }
            );
            setImportLoading(false);
          });
      } else {
        enqueueSnackbar('No File Selected', { variant: 'warning' });
      }
    };

    const handleGetTemplate = (type :string) => {
      axios.get('corporates/import-document-example/' + type)
        .then((response) => {
          const link = document.createElement('a');
          link.href = response.data.data.file_url;
          link.setAttribute('download', response.data.data.file_name);
          document.body.appendChild(link);
          link.click();
          handleClose();
        })
    }

    const handleGetData = (type :string) => {
      axios.get(`corporates/${corporate_id}/data-plan-benefit`)
        .then((response) => {
          const link = document.createElement('a');
          link.href = response.data.data.file_url;
          link.setAttribute('download', response.data.data.file_name);
          document.body.appendChild(link);
          link.click();
          handleClose();
        })
    }

    return (
      <div>
         <input
          type="file"
          id="file"
          ref={importForm}
          style={{ display: 'none' }}
          onChange={handleImportChange}
          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
        />
        {!currentImportFileName && (
          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
            <SearchInput onSearch={applyFilter} />
            <Button
              variant="outlined"
              startIcon={<UploadIcon />}
              sx={{ p: 1.8 }}
              onClick={handleClick}
            >
              Import
            </Button>
            <Menu
                id="import-button"
                anchorEl={anchorEl}
                open={createMenu}
                onClose={handleClose}
                MenuListProps={{
                  'aria-labelledby': 'basic-button',
                }}
              >
                <MenuItem onClick={handleImportButton}>Import</MenuItem>
                <MenuItem onClick={() => {handleGetTemplate('claim-request')}}>Download Template</MenuItem>
                <MenuItem onClick={() => {handleGetData('data-plan-benefit')}}>Download Claim Request</MenuItem>
              </Menu>
            <Button
              variant="contained"
              startIcon={<AddIcon />}
              sx={{ p: 1.8 }}
              onClick={() => {
                navigate('/claim-requests/create');
              }}
            >
              Create
            </Button>
          </Stack>
        )}

        {currentImportFileName && (
          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
            <ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
              <Button onClick={handleImportButton} fullWidth>
                {currentImportFileName ?? 'No File Selected'}
              </Button>
              <Button
                onClick={handleCancelImportButton}
                size="small"
                fullWidth={false}
                sx={{ p: 1.8 }}
              >
                <CancelIcon color="error" />
              </Button>
            </ButtonGroup>

            <LoadingButton
              id="upload-button"
              variant="outlined"
              startIcon={<UploadIcon />}
              sx={{ p: 1.8 }}
              onClick={handleUpload}
              loading={importLoading}
            >
              Upload
            </LoadingButton>
          </Stack>
        )}
         {importResult && (
          // <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
          //   <Box sx={{ color: 'text.secondary' }}>
          //     Last Import Result Report :{' '}
          //     <a href={importResult.result_file?.url ?? '#'}>
          //       {importResult.result_file?.name ?? '-'}
          //     </a>
          //   </Box>
          // </Stack>

          <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
            <Box sx={{ color: 'text.secondary' }}>
              Last Import Result :{' '}
              <Box sx={{ color: 'success.main', display: 'inline' }}>
                {importResult.result_file?.total_success_row ?? 0}
              </Box>{' '}
              Row Processed,{' '}
              <Box sx={{ color: 'error.main', display: 'inline' }}>
                {importResult.result_file?.total_failed_row}
              </Box>{' '}
              Failed, Report :{' '}
              <a href={importResult.result_file?.url ?? '#'}>
                {importResult.result_file?.name ?? '-'}
              </a>
            </Box>
          </Stack>
          
        )}
      </div>
    );
  }

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

  const loadDataTableData = async (appliedFilter: any | null = null) => {

    axios.get('service').then((response) => {
        const formattedData = response.data.data.map(service => ({
            value: service.code,
            label: service.name
        }));
        setServiceCode(formattedData);
    });

    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);
              // }}
            >
              {row.code}
            </Typography>
          </TableCell>
          <TableCell align="left">{row.member?.full_name}</TableCell>
          <TableCell align="left"><Label>{fDateTimesecond(row.submission_date)}</Label></TableCell>
          <TableCell align="left">{row.service_name}</TableCell>
          <TableCell align="left">{row.payment_type_name}</TableCell>
          <TableCell align="left">
          { row.status == "requested" ?
              (<Label variant='ghost' color='primary'>{capitalizeFirstLetter(row.status)}</Label>) :
            row.status == "submission" ?
              (<Label color='info'> {capitalizeFirstLetter(row.status)}</Label>) :
            row.status == "declined" ?
              (<Label color='error'> {capitalizeFirstLetter(row.status)}</Label>) :
              (<Label color='success'> {capitalizeFirstLetter(row.status)}</Label>)
          }
          </TableCell>
          <TableCell align="right">
            <TableMoreMenu actions={
              <>
                <MenuItem onClick={() => navigate(`/claim-requests/edit/${row.id}`)}>
                  <EditOutlinedIcon />
                  Edit
                </MenuItem>
                <MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
                  <FindInPageOutlinedIcon />
                  Detail
                </MenuItem>
              </>
            } />
          </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?.claim_kondisi &&
                      row.files_by_type?.claim_kondisi.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?.claim_kondisi && (
                      <>
                        <Typography fontWeight={600} sx={{ marginRight: 4 }}> - Kondisi</Typography>
                        {row.files_by_type?.claim_kondisi.map((file, index) => (

                          <Stack direction="row" key={index}>
                            <a href={file.url} target="_blank">
                              {file.name}
                            </a>
                          </Stack>
                        ))}
                      </>
                    )}

                    {row.files_by_type?.claim_diagnosis && (
                      <>
                        <Typography fontWeight={600} sx={{ marginRight: 4 }}> - Diagnosa</Typography>
                        {row.files_by_type?.claim_diagnosis.map((file, index) => (

                          <Stack direction="row" key={index}>
                            <a href={file.url} target="_blank">
                              {file.name}
                            </a>
                          </Stack>
                        ))}
                      </>
                    )}

                    {row.files_by_type?.claim_result && (
                      <>
                        <Typography fontWeight={600} sx={{ marginRight: 4 }}> - Hasil</Typography>
                        {row.files_by_type?.claim_result.map((file, index) => (

                          <Stack direction="row" key={index}>
                            <a href={file.url} target="_blank">
                              {file.name}
                            </a>
                          </Stack>
                        ))}
                      </>
                    )}
                    {(!row.files_by_type?.claim_result && !row.files_by_type?.claim_diagnosis && !row.files_by_type?.claim_kondisi)&& <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 ------------------ */}
        <TableHead>
          <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">
              Date of Submission
            </TableCell>
            <TableCell style={headStyle} align="left">
              Service Type
            </TableCell>
            <TableCell style={headStyle} align="left">
              Claim Method
            </TableCell>
            <TableCell style={headStyle} align="left">
              Status
            </TableCell>
            <TableCell style={headStyle} align="right"></TableCell>
          </TableRow>
        </TableHead>
        {/* ------------------ 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 (
    <Grid container>
      <Grid item sm={12}>
        <ImportForm />
      </Grid>

      <Grid item sm={12}>
        <DataTable
          isLoading={dataTableIsLoading}
          lastRequest={0}
          data={dataTableData}
          handlePageChange={handlePageChange}
          TableContent={<TableContent />}
        />
      </Grid>
      <Grid item sm={12}>
        <DialogDetailClaim
          openDialog={openDialogDetailClaim}
          setOpenDialog={setOpenDialogDetailClaim}
          title={{ name: 'Claim Request Detail' }}
          data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
        ></DialogDetailClaim>
      </Grid>
    </Grid>
  );
}