import { type FC } from 'react';

import { times } from 'lodash-es';
import Paper from '@material-hu/mui/Paper';

import HuCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTable from '@material-hu/components/design-system/Table';
import HuTableBody from '@material-hu/components/design-system/Table/components/TableBody';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableContainer from '@material-hu/components/design-system/Table/components/TableContainer';
import HuTableHead from '@material-hu/components/design-system/Table/components/TableHead';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

import { useLokaliseTranslation } from 'src/utils/i18n';

const CellSkeleton = ({
  width = 80,
  height = 32,
}: {
  width?: number;
  height?: number;
}) => {
  return (
    <HuTableCell sx={{ width }}>
      <HuSkeleton
        width={width}
        height={height}
      />
    </HuTableCell>
  );
};

type Props = {
  showGroupColumn?: boolean;
};

const TaskTableSkeleton: FC<Props> = ({ showGroupColumn = true }) => {
  const { t } = useLokaliseTranslation('service_management');
  return (
    <HuTableContainer
      component={Paper}
      sx={{ overflow: 'hidden' }}
    >
      <HuTable sx={{ overflow: 'hidden' }}>
        <HuTableHead>
          <HuTableRow headerRow>
            <HuTableCell
              headerCell
              selectionCell
              sx={{ width: 48 }}
            >
              <HuCheckbox checked={false} />
            </HuTableCell>
            <HuTableCell headerCell>{t('number')}</HuTableCell>
            <HuTableCell headerCell>{t('service')}</HuTableCell>
            <HuTableCell headerCell>{t('agent')}</HuTableCell>
            {showGroupColumn && (
              <HuTableCell headerCell>{t('group')}</HuTableCell>
            )}
            <HuTableCell headerCell>{t('state')}</HuTableCell>
            <HuTableCell headerCell>{t('requester')}</HuTableCell>
            <HuTableCell
              headerCell
              sx={{ minWidth: '182px' }}
            >
              {t('creation_date')}
            </HuTableCell>
            <HuTableCell headerCell>{t('updated')}</HuTableCell>
          </HuTableRow>
        </HuTableHead>
        <HuTableBody>
          {times(5, index => (
            <HuTableRow key={index}>
              <HuTableCell selectionCell>
                <HuCheckbox checked={false} />
              </HuTableCell>
              <CellSkeleton />
              <CellSkeleton />
              <CellSkeleton />
              {showGroupColumn && <CellSkeleton />}
              <CellSkeleton />
              <CellSkeleton />
              <CellSkeleton width={120} />
              <CellSkeleton />
            </HuTableRow>
          ))}
        </HuTableBody>
      </HuTable>
    </HuTableContainer>
  );
};

export default TaskTableSkeleton;