Untitled

import React from 'react';
import PropTypes from 'prop-types';
import { Box, Button, Dialog, DialogContent, Typography, Stack, useMediaQuery } from '@mui/material';
import { createStyles } from '@mui/material/styles';
import CloseIcon from '@mui/icons-material/Close';
import Table from 'ui-component/Table-Sticky/index';
import TransferDetailData from './transferDetailData';
import NotFound from 'assets/images/data_not_found_img.svg';

const styles = createStyles({
  dialogContent: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    gap: '12px'
  },
  box: {
    height: 'fit-content',
    backgroundColor: '#fff',
    borderRadius: '12px',
    minWidth: '50vw',
    padding: '16px 20px',
    position: 'relative'
  },
  content: {
    marginTop: '12px'
  },
  tableWrapper: {
    // height: '50vh',
    backgroundColor: 'white',
    paddingY: '10px',
    borderTopLeftRadius: '12px',
    borderTopRightRadius: '12px'
    // overflow: 'auto'
  },
  textTitle: {
    fontSize: '11px'
  },
  textValue: {
    fontSize: '11px',
    fontWeight: '700'
  },
  boxValue: {
    padding: '6px'
  },
  cancelBtn: {
    backgroundColor: '#808080',
    border: 'none',
    borderRadius: '4px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '18px',
    cursor: 'pointer',
    height: '18px',
    padding: '2px'
  },
  editBtn: {
    width: '150px',
    backgroundColor: '#F82C17',
    color: '#fff',
    fontSize: '12px',
    fontWeight: '700',
    borderRadius: '8px',
    paddingY: '4px'
  },
  deleteBtn: {
    width: '150px',
    color: '#F82C17',
    border: '1px solid #F82C17',
    backgroundColor: '#fff',
    fontSize: '12px',
    fontWeight: '700',
    borderRadius: '8px',
    paddingY: '4px'
  }
});
export default function DetailDialog({ id, tag }) {
  const [open, setOpen] = React.useState(false);
  const { columns, rows, setPageNumber, pageNumber, totalPages, hasMore, loading, firstLoad, skeleton } = TransferDetailData(id, open);

  const isTablet = useMediaQuery('@media screen and (max-width:1024px)');

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = async () => {
    setOpen(false);
  };

  return (
    <>
      <Button
        size="small"
        onClick={handleClickOpen}
        sx={{
          fontWeight: '600',
          color: '#0B9EED',
          fontSize: isTablet ? '14px' : '11px',
          width: 'max-content',
          textDecoration: 'underline',
          textTransform: 'lowercase',
          '&:hover': {
            background: 'transparent',
            textDecoration: 'underline'
          }
        }}
        disabled={tag === 'Vendor' || tag === 'Request Paper'}
      >
        view detail
      </Button>
      <Dialog
        PaperProps={{
          style: {
            backgroundColor: 'transparent',
            boxShadow: 'none'
          }
        }}
        style={styles.dialog}
        fullScreen
        open={open}
        onClose={handleClose}
      >
        <DialogContent sx={styles.dialogContent}>
          <Box sx={styles.box}>
            <div style={{ display: 'flex', justifyContent: 'end' }}>
              <button onClick={handleClose} style={styles.cancelBtn}>
                <CloseIcon sx={{ color: 'white', height: '14px' }} />
              </button>
            </div>
            <Typography sx={{ fontSize: '20px', fontWeight: '700', marginBottom: '8px' }}>Package Detail</Typography>
            {firstLoad ? (
              <Box sx={styles.tableWrapper}>
                <Table columns={columns} data={skeleton} />
              </Box>
            ) : rows && Array.isArray(rows) && rows.length > 0 ? (
              <Box sx={styles.tableWrapper}>
                <Table
                  columns={columns}
                  data={rows}
                  setPageNumber={setPageNumber}
                  pageNumber={pageNumber}
                  totalPages={totalPages}
                  hasMore={hasMore}
                  scrollLoading={loading}
                  scrollPagination
                  customHeight="50vh"
                />
              </Box>
            ) : (
              <Stack justifyContent="center" alignItems="center" sx={{ height: '85%' }}>
                <img src={NotFound} alt="No Data" style={{ width: '40%' }} />
              </Stack>
            )}
          </Box>
        </DialogContent>
      </Dialog>
    </>
  );
}
DetailDialog.propTypes = {
  id: PropTypes.number,
  tag: PropTypes.any
};