import React, { useMemo } from 'react';
import type { BadgeProps } from '../../atoms';
import { Badge, Box, Card, Flex, Heading, Typo } from '../../atoms';

export interface SessionReviewSimpleReadProps {
  helpfulness?: boolean;
  review?: string;
}

function SubTitleWrapper({
  children,
  title,
}: {
  children: React.ReactNode;
  title: string;
}): JSX.Element {
  return (
    <Flex direction="column" gap="2">
      <Heading mb="2" variant="heading5" weight="regular">
        {title}
      </Heading>

      <Box>{children}</Box>
    </Flex>
  );
}

export function SessionReviewSimpleRead({
  helpfulness,
  review,
}: SessionReviewSimpleReadProps): React.ReactElement {
  const helpfulnessMeta = useMemo<{
    text: string;
    color: BadgeProps['color'];
  }>(() => {
    if (helpfulness) {
      return {
        text: '네',
        color: 'success',
      };
    }
    if (typeof helpfulness === 'undefined') {
      return {
        text: '-',
        color: 'neutral',
      };
    }
    return {
      text: '아니요',
      color: 'error',
    };
  }, [helpfulness]);

  return (
    <Box>
      <Flex direction="column" gap="5">
        <SubTitleWrapper title="이번 코칭이 목표 달성에 도움이 되었나요?">
          <Badge color={helpfulnessMeta.color}>{helpfulnessMeta.text}</Badge>
        </SubTitleWrapper>
        <SubTitleWrapper title="세션 후기">
          <Card>
            {review ? (
              <Typo as="p">{review}</Typo>
            ) : (
              <Typo color="gray">입력된 후기가 없습니다.</Typo>
            )}
          </Card>
        </SubTitleWrapper>
      </Flex>
    </Box>
  );
}
