import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';

import RichText from '../../../../components/RichText';
import { getSummaryPreviewText } from '../utils';

type SummaryReadOnlyProps = {
  summaryHtml: string;
  plainTextSummary: string;
  shouldShowMoreButton: boolean;
  showMore: boolean;
  onToggleShowMore: () => void;
  showEditButton: boolean;
  onEdit: () => void;
  seeToggleLabel: string;
  editLabel: string;
};

const SummaryReadOnly = ({
  summaryHtml,
  plainTextSummary,
  shouldShowMoreButton,
  showMore,
  onToggleShowMore,
  showEditButton,
  onEdit,
  seeToggleLabel,
  editLabel,
}: SummaryReadOnlyProps) => (
  <Stack
    sx={{
      gap: 1,
    }}
  >
    <RichText
      text={
        shouldShowMoreButton && !showMore
          ? `<p>${getSummaryPreviewText({ text: plainTextSummary, showMore })}...</p>`
          : summaryHtml
      }
      sx={{ mb: 0 }}
    />
    {shouldShowMoreButton && (
      <Stack sx={{ alignItems: 'flex-end' }}>
        <Button
          variant="text"
          onClick={onToggleShowMore}
          sx={{ minWidth: 40, maxWidth: 100, height: 10 }}
        >
          {seeToggleLabel}
        </Button>
      </Stack>
    )}
    {showEditButton && (
      <Stack sx={{ alignItems: 'flex-end' }}>
        <Button
          onClick={onEdit}
          variant="primary"
          sx={{ mt: 1 }}
        >
          {editLabel}
        </Button>
      </Stack>
    )}
  </Stack>
);

export default SummaryReadOnly;
