import React from 'react';
import PropTypes from 'prop-types';
import { Delete } from '@mui/icons-material';

import {
  IconButton,
  Stack,
  Table,
  TableCell,
  TableContainer,
  TableRow,
  TableScroll,
  Typography,
} from '@/mui/components';

function ItemList(props) {
  if (!props.items.length) {
    return null;
  }

  return (
    <TableContainer>
      <TableScroll>
        <Table size="small">
          {props.items.map((item, index) => (
            <TableRow
              key={`${+index}-${item.label}`}
              direction="row"
              alignItems="center"
              justifyContent="space-between"
            >
              <TableCell>
                <Stack direction="row" alignItems="center" fullWidth justify="space-between">
                  <Stack fullWidth>
                    <Typography
                      component="div"
                      variant="body2"
                      color={props.disabled ? 'text.disabled' : 'text.primary'}
                      fontWeight={400}
                    >
                      {item.label}
                    </Typography>
                  </Stack>
                  {!(props.disabled || item?.isDisabled) && (
                    <div>
                      <IconButton size="small" disabled={props.disabled} onClick={() => props.onDelete(index)}>
                        <Delete />
                      </IconButton>
                    </div>
                  )}
                </Stack>
              </TableCell>
            </TableRow>
          ))}
        </Table>
      </TableScroll>
    </TableContainer>
  );
}

ItemList.propTypes = {
  items: PropTypes.arrayOf({}).isRequired,
  disabled: PropTypes.bool.isRequired,
  onDelete: PropTypes.func.isRequired,
};

export default ItemList;
