import { capitalize } from 'lodash-es';
import { IconChevronRight } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuPills from '@material-hu/components/design-system/Pills';
import { type PillsProps } from '@material-hu/components/design-system/Pills/types';

import { ReviewCycleStatus } from 'src/pages/dashboard/performance/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  ACTION_COL_WIDTH,
  STATUS_COL_WIDTH,
} from '../../components/rowConstants';
import { type PerformanceCycleActions, PILL_TYPE } from '../../constants';
import { type PerformanceCycleRow } from '../hooks/usePerformanceCyclesList';

type PerformanceCycleRowProps = {
  row: PerformanceCycleRow;
  action: {
    onClick: () => void;
    context: PerformanceCycleActions;
  };
};

const getReviewCycleStatusPillType = (
  status: ReviewCycleStatus,
): PillsProps['type'] => {
  switch (status) {
    case ReviewCycleStatus.IN_PROGRESS:
      return PILL_TYPE.INFO;
    case ReviewCycleStatus.SELECTION:
      return PILL_TYPE.HIGHLIGHT;
    case ReviewCycleStatus.FINISHED:
      return PILL_TYPE.SUCCESS;
    case ReviewCycleStatus.PENDING:
      return PILL_TYPE.WARNING;
    default:
      return PILL_TYPE.NEUTRAL;
  }
};

const PerformanceCycleRow = ({ row, action }: PerformanceCycleRowProps) => {
  const { t } = useLokaliseTranslation(['performance', 'apps']);

  return (
    <HuCardContainer
      fullWidth
      padding={16}
      noHover
      sx={{ mb: 2 }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: 1,
          rowGap: 1.5,
          width: '100%',
          minWidth: 0,
        }}
      >
        <Stack
          sx={{
            flex: '1 1 200px',
            minWidth: 0,
          }}
        >
          <Typography
            variant="body1"
            fontWeight="fontWeightSemiBold"
            color="text.primary"
            sx={{
              wordBreak: 'break-word',
            }}
          >
            {row.name}
          </Typography>
        </Stack>
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'flex-end',
            width: STATUS_COL_WIDTH,
            flexShrink: 0,
          }}
        >
          <HuPills
            label={capitalize(t(`status.${row.status}`))}
            size="small"
            type={getReviewCycleStatusPillType(row.status)}
            hasIcon
            sx={{ flexShrink: 0 }}
          />
        </Stack>
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'flex-end',
            width: ACTION_COL_WIDTH,
            flexShrink: 0,
          }}
        >
          <Button
            variant="text"
            color="primary"
            size="small"
            endIcon={
              <IconChevronRight
                size={16}
                aria-hidden
              />
            }
            onClick={action.onClick}
            sx={{
              flexShrink: 0,
              minWidth: 'fit-content',
              fontWeight: 'fontWeightSemiBold',
            }}
          >
            {t(`cycles.item_button.${action.context}`)}
          </Button>
        </Stack>
      </Stack>
    </HuCardContainer>
  );
};

export default PerformanceCycleRow;
