Untitled

import { Typography, Stack, Card, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
import debounce from 'lodash.debounce';
import SearchBox from 'ui-component/SearchBox/searchBox';
import { createStyles } from '@mui/material/styles';
import useEdcList from './useEdcList';
import React, { useState, useRef, useCallback } from 'react';
import { TagRequestContext } from '../../../context/tagRequestContext.js';
import { useContext } from 'react';
import PerfectScrollbar from 'react-perfect-scrollbar';
import StatusStyles from 'views/utilities/status-styles/statusStyles';
import AssetStatus from 'views/utilities/status-styles/assetStatus';
import CloseDialogBtn from 'ui-component/closeDialogBtn/CloseDialogBtn';
import MediumButton from 'ui-component/Button/mediumButton';
import TextSwitch from '../../textSwitch/TextSwitch';
export const styles = createStyles({
  th: {
    fontSize: '14px',
    fontWeight: '700',
    color: '#000',
    position: 'sticky',
    '@media screen and (max-width:1024px)': {
      fontSize: '12px'
    }
  },
  tBody: {
    fontSize: '12px',
    fontWeight: '400'
  },
  card: {
    height: 'fit-content',
    maxHeight: '100%',
    width: '50%',
    position: 'relative',
    padding: '20px',
    backgroundColor: '#F9FAFC',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'start',
    '@media screen and (max-width:1024px)': {
      width: '80%'
    },
    '@media screen and (max-width:700px)': {
      width: '100%'
    }
  },
  contentWrapper: {
    height: '90%',
    width: '100%'
  },
  dialogTitle: {
    fontSize: '20px',
    fontWeight: '700',
    color: '#000000',
    whiteSpace: 'nowrap',
    '@media screen and (max-width:1024px)': {
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    }
  }
});

const EdcList = () => {
  const { setSelectedIds, selectedIds, setSelectedSN, selectedSN, asset_request_id, onClose, setContent } = useContext(TagRequestContext);
  const [pageNumber, setPageNumber] = useState(1);
  const [selectAll, setSelectAll] = useState(false);
  const [searchValue, setSearchValue] = useState('');
  const { loading, data, setData, totalPages, hasMore, maxLimit } = useEdcList(asset_request_id, pageNumber, searchValue);
  const [contentSwitch, setContentSwitch] = useState('box');


  const onSearchChange = debounce((event) => {
    const newValue = event.target.value;
    setSearchValue(newValue);
    setPageNumber(1);
    setData([]);
  }, 500);

  const observer = useRef();
  const lastItemElementRef = useCallback(
    (node) => {
      if (loading) return;
      if (observer.current) observer.current.disconnect();
      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore && pageNumber < totalPages) {
          // Periksa pageNumber < totalPages
          setPageNumber((prevPageNumber) => prevPageNumber + 1);
        }
      });
      if (node) observer.current.observe(node);
    },
    [loading, hasMore, pageNumber, totalPages]
  );

  const toggleSelectAll = () => {
    setSelectAll(!selectAll);
    if (!selectAll) {
      const allIds = data.map((item) => ({ id: item.id }));
      const allSN = data.map((item) => item.serial_number);

      const newIds = allIds.filter((item) => !selectedIds.some((selectedId) => selectedId.id === item.id));
      const newSN = allSN.filter((sn) => !selectedSN.includes(sn));

      const limitedIds = newIds.slice(0, maxLimit - selectedIds.length);
      const limitedSN = newSN.slice(0, maxLimit - selectedIds.length);

      setSelectedIds([...selectedIds, ...limitedIds]);
      setSelectedSN([...selectedSN, ...limitedSN]);
    } else {
      setSelectedIds([]);
      setSelectedSN([]);
    }
  };

  const handleRowCheckboxChange = (id, serial_number) => {
    if (selectedIds.some((ids) => ids.id === id)) {
      const updatedIds = selectedIds.filter((ids) => ids.id !== id);
      setSelectedIds(updatedIds);
      const updatedSN = selectedSN.filter((sn) => sn !== serial_number);
      setSelectedSN(updatedSN);
    } else {
      const updatedIds = [...selectedIds, { id }];
      setSelectedIds(updatedIds);
      const updatedSN = [...selectedSN, serial_number];
      setSelectedSN(updatedSN);
    }
  };

  const handleClose = () => {
    onClose();
  };

  return (
    <>
      <Card sx={styles.card}>
        <Stack direction="row" spacing={1.5} alignItems="center" justifyContent="space-between">
          <Stack direction="row" alignItems="center" spacing={2}>
            <Typography sx={{ ...styles.dialogTitle }}> Select EDC from :</Typography>
            <TextSwitch contentSwitch={contentSwitch} setContentSwitch={setContentSwitch} />
          </Stack>
          <CloseDialogBtn onClose={handleClose} />
        </Stack>

        <Stack
          direction="column"
          justifyContent="space-between"
          height="95%"
          sx={{
            '@media screen and (max-width:1200px)': {
              height: '95%'
            }
          }}
        >
          <Stack sx={styles.contentWrapper}>
            {/* Search */}
            <Stack direction="column" width="100%" height="100%" alignItems="start" justifyContent="center" spacing={0.5}>
              <SearchBox fullWidth="true" onChange={onSearchChange} />
              <PerfectScrollbar style={{ height: '100%', overflowX: 'hidden', width: '100%' }}>
                <Table stickyHeader sx={{ backgroundColor: '#fff' }}>
                  <TableHead>
                    <TableRow>
                      <TableCell sx={{ backgroundColor: '#fff', borderTopLeftRadius: '12px' }}>
                        <Stack direction="row" spacing={1}>
                          <input type="checkbox" checked={selectAll} onChange={toggleSelectAll} />
                          <Typography sx={styles.th}>No</Typography>
                        </Stack>
                      </TableCell>
                      <TableCell sx={{ backgroundColor: '#fff', borderTopLeftRadius: '12px' }}>
                        <Typography sx={styles.th}>Box Number</Typography>
                      </TableCell>
                      <TableCell sx={{ backgroundColor: '#fff', borderTopLeftRadius: '12px' }}>
                        <Typography sx={styles.th}>EDC Quantity</Typography>
                      </TableCell>
                      <TableCell sx={{ backgroundColor: '#fff' }}>
                        <Typography sx={styles.th}>Status</Typography>
                      </TableCell>
                    </TableRow>
                  </TableHead>

                  <TableBody>
                    {data?.map((item, index) => {
                      const isSelected = selectedIds.some((ids) => ids.id === item.id);
                      if (data.length === index + 1) {
                        return (
                          <React.Fragment key={index}>
                            <TableRow
                              ref={lastItemElementRef}
                              sx={{
                                root: {
                                  height: 10
                                },
                                backgroundColor: isSelected ? '#F2EDFF' : '#fff'
                              }}
                            >
                              <TableCell>
                                <div style={{ display: 'flex' }}>
                                  <input
                                    type="checkbox"
                                    checked={selectedIds.some((ids) => ids.id === item.id)}
                                    onChange={() => handleRowCheckboxChange(item?.id, item?.serial_number)}
                                    disabled={selectedIds.length >= maxLimit && !selectedIds.some((ids) => ids.id === item.id)}
                                  />
                                  <Typography sx={{ ...styles.tBody, fontWeight: isSelected ? '700' : '400' }}>{index + 1}</Typography>
                                </div>
                              </TableCell>
                              <TableCell>
                                <Typography sx={{ ...styles.tBody, fontWeight: isSelected ? '700' : '400' }}>{item?.cycle}</Typography>
                              </TableCell>
                              <TableCell>
                                <Typography sx={{ ...styles.tBody, fontWeight: isSelected ? '700' : '400' }}>
                                  {item?.serial_number}
                                </Typography>
                              </TableCell>
                              <TableCell>
                                <Typography sx={{ ...StatusStyles.statusChip, width: 'fit-content', ...AssetStatus(item?.status) }}>
                                  {item?.status}
                                </Typography>
                              </TableCell>
                            </TableRow>
                            {loading && (
                              <TableRow sx={{ width: '100%' }}>
                                <Typography
                                  sx={{
                                    textAlign: 'center',
                                    fontWeight: '700',
                                    backgroundColor: '#764AF1',
                                    color: '#fff',
                                    padding: '4px',
                                    width: '100%'
                                  }}
                                >
                                  Loading...
                                </Typography>
                              </TableRow>
                            )}
                          </React.Fragment>
                        );
                      } else {
                        return (
                          <TableRow
                            key={index}
                            sx={{
                              root: {
                                height: 10
                              },
                              backgroundColor: isSelected ? '#F2EDFF' : '#fff'
                            }}
                          >
                            <TableCell>
                              <Stack direction="row" spacing={0.5}>
                                <input
                                  type="checkbox"
                                  checked={selectedIds.some((ids) => ids.id === item.id)}
                                  onChange={() => handleRowCheckboxChange(item.id, item?.serial_number)}
                                  disabled={selectedIds.length >= maxLimit && !selectedIds.some((ids) => ids.id === item.id)}
                                />
                                <Typography sx={{ ...styles.tBody, fontWeight: isSelected ? '700' : '400' }}>{index + 1}</Typography>
                              </Stack>
                            </TableCell>
                            <TableCell>
                              <Typography sx={{ ...styles.tBody, fontWeight: isSelected ? '700' : '400' }}>
                                {item?.serial_number}
                              </Typography>
                            </TableCell>
                            <TableCell>
                              <Typography sx={{ ...StatusStyles.statusChip, width: 'fit-content', ...AssetStatus(item?.status) }}>
                                {item?.status}
                              </Typography>
                            </TableCell>
                          </TableRow>
                        );
                      }
                    })}
                  </TableBody>
                </Table>
              </PerfectScrollbar>
            </Stack>
          </Stack>

          <Stack direction="row" spacing={1.5}>
            <MediumButton
              width="30%"
              onClick={() => {
                handleClose();
              }}
              variant="outlined"
            >
              cancel
            </MediumButton>
            <MediumButton
              onClick={() => {
                setContent(1);
              }}
              variant="contained"
              disabled={selectedIds.length === 0}
            >
              Next
            </MediumButton>
          </Stack>
        </Stack>
      </Card>
    </>
  );
};

export default EdcList;