import { MouseEvent } from 'react';
import { useNavigate } from 'react-router-dom';

import { IconInfoCircle } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuPills from '@material-hu/components/design-system/Pills';
import HuProgressBar from '@material-hu/components/design-system/ProgressIndicators/ProgressBar';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';
import HuTitle from '@material-hu/components/design-system/Title';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { appearFromTop } from 'src/constants/animation';
import useFormatDate from 'src/hooks/useFormatDate';
import { pathsRoutes } from 'src/pages/dashboard/Learning/Paths/routes';
import { type Path } from 'src/pages/dashboard/Learning/Paths/types';
import {
  getTableTooltipTitle,
  pathStatusToPillType,
} from 'src/pages/dashboard/Learning/Paths/utils';
import { CopyTypePath } from 'src/types/deeplinks';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CopyLink, {
  copyLinkContainerStyle,
} from 'src/components/CopyLink/CopyLink';

import TableActions from './TableActions';

type TableContentProps = {
  paths: Path[];
};

const TableContent = ({ paths }: TableContentProps) => {
  const { formatDate } = useFormatDate();
  const { t } = useLokaliseTranslation('learning');
  const navigate = useNavigate();

  return (
    <>
      {paths.map((path, i) => (
        <HuTableRow
          key={path.id}
          onClick={() => navigate(pathsRoutes.edit(path.id))}
          sx={{
            animation: `${appearFromTop} 0.4s ease-in-out backwards`,
            animationDelay: `${25 * i}ms`,
            ...copyLinkContainerStyle,
          }}
        >
          <HuTableCell colSpan={3}>
            <Stack
              sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}
            >
              <HuTitle
                withEllipsis
                overflow="tooltip"
                title={path.title}
                fontWeight="fontWeightRegular"
                slotProps={{ title: { sx: { fontSize: '14px' } } }}
              />
              <CopyLink
                type={CopyTypePath.PATH}
                id={path.id}
                IconButtonProps={{ sx: { padding: 0.5 } }}
              />
            </Stack>
          </HuTableCell>
          <HuTableCell colSpan={2}>
            {path.courses?.length > 0 && (
              <Stack
                sx={{ flexDirection: 'row', gap: 0.5, alignItems: 'center' }}
              >
                <Typography variant="globalS">
                  {t('course.count', { count: path.courses?.length || 0 })}
                </Typography>
                <HuTooltip
                  title={getTableTooltipTitle(path.courses, t)}
                  direction="bottom"
                >
                  <IconInfoCircle size={16} />
                </HuTooltip>
              </Stack>
            )}
            {path.courses?.length === 0 && (
              <Typography
                sx={{ textAlign: 'center', ml: 4.5 }}
                variant="globalS"
              >
                -
              </Typography>
            )}
          </HuTableCell>
          <HuTableCell colSpan={2}>
            {formatDate(path.updatedAt, 'dd/MMM/yyyy').toUpperCase()}
          </HuTableCell>
          <HuTableCell colSpan={2}>
            <HuProgressBar
              current={Math.round(path.participation || 0)}
              hasPercentage
              variant="determinate"
            />
          </HuTableCell>
          <HuTableCell colSpan={2}>
            <HuPills
              label={t(`path.status.${path.status.toLowerCase()}`)}
              size="small"
              type={pathStatusToPillType[path.status]}
              hasIcon={false}
            />
          </HuTableCell>
          <TableActions
            pathId={path.id}
            pathStatus={path.status}
            pathTitle={path.title}
          />
        </HuTableRow>
      ))}
    </>
  );
};

export default TableContent;
