import { FC } from 'react';

import Box from '@material-hu/mui/Box';
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 { User } from 'src/types/nemakEvents';

import AddEmployeeTable from './AddEmployeeTable';
import DeleteEmployeeTable from './DeleteEmployeeTable';
import { useTranslation } from './i18n';

export type TeamTableProps = {
  dropdownValues: any;
  hasTshirt: boolean;
  handleFetchUser: (id: number | string) => void;
  selectedUsers: User[];
  onAddTeamSize: (event: any, index: number) => void;
  onDeleteUser: (id: number) => void;
};

export const TeamTable: FC<TeamTableProps> = props => {
  const {
    dropdownValues,
    hasTshirt,
    handleFetchUser,
    selectedUsers,
    onAddTeamSize,
    onDeleteUser,
  } = props;

  const { t } = useTranslation();

  const handleAddEmployee = (employeeId: string) => handleFetchUser(employeeId);

  return (
    <Box sx={{ mt: 2 }}>
      <AddEmployeeTable
        onSubmit={handleAddEmployee}
        label={t('ADD_EMPLOYEE')}
        placeholder={t('ENTER_EMPLOYEE_ID')}
      />
      {selectedUsers.length > 0 && (
        <Table sx={{ mb: 2 }}>
          <TableHead>
            <TableRow>
              <TableCell>ID</TableCell>
              <TableCell>{t('NAME_FIELD')}</TableCell>
              <TableCell>{t('AGE')}</TableCell>
              {hasTshirt && <TableCell>{t('SIZE')}</TableCell>}
              <TableCell />
            </TableRow>
          </TableHead>
          <TableBody>
            {selectedUsers.map((user, index) => (
              <TableRow key={user.EmployeeNumber}>
                <TableCell>{user.EmployeeNumber}</TableCell>
                <TableCell>{user.EmployeeName}</TableCell>
                <TableCell>{user.Age}</TableCell>
                {hasTshirt && dropdownValues && (
                  <TableCell
                    sx={{
                      '& .MuiInputBase-root': {
                        width: '80px',
                        height: '40px',
                        borderRadius: '6px',
                      },
                    }}
                  >
                    <Select onChange={event => onAddTeamSize(event, index)}>
                      {dropdownValues?.TeamTshirtSize.map(option => (
                        <MenuItem
                          key={option.FieldsCatalogueId}
                          value={option.FieldsCatalogueId}
                        >
                          {option.FieldOption}
                        </MenuItem>
                      ))}
                    </Select>
                  </TableCell>
                )}
                <DeleteEmployeeTable
                  title={t('DELETE_EMPLOYEE')}
                  onDelete={() => onDeleteUser(user.EmployeeNumber)}
                />
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </Box>
  );
};

export default TeamTable;