import { useCallback } from 'react';
import { useFormContext } from 'react-hook-form';
import { useNavigate } from 'react-router';

import { IconChevronRight } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { type Theme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import HuList from '@material-hu/components/design-system/List';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import HuListItemSkeleton from '@material-hu/components/design-system/List/components/ListItemSkeleton';
import HuPills from '@material-hu/components/design-system/Pills';
import HuProgressBar from '@material-hu/components/design-system/ProgressIndicators/ProgressBar';

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

import GoalsEmptyState from '../../components/GoalsEmptyState';
import {
  TEAM_TABLE_CARD_CONTAINER_SX,
  TEAM_TABLE_LIST_ITEM_SKELETON_SX,
  TEAM_TABLE_LIST_SX,
} from '../../constants';
import { goalsRoutes } from '../../routes';
import { type GoalTeamUser } from '../../types';

type Props = {
  goals: GoalTeamUser[];
  loading: boolean;
};

const TeamTable = ({ goals, loading }: Props) => {
  const { t } = useLokaliseTranslation('goals');
  const navigate = useNavigate();
  const { watch } = useFormContext();
  const { goalCycleId } = watch();
  const hasNoGoals = !goals.length;
  const shouldShowEmptyState = hasNoGoals && !loading;

  const handleNavigate = useCallback(
    (goal: GoalTeamUser) => {
      navigate(goalsRoutes.individual(goal.userId), {
        state: { goalCycleId, goalUser: goal },
      });
    },
    [navigate, goalCycleId],
  );

  return (
    <>
      <Stack>
        <Typography
          variant="globalM"
          fontWeight="fontWeightSemiBold"
        >
          {t('my_team.title_list')}
        </Typography>
      </Stack>

      {loading && (
        <HuList sx={TEAM_TABLE_LIST_SX}>
          <CardContainer
            fullWidth
            padding={0}
            variant="outlined"
            sx={TEAM_TABLE_CARD_CONTAINER_SX}
          >
            <HuListItemSkeleton sx={TEAM_TABLE_LIST_ITEM_SKELETON_SX} />
          </CardContainer>
          <CardContainer
            fullWidth
            padding={0}
            variant="outlined"
            sx={TEAM_TABLE_CARD_CONTAINER_SX}
          >
            <HuListItemSkeleton sx={TEAM_TABLE_LIST_ITEM_SKELETON_SX} />
          </CardContainer>
          <CardContainer
            fullWidth
            padding={0}
            variant="outlined"
            sx={TEAM_TABLE_CARD_CONTAINER_SX}
          >
            <HuListItemSkeleton sx={TEAM_TABLE_LIST_ITEM_SKELETON_SX} />
          </CardContainer>
        </HuList>
      )}

      {!loading && (
        <>
          <HuList sx={TEAM_TABLE_LIST_SX}>
            {!!goals.length &&
              goals.map(goal => (
                <CardContainer
                  key={goal.userId}
                  fullWidth
                  padding={0}
                  variant="outlined"
                  sx={TEAM_TABLE_CARD_CONTAINER_SX}
                >
                  <HuListItem
                    onClick={() => handleNavigate(goal)}
                    text={{
                      title: getFullName(goal.ownerUser),
                    }}
                    avatar={{
                      src: goal.ownerUser.profilePicture || undefined,
                    }}
                    sideContent={
                      <>
                        <HuPills
                          size="small"
                          label={t(
                            goal.goalCount === 1
                              ? 'my_team.count_goals_one'
                              : 'my_team.count_goals_other',
                            { count: goal.goalCount },
                          )}
                          type="highlight"
                          hasIcon={false}
                        />
                        <HuProgressBar
                          current={goal.avgProgress}
                          total={100}
                          description={t('my_team.progress')}
                          hasPercentage
                          variant="determinate"
                          sx={{ width: 453, mx: 2 }}
                        />
                      </>
                    }
                    action={{
                      Icon: IconChevronRight,
                      onClick: () => handleNavigate(goal),
                    }}
                    sx={{
                      '& .MuiListItemButton-root': {
                        borderRadius: 2,
                      },
                      '& .MuiIconButton-root': {
                        color: (theme: Theme) =>
                          theme.palette.new?.text.neutral.default,
                      },
                    }}
                  />
                </CardContainer>
              ))}
          </HuList>
          {shouldShowEmptyState && (
            <GoalsEmptyState
              title={t('my_team.no_collaborators_search')}
              description={t('my_team.no_collaborators')}
            />
          )}
        </>
      )}
    </>
  );
};

export default TeamTable;