import { cloneElement, type MouseEvent, useId, useState } from 'react';

import Title from '@design-system/Title';
import Divider from '@mui/material/Divider';
import Popover from '@mui/material/Popover';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

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

const ScoreDifferencePopover = ({
  children,
  score,
  baseScore,
  scorePostFix = '',
  scoreLabel = 'Score',
  baseScoreLabel = 'Base score',
  footerLabel: footerText = 'Comparing results',
  scoreDifferenceDescription = 'The difference is equivalent to the total survey.',
  ...props
}: ScoreDifferencePopoverProps) => {
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
  const id = useId();

  const handleMouseEnter = (event: MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMouseLeave = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);

  return (
    <>
      {cloneElement(children, {
        onMouseEnter: handleMouseEnter,
        onMouseLeave: handleMouseLeave,
        'aria-describedby': id,
      })}
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleMouseLeave}
        disableRestoreFocus
        sx={{
          pointerEvents: 'none',
        }}
        anchorOrigin={props.anchorOrigin}
        transformOrigin={props.transformOrigin}
        slotProps={{
          paper: {
            onMouseEnter: () => setAnchorEl(anchorEl),
            onMouseLeave: handleMouseLeave,
            elevation: 2,
            sx: {
              pointerEvents: 'auto',
              borderRadius: theme => theme.shape.borderRadiusL,
            },
          },
        }}
        {...props}
      >
        <Stack
          sx={{
            width: 240,
            borderRadius: theme => theme.shape.borderRadiusL,
          }}
        >
          <Stack sx={{ gap: 1, p: 2 }}>
            <Stack sx={{ gap: 1 }}>
              <Stack
                sx={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}
              >
                <Title
                  title={scoreLabel}
                  variant="S"
                />
                <Typography>
                  {score}
                  {scorePostFix}
                </Typography>
              </Stack>
              <Stack
                sx={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}
              >
                <Title
                  title={baseScoreLabel}
                  variant="S"
                />
                <Typography>
                  {baseScore}
                  {scorePostFix}
                </Typography>
              </Stack>
            </Stack>
            <Divider />
            <Typography>{scoreDifferenceDescription}</Typography>
          </Stack>
          <Stack
            sx={{
              backgroundColor: theme =>
                theme.palette.new.background.feedback.highlight,
              border: theme =>
                `1px solid ${theme.palette.new.border.states.highlight}`,
              borderBottomLeftRadius: theme =>
                theme.spacing(theme.shape.borderRadiusL),
              borderBottomRightRadius: theme =>
                theme.spacing(theme.shape.borderRadiusL),
              p: 1,
              textAlign: 'center',
            }}
          >
            <Typography
              variant="globalXXS"
              sx={{ color: theme => theme.palette.new.text.feedback.highlight }}
            >
              {footerText}
            </Typography>
          </Stack>
        </Stack>
      </Popover>
    </>
  );
};

export default ScoreDifferencePopover;
