import { useMemo } from 'react';

import { formatDistanceStrict } from 'date-fns';
import { IconClock } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';
import { appearFromBottom } from '@material-hu/utils/animations';

import Pills from '@material-hu/components/design-system/Pills';
import ProgressBar from '@material-hu/components/design-system/ProgressIndicators/ProgressBar';
import TableCell from '@material-hu/components/design-system/Table/components/TableCell';
import TableRow from '@material-hu/components/design-system/Table/components/TableRow';

import { useAuth } from 'src/contexts/JWTContext';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getCurrentLocale } from 'src/utils/locale';

import { type JourneySummary } from '../../../types';
import { getMyTeamJourneyPillStatus } from '../../../utils';

import { CustomCellBorder } from './CustomCellBorder';
import { RowActions } from './RowActions';

type JourneyTeamRowProps = {
  journey: JourneySummary;
  index: number;
};

export const JourneyTeamRow = ({ journey, index }: JourneyTeamRowProps) => {
  const { t } = useLokaliseTranslation('employee_lifecycle');
  const { user } = useAuth();

  const elapsedTime = useMemo(
    () =>
      formatDistanceStrict(
        new Date(journey.availableFromDate),
        new Date(journey.completedAt || new Date()),
        { locale: getCurrentLocale(user) },
      ),
    [journey.availableFromDate, journey.completedAt, user],
  );

  return (
    <TableRow
      key={journey.id}
      sx={{
        animation: `${appearFromBottom} 125ms ${index * 0.025}s ease-in-out backwards`,
        willChange: 'transform',
        overflow: 'hidden',
        '& > td': {
          width: 'min-content',
          maxWidth: '100%',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        },
      }}
    >
      <TableCell
        sx={{
          position: 'sticky',
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.tertiary,
          left: 0,
        }}
      >
        <Stack>
          <Typography variant="globalXS">
            {journey.assignee.firstName} {journey.assignee.lastName}
          </Typography>
          <CustomCellBorder sx={{ right: 0 }} />
        </Stack>
      </TableCell>
      <TableCell>{journey.processName}</TableCell>
      <TableCell>
        <Pills
          label={t(`journeys.progress_status.${journey.progressStatus}`)}
          size="small"
          type={getMyTeamJourneyPillStatus(journey.progressStatus)}
          hasIcon={false}
        />
      </TableCell>
      <TableCell sx={{ minWidth: 180 }}>
        <Stack sx={{ flexDirection: 'row', alignItems: 'center' }}>
          <ProgressBar
            variant="determinate"
            current={journey.tasksCompleted}
            total={journey.tasksTotal}
            sx={{ width: '100%', mr: 1 }}
          />
          <Typography variant="globalXXS">{journey.tasksCompleted}</Typography>
          <Typography variant="globalXXS">/</Typography>
          <Typography variant="globalXXS">{journey.tasksTotal}</Typography>
        </Stack>
      </TableCell>
      <TableCell>
        <Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'center' }}>
          <IconClock size={16} />
          <Typography variant="globalXXS">{elapsedTime}</Typography>
        </Stack>
      </TableCell>
      <TableCell sx={{ minWidth: 180 }}>
        {journey.actionsCurrentTitle || '-'}
      </TableCell>
      <RowActions />
    </TableRow>
  );
};