import { GetDrawerConfiguration } from '@material-hu/hooks/useDrawerV2';
import Paper from '@material-hu/mui/Paper';

import HuAlert from '@material-hu/components/design-system/Alert';
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 useJob from 'src/hooks/queryHooks/useJob';
import type { AnyBulkUploadType } from 'src/types/bulk';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { JobSkeletonTable } from '../components/JobSkeletonTable';

type Props = {
  id?: number;
  type?: AnyBulkUploadType;
};

export const useDrawerJobContent: GetDrawerConfiguration<Props> = args => {
  const { id, type } = args;
  const { t } = useLokaliseTranslation('backoffice_only');
  const { data: job, isLoading } = useJob(id!, {
    type,
    enabled: !!id,
  });

  const columns = [
    {
      label: t('backoffice_only:bulk_upload.description'),
      key: 'description',
    },
    {
      label: t('backoffice_only:bulk_upload.row'),
      key: 'row',
    },
    {
      label: t('backoffice_only:bulk_upload.column'),
      key: 'column',
    },
  ];

  return {
    size: 'large',
    title: job?.fileName,
    footer: (
      <HuAlert
        title={t('backoffice_only:bulk_upload.errors_subtitle_partial')}
        severity="warning"
      />
    ),
    children: (
      <HuTableContainer component={Paper}>
        <HuTable>
          <HuTableHead>
            <HuTableRow headerRow>
              {columns.map(column => (
                <HuTableCell key={column.key}>{column.label}</HuTableCell>
              ))}
            </HuTableRow>
          </HuTableHead>
          <HuTableBody>
            {isLoading && <JobSkeletonTable />}
            {job?.errors.map(error => (
              <HuTableRow key={error.id}>
                <HuTableCell align="left">
                  {t('backoffice_only:bulk_upload.job_error', {
                    context: error.code,
                  })}
                </HuTableCell>
                <HuTableCell align="left">
                  {error.description.rowNumber}
                </HuTableCell>
                <HuTableCell align="left">
                  {error.description.columnNumber}
                </HuTableCell>
              </HuTableRow>
            ))}
          </HuTableBody>
        </HuTable>
      </HuTableContainer>
    ),
  };
};