import { useTheme } from '@mui/material';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { IconArrowDown, IconArrowUp } from '@tabler/icons-react';

import ScoreDifferencePopover from '../ScoreDifferencePopover';

import { type ScoreDifferenceIndicatorProps } from './types';

const ScoreDifferenceIndicator = ({
  difference,
  popoverMeta,
  slotProps = {},
}: ScoreDifferenceIndicatorProps) => {
  const theme = useTheme();

  return (
    <ScoreDifferencePopover
      {...popoverMeta}
      {...slotProps.popover}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          fontWeight: 'fontWeightSemiBold',
          width: 'fit-content',
        }}
      >
        {difference === 0 && (
          <Typography
            variant="globalXS"
            sx={{
              color: theme.palette.new.graphics.success[600],
              fontWeight: 'inherit',
            }}
          >
            0
          </Typography>
        )}
        {difference > 0 && (
          <>
            <IconArrowUp
              size={16}
              color={theme.palette.new.graphics.success[600]}
            />
            <Typography
              variant="globalXS"
              sx={{
                color: theme.palette.new.graphics.success[600],
                fontWeight: 'inherit',
              }}
            >
              {difference}
            </Typography>
          </>
        )}
        {difference < 0 && (
          <>
            <IconArrowDown
              size={16}
              color={theme.palette.new.graphics.error[600]}
            />
            <Typography
              variant="globalXS"
              sx={{
                color: theme.palette.new.graphics.error[600],
                fontWeight: 'inherit',
              }}
            >
              {Math.abs(difference)}
            </Typography>
          </>
        )}
      </Stack>
    </ScoreDifferencePopover>
  );
};

export default ScoreDifferenceIndicator;
