import { type FC, useMemo } from 'react';

import { type Icon, IconUsersGroup } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuMenuList from '@material-hu/components/composed-components/MenuList';
import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuPills from '@material-hu/components/design-system/Pills';
import HuTitle from '@material-hu/components/design-system/Title';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

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

import {
  type AgentGroup,
  AgentGroupAssignmentType,
  AgentGroupStatus,
} from '../../types';

const ASSIGNMENT_TYPE_LABEL_KEY: Record<AgentGroupAssignmentType, string> = {
  [AgentGroupAssignmentType.MANUAL]: 'manual_assignment',
  [AgentGroupAssignmentType.ROUND_ROBIN]: 'round_robin_assignment',
  [AgentGroupAssignmentType.WORKLOAD]: 'workload_assignment',
};

type Props = {
  agentGroup: AgentGroup;
  menuOptions: {
    Icon: Icon;
    title: string;
    onClick: () => void;
  }[];
};

const AgentGroupListItem: FC<Props> = ({ agentGroup, menuOptions }) => {
  const { t } = useLokaliseTranslation('service_management');

  const statusColor =
    agentGroup.status === AgentGroupStatus.ACTIVE ? 'success' : 'neutral';

  const membersTooltip = useMemo(() => {
    if (agentGroup.agents.length === 0) {
      return '';
    }
    return agentGroup.agents.map(agent => getFullname(agent)).join(', ');
  }, [agentGroup.agents]);

  const description = useMemo(() => {
    const membersCount = t('members_count', {
      count: agentGroup.agents.length,
    });
    if (!agentGroup.assignmentType) return membersCount;
    return `${membersCount} • ${t(ASSIGNMENT_TYPE_LABEL_KEY[agentGroup.assignmentType])}`;
  }, [agentGroup.agents.length, agentGroup.assignmentType, t]);

  return (
    <HuCardContainer
      fullWidth
      color="grey"
    >
      <Stack
        sx={{
          flexDirection: 'row',
          width: '100%',
          alignItems: 'center',
          mr: 2,
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            gap: 1,
            width: 'inherit',
            alignItems: 'inherit',
          }}
        >
          <HuAvatar
            Icon={IconUsersGroup}
            color="primary"
          />
          <Stack>
            <HuTooltip
              description={membersTooltip}
              direction="bottom"
              delay={400}
            >
              <span>
                <HuTitle
                  title={agentGroup.name}
                  description={description}
                  variant="S"
                />
              </span>
            </HuTooltip>
          </Stack>
        </Stack>
        <Stack sx={{ gap: 1, flexDirection: 'row', alignItems: 'center' }}>
          <HuPills
            type={statusColor}
            hasIcon={false}
            label={
              agentGroup.status === AgentGroupStatus.ACTIVE
                ? t('active')
                : t('inactive')
            }
          />
          <HuMenuList
            options={menuOptions}
            position="right"
          />
        </Stack>
      </Stack>
    </HuCardContainer>
  );
};

export default AgentGroupListItem;