import * as Yup from 'yup';
// @mui
import {
  Box,
  Button,
  Card,
  Collapse,
  IconButton,
  InputLabel,
  MenuItem,
  OutlinedInput,
  Paper,
  Select,
  SelectChangeEvent,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
  Badge,
  Tab,
  Tabs,
  CardHeader,
  Stack,
  Menu,
  ButtonGroup,
  Checkbox,
  FormControlLabel,
  Tooltip,
  Divider,
  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';
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
import HistoryIcon from '@mui/icons-material/History';
// hooks
import React, { ChangeEvent, Component, useEffect, useMemo, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
import { Link, useNavigate, 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 { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { FormProvider, RHFTextField, RHFSwitch, RHFSelect } from '../../../components/hook-form';
import { Add, CheckBox } from '@mui/icons-material';
import { CorporateService } from '../../../@types/corporates';
import { number } from 'yup/lib/locale';
import DialogLog from './sections/DialogLog';
import TableMoreMenu from '@/components/table/TableMoreMenu';
import Label from '@/components/Label';
import DialogUpdateStatus from '@/components/DialogUpdateStatus';
import palette from '@/theme/palette';
import { enqueueSnackbar } from 'notistack';
import { LoadingButton } from '@mui/lab';

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

  const [openDialog, setOpenDialog] = useState(false);
  const [dialogTitle, setDialogTitle] = useState('');
  const [isDialog, setIsDialog] = useState('');
  const [edit, setEdit] = useState({});
  const clickHandler = (isDialog: string) => {
    switch (isDialog) {
      case 'edit':
        setIsDialog(isDialog);
        setOpenDialog(true);
        break;
      default:
        break;
    }
  };

  

  // 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,
  });

  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 SearchForm(props: any) {
    // Create Button Menu
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

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

    return (
      <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
        <SearchInput onSearch={applyFilter} />
      </Stack>
    );
  }

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

  // Generate the every row of the table
  type DataContent = {
    code: string;
    name: string;
    id: string;
    status: string|number;
  };

  type DataType = {
    code: string;
    name: string;
    id: string;
  }

  type FormValuesProps = {
    value: string;
    active: boolean;
  };
  
  const [isDialogOpen, setDialogOpen] = useState(false)
  let titles = {
    name: 'Update Status',
    icon: '-'
  }
  const [dataValue, setDataValue] = useState('');
  const [dataDescription, setDescriptionValue] = useState('');
  const [url, setUrl] = useState('');

  //  const { id, service_code, status } = data;
  
  function Row(props: { row: ReturnType<typeof createData> }) {
    const { row } = props;
    const [open, setOpen] = React.useState(false);
    const navigate = useNavigate()

    const handleConfigChange = (event: ChangeEvent<HTMLInputElement>, service: any) => {
      console.log(event.target.name, event.target.checked, service);

      axios.put(`/corporates/${corporate_id}/services`, {
        service_code: service.service_code,
        config_name: event.target.name,
        config_value: event.target.checked,
      });
    };

    // const handleActivate = (service: any, status: string) => {
    //   axios
    //     .put(`/corporates/${corporate_id}/services/${service.service_code}`, {
    //       service_code: service.service_code,
    //       status, 
    //       reason:service.reason
    //     })
    //     .then((res) => {
    //       setDataTableData({
    //         ...dataTableData,
    //         data: dataTableData.data.map((service) => {
    //           let updatedService = service;
    //           if (row.id == service.id) {
    //             updatedService.status = res.data.status;
    //           }
    //           return updatedService;
    //         }),
    //       });
    //     });
    // };

    const handleActivate = (isOpen: boolean, dataValue: DataContent) => {
      setDialogOpen(isOpen)
      setDataValue(dataValue)
      setDescriptionValue('Are you sure to inactive this service ?')
      setUrl(url)
    };

    return (
      <React.Fragment>
        <TableRow>
          <TableCell>

          </TableCell>
          <TableCell align="left">{row.service_code}</TableCell>
          <TableCell align="left">{row.name}</TableCell>
          <TableCell align="left">
            {row.status == 'active' ? 
            <Label color='success'>{row.status}</Label> : 
            <Label color='error'>{row.status}</Label>}
          </TableCell>

          <TableCell align="right" sx={{borderBottom: 'unset'}}>
            <TableMoreMenu actions={
              <>
                <MenuItem onClick={() => navigate(`/corporates/${row.corporate_id}/services/${row.service_code}`)}>
                  <SettingsOutlinedIcon />
                  Config
                </MenuItem>
                <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/services/${row.id}/history`)}>
                  <HistoryIcon />
                  History
                </MenuItem>
                <MenuItem onClick={() => handleActivate(true, {code: row.service_code, name: row.name, id:corporate_id, status: row.status})}>
                  <CachedOutlinedIcon />
                  Update Status
                </MenuItem>
              </>
            } />
          </TableCell>
          
        </TableRow>
        {/* COLLAPSIBLE ROW */}
        {false && (
          <TableRow>
            <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
              <Collapse in={open} timeout="auto" unmountOnExit>
                <Box sx={{ borderBottom: 1 }}>
                  <Stack>
                    <TableContainer>
                      <Table sx={{ minWidth: 650 }} size="small">
                        <TableHead>
                          <TableRow>
                            <TableCell colSpan={4} sx={{ py: 1 }}>
                              General Practitioner
                            </TableCell>
                          </TableRow>
                        </TableHead>
                        <TableBody>
                          <TableRow>
                            <TableCell colSpan={2}>External Doctor</TableCell>
                            <TableCell colSpan={2}>Internal Doctor</TableCell>
                          </TableRow>
                          <TableRow>
                            <TableCell>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    defaultChecked={
                                      row.configurations.gp_external_doctor_online == '1'
                                    }
                                    onChange={(event) => {
                                      handleConfigChange(event, row);
                                    }}
                                    name="gp_external_doctor_online"
                                  />
                                }
                                label="Online"
                              />
                            </TableCell>
                            <TableCell>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    defaultChecked={
                                      row.configurations.gp_external_doctor_offline == '1'
                                    }
                                    onChange={(event) => {
                                      handleConfigChange(event, row);
                                    }}
                                    name="gp_external_doctor_offline"
                                  />
                                }
                                label="Offline"
                              />
                            </TableCell>
                            <TableCell>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    defaultChecked={
                                      row.configurations.gp_internal_doctor_online == '1'
                                    }
                                    onChange={(event) => {
                                      handleConfigChange(event, row);
                                    }}
                                    name="gp_internal_doctor_online"
                                  />
                                }
                                label="Online"
                              />
                            </TableCell>
                            <TableCell>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    defaultChecked={
                                      row.configurations.gp_internal_doctor_offline == '1'
                                    }
                                    onChange={(event) => {
                                      handleConfigChange(event, row);
                                    }}
                                    name="gp_internal_doctor_offline"
                                  />
                                }
                                label="Offline"
                              />
                            </TableCell>
                          </TableRow>
                        </TableBody>
                      </Table>
                    </TableContainer>

                    <TableContainer>
                      <Table sx={{ minWidth: 650 }} size="small">
                        <TableHead>
                          <TableRow>
                            <TableCell colSpan={4} sx={{ py: 1 }}>
                              Specialist Practitioner
                            </TableCell>
                          </TableRow>
                        </TableHead>
                        <TableBody>
                          <TableRow>
                            <TableCell colSpan={2}>External Doctor</TableCell>
                            <TableCell colSpan={2}>Internal Doctor</TableCell>
                          </TableRow>
                          <TableRow>
                            <TableCell>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    defaultChecked={
                                      row.configurations.sp_external_doctor_online == '1'
                                    }
                                    onChange={(event) => {
                                      handleConfigChange(event, row);
                                    }}
                                    name="sp_external_doctor_online"
                                  />
                                }
                                label="Online"
                              />
                            </TableCell>
                            <TableCell>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    defaultChecked={
                                      row.configurations.sp_external_doctor_offline == '1'
                                    }
                                    onChange={(event) => {
                                      handleConfigChange(event, row);
                                    }}
                                    name="sp_external_doctor_offline"
                                  />
                                }
                                label="Offline"
                              />
                            </TableCell>
                            <TableCell>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    defaultChecked={
                                      row.configurations.sp_internal_doctor_online == '1'
                                    }
                                    onChange={(event) => {
                                      handleConfigChange(event, row);
                                    }}
                                    name="sp_internal_doctor_online"
                                  />
                                }
                                label="Online"
                              />
                            </TableCell>
                            <TableCell>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    defaultChecked={
                                      row.configurations.sp_internal_doctor_offline == '1'
                                    }
                                    onChange={(event) => {
                                      handleConfigChange(event, row);
                                    }}
                                    name="sp_internal_doctor_offline"
                                  />
                                }
                                label="Offline"
                              />
                            </TableCell>
                          </TableRow>
                        </TableBody>
                      </Table>
                    </TableContainer>

                    <TableContainer>
                      <Table sx={{ minWidth: 650 }} size="small">
                        <TableHead>
                          <TableRow>
                            <TableCell colSpan={4} sx={{ py: 1 }}>
                              Medicine
                            </TableCell>
                          </TableRow>
                        </TableHead>
                        <TableBody>
                          <TableRow>
                            <TableCell width={'25%'}>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    defaultChecked={row.configurations.vitamins == '1'}
                                    onChange={(event) => {
                                      handleConfigChange(event, row);
                                    }}
                                    name="vitamins"
                                  />
                                }
                                label="Vitamins"
                              />
                            </TableCell>
                            <TableCell width={'25%'}>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    defaultChecked={row.configurations.delivery_fee == '1'}
                                    onChange={(event) => {
                                      handleConfigChange(event, row);
                                    }}
                                    name="delivery_fee"
                                  />
                                }
                                label="Delivery Fee"
                              />
                            </TableCell>
                            <TableCell width={'25%'} />
                            <TableCell width={'25%'} />
                          </TableRow>
                        </TableBody>
                      </Table>
                    </TableContainer>

                    <TableContainer>
                      <Table sx={{ minWidth: 650 }} size="small">
                        <TableHead>
                          <TableRow>
                            <TableCell colSpan={4} sx={{ py: 1 }}>
                              Admin Fee
                            </TableCell>
                          </TableRow>
                        </TableHead>
                        <TableBody>
                          <TableRow>
                            <TableCell width={'25%'}>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    defaultChecked={
                                      row.configurations.general_practitioner_fee == '1'
                                    }
                                    onChange={(event) => {
                                      handleConfigChange(event, row);
                                    }}
                                    name="general_practitioner_fee"
                                  />
                                }
                                label="General Practitioner"
                              />
                            </TableCell>
                            <TableCell width={'25%'}>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    defaultChecked={
                                      row.configurations.specialist_practitioner_fee == '1'
                                    }
                                    onChange={(event) => {
                                      handleConfigChange(event, row);
                                    }}
                                    name="specialist_practitioner_fee"
                                  />
                                }
                                label="Specialist Practitioner"
                              />
                            </TableCell>
                            <TableCell width={'25%'} />
                            <TableCell width={'25%'} />
                          </TableRow>
                        </TableBody>
                      </Table>
                    </TableContainer>
                  </Stack>
                </Box>
              </Collapse>
            </TableCell>
          </TableRow>
        )}
      </React.Fragment>
    );
  }

  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 + '/services', {
      params: filter,
    });
    setDataTableLoading(false);

    // const service = [
    //   {
    //     'id' : 1,
    //     'code' : 'OP',
    //     'name' : 'Out Patient',
    //     'description' : 'Out Patient',
    //     'configurations' : [
    //       {
    //         'gp_external_doctor_online' : false,
    //         'gp_external_doctor_offline' : false,
    //         'gp_internal_doctor_online' : false,
    //         'gp_internal_doctor_offline' : false,
    //         'sp_external_doctor_online' : false,
    //         'sp_external_doctor_offline' : false,
    //         'sp_internal_doctor_online' : false,
    //         'sp_internal_doctor_offline' : false,
    //         'vitamins': false,
    //         'delivery_fee': false,
    //         'general_practitioner_fee': false,
    //         'specialist_practitioner_fee': false,
    //       },
    //     ]
    //   },
    //   {
    //     'id' : 2,
    //     'code' : 'IP',
    //     'name' : 'In Patient',
    //     'description' : 'In Patient',
    //     'configurations' : [
    //       {
    //         'gp_external_doctor_online' : false,
    //         'gp_external_doctor_offline' : false,
    //         'gp_internal_doctor_online' : false,
    //         'gp_internal_doctor_offline' : false,
    //         'sp_external_doctor_online' : false,
    //         'sp_external_doctor_offline' : false,
    //         'sp_internal_doctor_online' : false,
    //         'sp_internal_doctor_offline' : false,
    //         'vitamins': false,
    //         'delivery_fee': false,
    //         'general_practitioner_fee': false,
    //         'specialist_practitioner_fee': false,
    //       },
    //     ]
    //   },
    //   {
    //     'id' : 3,
    //     'code' : 'DE',
    //     'name' : 'Dental',
    //     'description' : 'Dental',
    //     'configurations' : [
    //       {
    //         'gp_external_doctor_online' : false,
    //         'gp_external_doctor_offline' : false,
    //         'gp_internal_doctor_online' : false,
    //         'gp_internal_doctor_offline' : false,
    //         'sp_external_doctor_online' : false,
    //         'sp_external_doctor_offline' : false,
    //         'sp_internal_doctor_online' : false,
    //         'sp_internal_doctor_offline' : false,
    //         'vitamins': false,
    //         'delivery_fee': false,
    //         'general_practitioner_fee': false,
    //         'specialist_practitioner_fee': false,
    //       },
    //     ]
    //   },
    //   {
    //     'id' : 4,
    //     'code' : 'Optical',
    //     'name' : 'Optical',
    //     'description' : 'Optical',
    //     'configurations' : [
    //       {
    //         'gp_external_doctor_online' : false,
    //         'gp_external_doctor_offline' : false,
    //         'gp_internal_doctor_online' : false,
    //         'gp_internal_doctor_offline' : false,
    //         'sp_external_doctor_online' : false,
    //         'sp_external_doctor_offline' : false,
    //         'sp_internal_doctor_online' : false,
    //         'sp_internal_doctor_offline' : false,
    //         'vitamins': false,
    //         'delivery_fee': false,
    //         'general_practitioner_fee': false,
    //         'specialist_practitioner_fee': false,
    //       },
    //     ]
    //   },
    //   {
    //     'id' : 5,
    //     'code' : 'MA',
    //     'name' : 'Matternity',
    //     'description' : 'Matternity',
    //     'configurations' : [
    //       {
    //         'gp_external_doctor_online' : false,
    //         'gp_external_doctor_offline' : false,
    //         'gp_internal_doctor_online' : false,
    //         'gp_internal_doctor_offline' : false,
    //         'sp_external_doctor_online' : false,
    //         'sp_external_doctor_offline' : false,
    //         'sp_internal_doctor_online' : false,
    //         'sp_internal_doctor_offline' : false,
    //         'vitamins': false,
    //         'delivery_fee': false,
    //         'general_practitioner_fee': false,
    //         'specialist_practitioner_fee': false,
    //       },
    //     ]
    //   },
    //   {
    //     'id' : 6,
    //     'code' : 'SP',
    //     'name' : 'Special Benefit',
    //     'description' : 'Special Benefit',
    //     'configurations' : [
    //       {
    //         'gp_external_doctor_online' : false,
    //         'gp_external_doctor_offline' : false,
    //         'gp_internal_doctor_online' : false,
    //         'gp_internal_doctor_offline' : false,
    //         'sp_external_doctor_online' : false,
    //         'sp_external_doctor_offline' : false,
    //         'sp_internal_doctor_online' : false,
    //         'sp_internal_doctor_offline' : false,
    //         'vitamins': false,
    //         'delivery_fee': false,
    //         'general_practitioner_fee': false,
    //         'specialist_practitioner_fee': false,
    //       },
    //     ]
    //   }
    // ];

    // console.log('asdasd', service);
    // let x = response.data;
    // x.data = service;

    setDataTableData(response.data);
  };

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

  const onSubmit = async (row : any) => {
    try {
      handleUpdate(dataValue.status, dataValue.code, row.reason) 
    } catch (error: any) {
      console.log('data gagal');
    }

    const ascent = document?.querySelector('ascent');
    if (ascent != null) {
      ascent.innerHTML = '';
    }
  };


  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();
  }, []);

  const NewCorporateSchema = Yup.object().shape({
    reason: Yup.string().required('Reason Edit is required'),
  });

  const methods = useForm<FormValuesProps>({
    resolver: yupResolver(NewCorporateSchema),
  });

  const {
      reset,
      handleSubmit,
      formState: { isSubmitting },
  } = methods;

  const handleUpdate = (active: string, service_code: string, reason:string) => {
      console.log(active)
      axios
        .put(`/corporates/${corporate_id}/services/${service_code}`, {
          service_code: service_code,
          status: active, 
          reason: reason
        })
        .then((res) => {
          window.location.reload();
        });
  }

  const getContent = () => (
    <>
       <Stack paddingX={2} paddingY={2}>
                <Typography variant='subtitle1'>Are you sure to {dataValue?.status == 'active' ? 'inactive' : 'active'} this service ?</Typography>
            </Stack>
            <Card>
                <Grid container paddingX={2} paddingY={2}>
                    <Grid item xs={4} md={4}>
                        <Typography variant='inherit'>Code</Typography>
                    </Grid>
                    <Grid item xs={8}>
                        <Typography variant='subtitle1'>{dataValue?.code}</Typography>
                    </Grid>
                    <Grid item xs={4} md={4} marginTop={2}>
                        <Typography variant='inherit'>Service Name</Typography>
                    </Grid>
                    <Grid item xs={8} marginTop={2}>
                        <Typography variant='subtitle1'>{dataValue?.name}</Typography>
                    </Grid>
                </Grid>
            </Card>

            <Typography marginTop={5} marginBottom={3} variant='subtitle1'>
                Reason for update*
            </Typography>
            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
                <RHFSelect
                    name="reason"
                    label="Reason for update"
                    >
                    <option value=""></option>
                    <option value="Agreement changed">Agreement changed</option>
                    <option value="Endorsement">Endorsement</option>
                    <option value="Renewal">Renewal</option>
                    <option value="Worng Setting">Worng Setting</option>
                </RHFSelect>
            <Stack
              alignItems="center"
              justifyContent="flex-end"
              direction={{ xs: 'column', md: 'row' }}
              spacing={2}
              marginTop={5}
            >
            <Stack direction="row" spacing={1}>
            <Button
                sx={{
                boxShadow: 'none',
                }}
                variant="outlined"
                size="medium"
                fullWidth={true}
                onClick={() => setDialogOpen(false)}
            >
                Cancel
            </Button>

            {dataValue?.status == 'active' ?  
              <LoadingButton
                sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
                type="submit"
                variant="contained"
                size="medium"
                fullWidth={true}
                loading={isSubmitting}
                color='error'
              >
              Inactive
            </LoadingButton>
            : 
            <LoadingButton
              sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
              type="submit"
              variant="contained"
              size="medium"
              fullWidth={true}
              loading={isSubmitting}
              color='success'
            >
            Active
          </LoadingButton>
          
            
            }
            </Stack>
        </Stack>
        
        </FormProvider>
    </>
  );

  return (
    <Stack>
      <SearchForm />
        {/* The Main Table */}
        <TableContainer component={Paper}>
          <Table aria-label="collapsible table">
            <TableHead>
              <TableRow>
                <TableCell align="left" width={50} />
                <TableCell align="left">
                  Code
                </TableCell>
                <TableCell align="left">
                  Service
                </TableCell>
                <TableCell align="left" width={100}>
                  Status
                </TableCell>
                <TableCell align="center" width={100}>
                  {/* Action */}
                </TableCell>
              </TableRow>
            </TableHead>
            {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>
            )}
          </Table>
        </TableContainer>

        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />

      {/* {isDialog === 'edit' && (
        <DialogLog
          data={edit}
          openDialog={openDialog}
          setOpenDialog={setOpenDialog}
          title={{ name: 'Reason For Update' }}
        />
      )} */}



      <DialogUpdateStatus 
        openDialog={isDialogOpen}
        setOpenDialog={setDialogOpen} 
        title={titles}
        data={dataValue}
        description={dataDescription}
        content={getContent()}
        // maxWidth='50px'
      />
    </Stack>
  );
}
