// @mui
import {
  Autocomplete,
  Box,
  Button,
  Card,
  Collapse,
  IconButton,
  MenuItem,
  OutlinedInput,
  Paper,
  Select,
  SelectChangeEvent,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
  Badge,
  Tab,
  Tabs,
  CardHeader,
  Stack,
  Menu,
  ButtonGroup,
  Dialog,
  DialogContent,
  DialogContentText,
  DialogActions,
  DialogTitle,
  FormControl,
  FormControlLabel,
  Checkbox,
  Grid,
} 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, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
import { useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import { Icd } from '../../../@types/diagnosis';
import BasePagination from '../../../components/BasePagination';
import { enqueueSnackbar } from 'notistack';
import { Icon } from '@iconify/react';
import { LoadingButton } from '@mui/lab';

export default function List(props: any) {
  const { themeStretch } = useSettings();
  const { corporate_id, service_code } = useParams();
  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(searchText); // Trigger to Parent
    };

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

    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 [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(`corporates/${corporate_id}/diagnosis-exclusions/import`, formData)
          .then((response) => {
            handleCancelImportButton();
            loadDataTableData();
            setImportResult(response.data);
            
            setImportLoading(false);
            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
          })
          .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();
        })
    }

    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} />
            {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
            <Button
              id="import-button"
              variant="outlined"
              startIcon={<AddIcon />}
              sx={{ p: 1.8 }}
              aria-controls={createMenu ? 'basic-menu' : undefined}
              aria-haspopup="true"
              aria-expanded={createMenu ? 'true' : undefined}
              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('diagnosis-exclusion')}}>Download Template</MenuItem>
            </Menu>
          </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 import href={importResult.result_file?.url ?? '#'}>
                {importResult.result_file?.name ?? '-'}
              </a>
            </Box>
          </Stack>
        )}
      </div>
    );
  }

  // Called on every row to map the data to the columns
  function createData(icd: Icd): Icd {
    return {
      ...icd,
    };
  }
  const plans = props?.data.map((plan: any) => {
    return {
      value: plan.code,
      label: plan.code,
    };
  });
  const [exclusions, setExclusions] = useState([
    {
      min_age: '',
      max_age: '',
      plan: '',
      msc: {
        m: '',
        s: '',
        c: '',
      },
      gneder: {
        male: '',
        female: '',
      },
    },
  ]);

  function CollapseEdit(props: {
    row: ReturnType<typeof createData>;
    data: any;
    index: any;
    setExclusions: any;
    exclusions: any;
  }) {
    const { row, index, data } = props;
  }

  function Row(props: {
    row: ReturnType<typeof createData>;
    data: any;
    index: any;
    setExclusions: any;
    exclusions: any;
  }) {
    const { row, index, data } = props;

    const [open, setOpen] = React.useState(false);
    const [openDelete, setOpenDelete] = React.useState(false);

    const handleDelete = (model: any) => {
      axios
        .delete(`/diagnosis-exclusions/${row.id}`)
        .then((res) => {
          setDataTableData({
            ...dataTableData,
            data: dataTableData.data.filter((model) => model.id != row.id),
          });
          enqueueSnackbar('Data berhasil dihapus', { variant: 'success' });
        })
        .catch((error) => {
          enqueueSnackbar(
            error.response.data.message ?? error.message ?? 'Failed Processing Request',
            { variant: 'error' }
          );
        });
    };

    const [openEdit, setOpenEdit] = React.useState(false);

    console.log('open', open);
    console.log('openEdit', openEdit);

    // const [plans, setPlans] = useState([]);

    const plans = data;

    const [minAge, setMinAge] = useState('');
    const [maxAge, setMaxAge] = useState('');
    const [valuePlan, setValuePlan] = useState([]);

    const handleMinAge = (event: ChangeEvent<HTMLInputElement>) => {
      setMinAge(event.target.value);
    };

    const handleMaxAge = (event: ChangeEvent<HTMLInputElement>) => {
      setMaxAge(event.target.value);
    };

    const handlePlanChange = (event: ChangeEvent<HTMLInputElement>, value: any) => {
      setValuePlan(value);
    };

    // const [currentValuePlan, setCurrentValuePlan] = useState([]);

    const converToArray = (value: any) => {
      console.log('value', value);
      if (value == null || value == '') {
        return null;
      }
      const array = value.split(',') ?? [];
      const currentValuePlan = array.map((item: any) => ({
        value: item,
        label: item,
      }));
      console.log('currentValuePlan', currentValuePlan);

      return currentValuePlan;
    };
    // const [exclusionModal, setExclusionModal] = useState(false);

    const handleConfigExclusion = (
      event: ChangeEvent<HTMLInputElement>,
      icd: any,
      value: string,
      type: string
    ) => {
      // console.log(event.target.checked, service, icd, value, type);
      const allData = tempExclusions.find((item: any) => item.icd_id === icd.id);
      if (allData) {
        try {
          axios
            .post(`/corporates/${corporate_id}/diagnosis-exclusions/store`, {
              // service_code: service.service_code,
              icd_id: icd.id,
              checked: event.target.checked ? '1' : '0',
              value: value,
              type: type,
              one_row: allData,
            })
            .then((res) => {
              console.log('update', res.data);
              loadDataTableData();
            });

          enqueueSnackbar('Exclusion Updated', {
            variant: 'success',
          });
        } catch (error) {
          console.log(error);
          enqueueSnackbar('Exclusion Update Failed', {
            variant: 'error',
          });
        }
      }
    };

    const [tempExclusions, setTempExclusions] = useState([
      {
        min_age: '',
        max_age: '',
        plan: '',
        msc: {
          m: '',
          s: '',
          c: '',
        },
        gneder: {
          male: '',
          female: '',
        },
      },
    ]);

    console.log('tempExclusions', tempExclusions);

    const handleChange = (index: any, evnt: any, type: any, row: any, value: any) => {
      if (type == 'min_age' || type == 'max_age') {
        const { name, value } = evnt.target;
        const list = [...exclusions];

        console.log('list', list);
        list[index][type] = value;
        list[index].icd_id = row;
        setTempExclusions(list);
      } else if (type == 'msc' || type == 'gender') {
        // const { name, value } = evnt.target;
        const list = [...exclusions];
        console.log('checked', evnt.target.checked);
        console.log('exc', exclusions);
        console.log('list', list);
        console.log('index', index);
        console.log('type', type);

        list[index][type][value] = evnt.target.checked;
        list[index].icd_id = row;

        setTempExclusions(list);
      } else {
        const data = value.map((item: any) => item.value);

        const string = data.join(',');
        const list = [...exclusions];
        list[index][type] = string;
        list[index].icd_id = row;

        setTempExclusions(list);
      }
    };

    console.log('exclusions', exclusions);

    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">{row.service_code}</TableCell>
          <TableCell align="left">{row.code}</TableCell>
          <TableCell align="left">{row.name}</TableCell>
          <TableCell align="left">{Object.keys(row.rules).length ? 'With Rules' : 'All'}</TableCell>

          <TableCell align="center">
            {openEdit ? (
              <Button
                variant="contained"
                color="success"
                size="small"
                sx={{
                  color: '#fff',
                }}
                onClick={(event) => {
                  setOpenEdit(!openEdit);
                  if (open == false) {
                    setOpen(true);
                  }
                  handleConfigExclusion(event, row, '', 'one_row');
                }}
              >
                Save
              </Button>
            ) : (
              <Button
                variant="outlined"
                color="success"
                size="small"
                onClick={() => {
                  setOpenEdit(true);
                  setOpen(true);
                }}
              >
                Edit
              </Button>
            )}
            <Button
              variant="outlined"
              color="error"
              size="small"
              sx={{ ml: 2 }}
              onClick={() => {
                setOpenDelete(true);
              }}
            >
              Delete
            </Button>
          </TableCell>
        </TableRow>
        {/* COLLAPSIBLE ROW */}
        <TableRow>
          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
            <Collapse in={open} timeout="auto" unmountOnExit>
              {open == true ? (
                openEdit == false ? (
                  <Box sx={{ borderBottom: 1 }}>
                    {Object.keys(row.rules).length ? (
                      <div>
                        <Typography variant="body" sx={{ fontWeight: 'bold' }}>
                          Excluded Only for :
                        </Typography>

                        {row.rules.msc && (
                          <Typography variant="body" component="div">
                            MSC : {row.rules.msc.join(', ') ?? '-'}
                          </Typography>
                        )}
                        {row.rules.gender && (
                          <Typography variant="body" component="div">
                            Gender : {row.rules.gender.join(', ') ?? '-'}
                          </Typography>
                        )}
                        {(row.rules.min_age || row.rules.max_age) && (
                          <Typography variant="body" component="div">
                            Age : {row.rules.min_age ?? '-'} - {row.rules.max_age ?? '-'}
                          </Typography>
                        )}
                        {row.rules.plan && (
                          <Typography variant="body" component="div">
                            Plan : {row.rules.plan.join(', ') ?? '-'}
                          </Typography>
                        )}
                      </div>
                    ) : (
                      <Typography variant="body2" gutterBottom component="div">
                        Excluded for All
                      </Typography>
                    )}
                  </Box>
                ) : (
                  // <CollapseEdit row={row} index={index} plans={plans} />
                  <Box sx={{ borderBottom: 1, pb: 2 }}>
                    <Typography variant="body2" sx={{ fontWeight: 'bold', mb: 2 }}>
                      Edit Exclusion :
                    </Typography>

                    <Stack direction={'column'} spacing={2}>
                      <FormControl fullWidth>
                        <Grid container spacing={2}>
                          <Grid item xs={2} md={2}>
                            <Typography id="demo-simple-select-label">MSC</Typography>
                          </Grid>

                          <Grid item xs={10} md={10}>
                            <Stack direction={'row'} spacing={2}>
                              <Grid item xs={3} md={3}>
                                <FormControlLabel
                                  control={
                                    <Checkbox
                                      checked={row.value_rules.msc?.m == '1'}
                                      onChange={(event) => {
                                        // handleConfigExclusion(event, row, 'm', 'msc');
                                        handleChange(index, event, 'msc', row.id, 'm');
                                      }}
                                    />
                                  }
                                  label="Member"
                                />
                              </Grid>
                              <Grid item xs={3} md={3}>
                                <FormControlLabel
                                  control={
                                    <Checkbox
                                      checked={row.value_rules.msc?.s == '1'}
                                      onChange={(event) => {
                                        // handleConfigExclusion(event, row, 's', 'msc');
                                        handleChange(index, event, 'msc', row.id, 's');
                                      }}
                                    />
                                  }
                                  label="Spouse"
                                />
                              </Grid>
                              <Grid item xs={3} md={3}>
                                <FormControlLabel
                                  control={
                                    <Checkbox
                                      checked={row.value_rules.msc?.c == '1'}
                                      onChange={(event) => {
                                        // handleConfigExclusion(event, row, 'c', 'msc');
                                        handleChange(index, event, 'msc', row.id, 'c');
                                      }}
                                    />
                                  }
                                  label="Child"
                                />
                              </Grid>
                            </Stack>
                          </Grid>
                        </Grid>
                      </FormControl>

                      <FormControl fullWidth>
                        <Grid container spacing={2}>
                          <Grid item xs={2} md={2}>
                            <Typography id="demo-simple-select-label">Gender</Typography>
                          </Grid>
                          <Grid item xs={10} md={10}>
                            <Stack direction={'row'} spacing={2}>
                              <Grid item xs={3} md={3}>
                                <FormControlLabel
                                  control={
                                    <Checkbox
                                      checked={row.value_rules.gender?.male == '1'}
                                      onChange={(event) => {
                                        // handleConfigExclusion(event, row, 'male', 'gender');
                                        handleChange(index, event, 'gender', row.id, 'male');
                                      }}
                                    />
                                  }
                                  label="Male"
                                />
                              </Grid>
                              <Grid item xs={3} md={3}>
                                <FormControlLabel
                                  control={
                                    <Checkbox
                                      checked={row.value_rules.gender?.female == '1'}
                                      onChange={(event) => {
                                        // handleConfigExclusion(event, row, 'female', 'gender');
                                        handleChange(index, event, 'gender', row.id, 'female');
                                      }}
                                    />
                                  }
                                  label="Female"
                                />
                              </Grid>
                            </Stack>
                          </Grid>
                        </Grid>
                      </FormControl>
                      <FormControl fullWidth>
                        <Grid container spacing={2}>
                          <Grid item xs={2} md={2}>
                            <Typography id="demo-simple-select-label">Age</Typography>
                          </Grid>
                          <Grid item xs={10} md={10}>
                            <Stack direction={'row'} spacing={2}>
                              <Grid item xs={3} md={3}>
                                <TextField
                                  id="outlined-number"
                                  type="number"
                                  defaultValue={row.value_rules.min_age ?? ''}
                                  onChange={(event) => {
                                    handleMinAge(event);
                                    handleChange(index, event, 'min_age', row.id);
                                  }}
                                  onKeyDown={(event) => {
                                    if (event.key === 'Enter') {
                                      handleConfigExclusion(event, row, minAge, 'min_age');
                                    }
                                  }}
                                />
                              </Grid>
                              <Grid item xs={3} md={3}>
                                <TextField
                                  id="outlined-number"
                                  type="number"
                                  defaultValue={row.value_rules.max_age ?? ''}
                                  onChange={(event) => {
                                    handleMaxAge(event);
                                    handleChange(index, event, 'max_age', row.id);
                                  }}
                                  onKeyDown={(event) => {
                                    if (event.key === 'Enter') {
                                      handleConfigExclusion(event, row, maxAge, 'max_age');
                                    }
                                  }}
                                />
                              </Grid>
                            </Stack>
                          </Grid>
                        </Grid>
                      </FormControl>
                      <FormControl fullWidth>
                        <Grid container spacing={2}>
                          <Grid item xs={2} md={2}>
                            <Typography id="demo-simple-select-label">Plan</Typography>
                          </Grid>
                          <Grid item xs={10} md={10}>
                            <Stack direction={'row'} spacing={2}>
                              <Grid item xs={12} md={12}>
                                <Autocomplete
                                  id="combo-box-demo"
                                  options={plans}
                                  multiple
                                  limitTags={5}
                                  fullWidth
                                  getOptionLabel={(option) => option.label}
                                  defaultValue={converToArray(row.value_rules.plan) || []}
                                  isOptionEqualToValue={(option, value) =>
                                    option.value === value.value
                                  }
                                  onChange={(event, value) => {
                                    handlePlanChange(event, value);
                                    handleChange(index, event, 'plan', row.id, value);
                                  }}
                                  onKeyDown={(event) => {
                                    if (event.key === 'Enter') {
                                      handleConfigExclusion(event, row, valuePlan, 'plan');
                                    }
                                  }}
                                  renderInput={(params) => (
                                    <TextField {...params} label="Plan" variant="outlined" />
                                  )}
                                />
                              </Grid>
                            </Stack>
                          </Grid>
                        </Grid>
                      </FormControl>
                    </Stack>
                  </Box>
                )
              ) : null}
            </Collapse>
          </TableCell>
        </TableRow>

        <Dialog
          open={openDelete}
          onClose={() => {
            setOpenDelete(false);
          }}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          {/* <DialogTitle id="alert-dialog-title">{'Hapus Dokter'}</DialogTitle> */}
          <DialogContent sx={{ p: 5 }}>
            <Icon
              icon="eva:trash-2-outline"
              style={{
                width: '100px',
                height: '100px',
                color: '#FF0000',
                margin: 'auto',
                display: 'block',
                marginBottom: '20px',
                alignContent: 'center',
              }}
            />
            <DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
              Apakah anda yakin ingin menghapus
            </DialogContentText>
            <Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
              Exclusion ini?
            </Typography>
          </DialogContent>
          <DialogActions>
            <Button
              onClick={() => {
                setOpenDelete(false);
              }}
              color="primary"
              variant="outlined"
            >
              Batal
            </Button>
            <Button
              onClick={() => {
                handleDelete(row.id);
              }}
              color="primary"
              variant="contained"
              autoFocus
            >
              Hapus
            </Button>
          </DialogActions>
        </Dialog>
      </React.Fragment>
    );
  }

  // Dummy Default Data
  const [dataTableIsLoading, setDataTableLoading] = useState(true);
  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
    current_page: 1,
    data: [],
    path: '',
    first_page_url: '',
    last_page: 1,
    last_page_url: '',
    next_page_url: '',
    prev_page_url: '',
    per_page: 10,
    from: 0,
    to: 0,
    total: 0,
  });

  const loadDataTableData = async (appliedFilter: any | null = null) => {
    setDataTableLoading(true);
    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
    const response = await axios.get('/corporates/' + corporate_id + '/diagnosis-exclusions', {
      params: filter,
    });
    setDataTableLoading(false);

    setDataTableData(response.data);

    var data = response.data.data;
    var value_rules = data.map((item: any) => item.value_rules);

    setExclusions(value_rules);
  };

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

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

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

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

  return (
    <Stack>
      <ImportForm />

      <Card>
        {/* The Main Table */}
        <TableContainer component={Paper}>
          <Table aria-label="collapsible table">
            <TableBody>
              <TableRow>
                <TableCell style={headStyle} align="left" />
                <TableCell style={headStyle} align="left">
                  Service
                </TableCell>
                <TableCell style={headStyle} align="left">
                  Code
                </TableCell>
                <TableCell style={headStyle} align="left">
                  Name
                </TableCell>
                <TableCell style={headStyle} align="left">
                  Rules
                </TableCell>
                <TableCell style={headStyle} align="center">
                  Action
                </TableCell>
              </TableRow>
            </TableBody>
            {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: any, index: any) => (
                  <Row
                    key={row.id}
                    row={row}
                    data={plans}
                    index={index}
                    setExclusions={setExclusions}
                  />
                ))}
              </TableBody>
            )}
          </Table>
        </TableContainer>

        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
      </Card>
    </Stack>
  );
}
