import { memo } from 'react';

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

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuPills from '@material-hu/components/design-system/Pills';

import { type LeaderCollaboratorRowProps } from 'src/pages/dashboard/performance/types';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getInitials } from 'src/utils/userUtils';

import {
  formatRowScore,
  formatTeamScoreDiff,
  getRowActionLabelKey,
  getRowStatusLabelKey,
  getRowStatusPillType,
  getTeamScoreDiffColor,
} from '../../../utils';

const LeaderCollaboratorRow = ({
  user,
  onSelect,
}: LeaderCollaboratorRowProps) => {
  const { t } = useLokaliseTranslation('performance');

  const {
    firstName,
    lastName,
    profilePicture,
    score,
    teamScoreDiff,
    status,
    filledReviews,
    totalReviews,
  } = user;

  const fullName = `${firstName} ${lastName}`;

  const handleSelectCollaborator = () => {
    onSelect(user);
  };

  const diffColor = getTeamScoreDiffColor(teamScoreDiff);

  return (
    <Stack
      onClick={handleSelectCollaborator}
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 2,
        py: 2,
        px: 3,
        cursor: 'pointer',
        '&:hover': { bgcolor: 'action.hover' },
      }}
    >
      <HuAvatar
        src={profilePicture ?? undefined}
        text={getInitials(fullName)}
        size="medium"
      />

      <Stack sx={{ flex: 1, minWidth: 0 }}>
        <Typography
          variant="body2"
          fontWeight={600}
          noWrap
        >
          {fullName}
        </Typography>
      </Stack>

      <HuPills
        label={t(getRowStatusLabelKey(status))}
        type={getRowStatusPillType(status)}
        size="small"
        hasIcon={false}
        sx={{
          flexShrink: 0,
          width: 110,
          textTransform: 'none',
          '& .MuiChip-label': {
            width: '100%',
            textAlign: 'center',
            px: 0,
          },
        }}
      />

      <Typography
        variant="body2"
        sx={{
          flexShrink: 0,
          width: 40,
          textAlign: 'left',
          ml: -1,
        }}
      >
        {filledReviews}/{totalReviews}
      </Typography>

      <Stack sx={{ flexShrink: 0, width: 80, alignItems: 'flex-end' }}>
        <Typography
          variant="caption"
          sx={{ color: 'text.secondary' }}
        >
          {t('score')}
        </Typography>
        <Typography
          variant="body1"
          fontWeight={600}
        >
          {formatRowScore(score)}
        </Typography>
      </Stack>

      <HuDivider
        orientation="vertical"
        flexItem
      />

      <Stack sx={{ flexShrink: 0, width: 140, alignItems: 'flex-end' }}>
        <Typography
          variant="caption"
          sx={{ color: 'text.secondary' }}
        >
          {t('manage_team.row.score_diff')}
        </Typography>
        <Typography
          variant="body1"
          fontWeight={600}
          sx={{ color: diffColor }}
        >
          {formatTeamScoreDiff(teamScoreDiff)}
        </Typography>
      </Stack>

      <Stack
        sx={{
          flexShrink: 0,
          width: 200,
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'flex-end',
          gap: 0.5,
          color: 'primary.main',
        }}
      >
        <Typography
          variant="body2"
          fontWeight={500}
          sx={{ color: 'inherit' }}
        >
          {t(getRowActionLabelKey(user))}
        </Typography>
        <IconChevronRight
          size={16}
          stroke={2}
        />
      </Stack>
    </Stack>
  );
};

export default memo(LeaderCollaboratorRow);
