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

import SatisfactionChart from '../SatifactionChart';
import ScoreDifferenceIndicator from '../ScoreDifferenceIndicator';

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

const SatisfactionStatsHeader = ({
  title,
  score,
  scoreDisplayFallback = '--',
  chartMeta,
  slotProps = {},
  scoreLabel = 'Score',
  differenceIndicatorMeta,
}: StatHeaderProps) => {
  const hasChart = [
    chartMeta.promoters,
    chartMeta.detractors,
    chartMeta.neutrals,
  ].some(value => value > 0);

  const {
    scoreDifference,
    baseScore,
    baseScoreLabel,
    footerLabel,
    getScoreDifferenceDescription,
  } = differenceIndicatorMeta;

  return (
    <CardContainer
      padding={24}
      fullWidth
    >
      <Stack
        {...slotProps.root}
        sx={{ gap: 2, ...slotProps.root?.sx }}
      >
        <Title
          title={title}
          variant="L"
          sx={{ justifyContent: 'center' }}
        />
        <Stack sx={{ flexDirection: 'row', gap: 2 }}>
          <Title
            title={score === null ? scoreDisplayFallback : score}
            copetin={scoreLabel}
            variant="XL"
            description={
              score !== null &&
              scoreDifference !== null &&
              baseScore !== null ? (
                <ScoreDifferenceIndicator
                  difference={scoreDifference}
                  popoverMeta={{
                    score,
                    baseScore,
                    scoreLabel: differenceIndicatorMeta.scoreLabel,
                    baseScoreLabel,
                    footerLabel,
                    scoreDifferenceDescription:
                      getScoreDifferenceDescription(scoreDifference),
                  }}
                  slotProps={{
                    popover: {
                      anchorOrigin: {
                        vertical: 24,
                        horizontal: 'left',
                      },
                      transformOrigin: {
                        vertical: 'top',
                        horizontal: 'left',
                      },
                    },
                  }}
                />
              ) : null
            }
            sx={{ flexShrink: 0, justifyContent: 'center' }}
            centered
          />
          <Divider orientation="vertical" />
          <Stack sx={{ justifyContent: 'center', gap: 1, width: '100%' }}>
            <Title title={chartMeta.title} />
            {hasChart && (
              <SatisfactionChart
                promoters={chartMeta.promoters}
                detractors={chartMeta.detractors}
                neutrals={chartMeta.neutrals}
                getTooltipTitle={chartMeta.getTooltipTitle}
                size="large"
              />
            )}
            <Typography
              variant="globalXXS"
              sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
            >
              {chartMeta.description}
            </Typography>
          </Stack>
        </Stack>
      </Stack>
    </CardContainer>
  );
};

export default SatisfactionStatsHeader;
