import { FC } from 'react';

import Checkbox from '@material-hu/mui/Checkbox';
import MenuItem from '@material-hu/mui/MenuItem';
import Select from '@material-hu/mui/Select';
import Table from '@material-hu/mui/Table';
import TableBody from '@material-hu/mui/TableBody';
import TableCell from '@material-hu/mui/TableCell';
import TableHead from '@material-hu/mui/TableHead';
import TableRow from '@material-hu/mui/TableRow';

import { Relative } from 'src/types/nemakEvents';

import { useTranslation } from './i18n';

export type RuleTableProps = {
  dropdownValues: any;
  realtivesInfo: Relative[];
  hasTshirt: boolean;
  onAddRelativeSize: (event: any, relative: Relative) => void;
  onCheckboxChange: (relative: Relative, isChecked: boolean) => void;
  isSelected: (relative: Relative) => boolean;
};

export const RuleTable: FC<RuleTableProps> = props => {
  const {
    dropdownValues,
    realtivesInfo,
    hasTshirt,
    onAddRelativeSize,
    onCheckboxChange,
    isSelected,
  } = props;

  const { t } = useTranslation();

  return (
    <Table sx={{ mt: 1.4 }}>
      <TableHead>
        <TableRow>
          <TableCell>{t('NAME_FIELD')}</TableCell>
          <TableCell>{t('AGE')}</TableCell>
          {hasTshirt && <TableCell>{t('SIZE')}</TableCell>}
          <TableCell>{t('GOING')}</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {realtivesInfo.map((relative, index) => (
          <TableRow key={index}>
            <TableCell
              component="th"
              scope="row"
            >
              {relative.FirstName} {relative.LastName}
            </TableCell>
            <TableCell>{relative.Age}</TableCell>
            {hasTshirt && dropdownValues && (
              <TableCell
                sx={{
                  '& .MuiInputBase-root': {
                    width: '80px',
                    height: '40px',
                    borderRadius: '6px',
                  },
                }}
              >
                <Select
                  onChange={event => onAddRelativeSize(event, relative)}
                  disabled={!isSelected(relative)}
                >
                  {dropdownValues?.GuestsTshirtSizes?.map(option => (
                    <MenuItem
                      key={option.FieldsCatalogueId}
                      value={option.FieldsCatalogueId}
                    >
                      {option.FieldOption}
                    </MenuItem>
                  ))}
                </Select>
              </TableCell>
            )}
            <TableCell align="center">
              <Checkbox
                onChange={event =>
                  onCheckboxChange(relative, event.target.checked)
                }
              />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

export default RuleTable;