import { useEffect, useState } from 'react';

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

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 HuProgressBar from '@material-hu/components/design-system/ProgressIndicators/ProgressBar';

import { useAuth } from 'src/contexts/JWTContext';
import useCustomServerTranslation from 'src/hooks/useCustomServerTranslation';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName } from 'src/utils/userUtils';

import SkeletonSummaryCards from '../../components/SkeletonCardsSummary';
import { MODULE_NAME } from '../../constants';

type MyGoalsSummaryProps = {
  loading: boolean;
  weightedProgress: number;
  goalsCount: number;
  isSearching?: boolean;
};

const MyGoalsSummary = ({
  loading = false,
  weightedProgress,
  goalsCount,
  isSearching = false,
}: MyGoalsSummaryProps) => {
  const { t } = useLokaliseTranslation('goals');
  const { user } = useAuth();
  const goalsTitle = useCustomServerTranslation({
    module: MODULE_NAME,
    defaultTranslationKey: 'general:goals',
  });

  const [lastStableProgress, setLastStableProgress] =
    useState(weightedProgress);

  useEffect(() => {
    if (!isSearching) {
      setLastStableProgress(weightedProgress);
    }
  }, [isSearching, weightedProgress]);

  const displayProgress = isSearching ? lastStableProgress : weightedProgress;

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

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 2,
      }}
    >
      <HuCardContainer fullWidth>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'start',
              alignItems: 'center',
              gap: 1,
            }}
          >
            <HuAvatar
              {...(user?.profilePicture && { src: user.profilePicture })}
              color="primary"
              size="large"
            />
            <Stack>
              {user && (
                <Typography
                  variant="globalS"
                  fontWeight="fontWeightSemiBold"
                >
                  {getFullName(user)}
                </Typography>
              )}
              {user?.jobPosition?.name && (
                <Typography
                  variant="globalXS"
                  sx={{
                    color: theme => theme.palette.new?.text.neutral.lighter,
                  }}
                >
                  {user.jobPosition.name}
                </Typography>
              )}
            </Stack>
          </Stack>
          {!!goalsCount && (
            <HuPills
              hasIcon={false}
              label={`${goalsCount} ${goalsTitle.toLowerCase()}`}
              type="highlight"
              size="small"
            />
          )}
        </Stack>
      </HuCardContainer>
      <HuCardContainer fullWidth>
        <Stack
          sx={{
            justifyContent: 'start',
            alignItems: 'stretch',
            width: '100%',
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <Stack
              sx={{
                flexDirection: 'row',
                justifyContent: 'start',
                alignItems: 'center',
                gap: 1,
              }}
            >
              <HuAvatar
                Icon={IconTrendingUp}
                color="primary"
                size="medium"
              />
              <Typography
                variant="globalS"
                fontWeight="fontWeightSemiBold"
              >
                {t('my_goals.my_overall_progress')}
              </Typography>
            </Stack>
            <Typography
              variant="globalL"
              fontWeight="fontWeightSemiBold"
            >
              {`${displayProgress}%`}
            </Typography>
          </Stack>
          <HuProgressBar
            current={displayProgress}
            progressHeight={6}
            variant="determinate"
          />
        </Stack>
      </HuCardContainer>
    </Stack>
  );
};

export default MyGoalsSummary;
