import { type MouseEvent } from 'react';

import Button from '@material-hu/components/design-system/Buttons/Button';
import Pills from '@material-hu/components/design-system/Pills';
import TableCell from '@material-hu/components/design-system/Table/components/TableCell';
import TableRow from '@material-hu/components/design-system/Table/components/TableRow';
import Title from '@material-hu/components/design-system/Title';

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

import { type LearningCertificateListItem } from '../../../types';
import { getCertificateStatusInfo } from '../../../utils';

import { TableRowActions } from './TableRowActions';
import { type CertificateDialogActions } from './index';

type CertificatesTableRowProps = {
  certificate: LearningCertificateListItem;
  onPreview: (args: { certificate: LearningCertificateListItem }) => void;
  onEdit: (certificateId: number) => void;
  dialogActions: CertificateDialogActions;
};

export const CertificatesTableRow = ({
  certificate,
  onPreview,
  onEdit,
  dialogActions,
}: CertificatesTableRowProps) => {
  const { t } = useLokaliseTranslation('learning');

  const { type: statusType, labelKey: statusLabelKey } =
    getCertificateStatusInfo(certificate.status);

  const handlePreview = (e: MouseEvent) => {
    e.stopPropagation();
    onPreview({ certificate });
  };

  return (
    <TableRow
      hover
      onClick={() => onEdit(certificate.id)}
      sx={{ '& td': { py: 1 } }}
    >
      <TableCell>
        <Title
          withEllipsis
          overflow="tooltip"
          title={certificate.name}
          fontWeight="fontWeightRegular"
          slotProps={{ title: { sx: { fontSize: '14px' } } }}
        />
      </TableCell>
      <TableCell>{certificate.coursesCount}</TableCell>
      <TableCell>{certificate.learningPathsCount}</TableCell>
      <TableCell>{certificate.learningSessionsCount}</TableCell>
      <TableCell>
        <Pills
          label={t(statusLabelKey)}
          type={statusType}
          hasIcon={false}
          size="small"
        />
      </TableCell>
      <TableCell align="center">
        <Button
          variant="text"
          size="small"
          onClick={handlePreview}
        >
          {t('common.view_certificate')}
        </Button>
      </TableCell>
      <TableRowActions
        certificate={certificate}
        dialogActions={dialogActions}
      />
    </TableRow>
  );
};
