import { Fragment } from 'react';

import CardContainer from '@design-system/CardContainer';
import Title from '@design-system/Title';
import { Divider, Stack } from '@mui/material';
import { compact } from 'lodash';

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

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

const SatisfactionDrawerStats = ({
  scoreLabel = 'Score',
  answersLabel = 'Answers',
  commentsLabel = 'Comments',
  formatLabel = 'Format',
  scoreInfo,
  score,
  answers,
  comments,
  format,
  scoreDifferenceIndicator,
  hideScore,
}: SatisfactionDrawerStatsProps) => {
  const items = compact([
    !hideScore && {
      id: 'score',
      label: scoreLabel,
      value: formatAmount(score),
      info: scoreInfo,
      description: scoreDifferenceIndicator,
    },
    { id: 'answers', label: answersLabel, value: formatAmount(answers) },
    { id: 'comments', label: commentsLabel, value: formatAmount(comments) },
    { id: 'format', label: formatLabel, value: format },
  ]);

  return (
    <CardContainer
      color="grey"
      fullWidth
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {items.map((item, index) => (
          <Fragment key={item.id}>
            <Title
              id={item.id}
              copetin={item.label}
              title={item.value}
              copetinTooltip={item.info}
              variant="XL"
              description={item.description}
              sx={{ flex: '1 1 0', flexShrink: item.id === 'format' ? 0 : 1 }}
              overflow="tooltip"
              slotProps={{
                title: {
                  sx: {
                    textAlign: 'start',
                  },
                },
              }}
              withEllipsis
              centered
            />
            {index < items.length - 1 && (
              <Divider
                orientation="vertical"
                sx={{ mx: 2 }}
                flexItem
              />
            )}
          </Fragment>
        ))}
      </Stack>
    </CardContainer>
  );
};

export default SatisfactionDrawerStats;
