import { memo } from 'react';
import { useQuery } from 'react-query';

import { IconPercentage, IconUsers } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';

import { goalsKeys } from 'src/pages/dashboard/goals/queries';
import { useLokaliseTranslation } from 'src/utils/i18n';

import SkeletonSummaryCards from '../../components/SkeletonCardsSummary';
import { getGoalCycleStats } from '../../services';

type MyTeamGoalsSummaryProps = {
  goalCycleId: number;
  loading: boolean;
};

const MyTeamGoalsSummary = ({
  goalCycleId,
  loading,
}: MyTeamGoalsSummaryProps) => {
  const { t } = useLokaliseTranslation('goals');

  const { data: statsData, isLoading: isStatsLoading } = useQuery(
    goalsKeys.allStats(goalCycleId),
    () => getGoalCycleStats(goalCycleId),
    {
      enabled: !!goalCycleId,
      select: response => response.data,
    },
  );

  if (loading || isStatsLoading || !statsData) {
    return (
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 2,
        }}
      >
        <SkeletonSummaryCards />
        <SkeletonSummaryCards />
      </Stack>
    );
  }

  const {
    subordinatesAssignmentPercentage,
    subordinatesCount,
    subordinatesWithGoals,
  } = statsData;

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 2,
      }}
    >
      <HuCardContainer fullWidth>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'start',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <HuAvatar
            Icon={IconUsers}
            color="primary"
            size="large"
          />
          <HuTitle
            copetin={t('my_team.collaborators_with_goals')}
            title={`${subordinatesWithGoals}/${subordinatesCount}`}
            variant="L"
          />
        </Stack>
      </HuCardContainer>
      <HuCardContainer fullWidth>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'start',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <HuAvatar
            Icon={IconPercentage}
            color="warning"
            size="large"
          />
          <HuTitle
            copetin={t('my_team.allocation_percentage')}
            title={subordinatesAssignmentPercentage.toString()}
            variant="L"
          />
        </Stack>
      </HuCardContainer>
    </Stack>
  );
};

export default memo(MyTeamGoalsSummary);
