import { IconCaretDown, IconCaretUp } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTitle from '@material-hu/components/design-system/Title';

import { type MainStat, PercentageStatus } from 'src/types/insights';

import { statusPercentageToColor } from '../../utils';

type MainStatsProps = {
  stats: MainStat[];
  isLoading: boolean;
};

const MainStats = ({ stats, isLoading }: MainStatsProps) => {
  const huTheme = useTheme();

  return (
    <Stack
      sx={{ flexDirection: 'row', gap: 2, justifyContent: 'space-between' }}
    >
      {stats.map((stat, index) => (
        <HuSkeleton
          key={stat.id}
          isLoading={isLoading}
          variant="rounded"
        >
          <Stack sx={{ justifyContent: 'space-between' }}>
            <HuTitle
              sx={{ pb: 1 }}
              variant="L"
              copetin={stat.copetin}
              copetinTooltip={stat.copetinTooltip}
              title={`${stat.data}`}
              description={stat.description}
              descriptionTooltip={stat.descriptionTooltip}
            />
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'start',
                minHeight: '24px',
              }}
            >
              {stat?.comparison?.status === PercentageStatus.POSITIVE && (
                <IconCaretUp
                  style={{ position: 'relative', top: '-3px' }}
                  color={huTheme.palette.graphics?.successText}
                />
              )}
              {stat?.comparison?.status === PercentageStatus.NEGATIVE && (
                <IconCaretDown
                  style={{ position: 'relative', top: '-5px' }}
                  color={huTheme.palette.graphics?.errorText}
                />
              )}
              <Typography
                variant="globalXXS"
                sx={{
                  fontWeight: 'semiBold',
                  color: theme => {
                    const key = statusPercentageToColor[
                      stat?.comparison
                        ?.status as keyof typeof statusPercentageToColor
                    ] as keyof NonNullable<typeof theme.palette.graphics>;
                    return theme.palette.graphics?.[key];
                  },
                }}
              >
                {stat?.comparison?.percentage}%{' '}
                <Typography
                  variant="globalXXS"
                  sx={{
                    color: theme =>
                      theme.palette.textColors?.neutralTextLighter,
                  }}
                >
                  {stat?.comparison?.text}
                </Typography>
              </Typography>
            </Stack>
          </Stack>
          {index < stats.length - 1 && (
            <Divider
              orientation="vertical"
              variant="middle"
              flexItem
            />
          )}
        </HuSkeleton>
      ))}
    </Stack>
  );
};

export default MainStats;