import React from 'react'; 
import type { BadgeProps } from '@/atoms/badge';
import { Badge } from '@/atoms/badge';
import { Box } from '@/atoms/box';
import { Button } from '@/atoms/button';
import { Flex } from '@/atoms/flex';
import { Grid } from '@/atoms/grid';
import { Heading } from '@/atoms/heading';
import { Separator } from '@/atoms/separator';
import { Typo } from '@/atoms/typo';
import {
  getCurriculumIcon,
  getCurriculumQuestionIconColor,
  getCurriculumQuestionTypeDescription,
} from '@/utils/curriculum.utils';
import type { ReviewQuestionElement } from '@/types/curriculum.type';
import { useCurriculumReviewContext } from './curriculum-review-context';

interface StartReviewProps {
  onStart: () => void;
}


const renderPreviewContent = (args: {
  question: ReviewQuestionElement;
}):React.ReactElement => {
  const { question } = args;
  const Icon = getCurriculumIcon({
    type: question.type,
    icon: question.icon,
  });
  const getDescription = (): string => {
    return [
      getCurriculumQuestionTypeDescription(question.type),
      question.duration ? `${question.duration}분` : '',
    ]
      .filter(Boolean)
      .join(' | ');
  };

  return (
    <Grid
      columns="16px 1fr"
      gap="2"
      key={question.uuid}
      px="4"
      py="2"
      width="100%"
    >
      <Box mt="1">
        <Icon color={getCurriculumQuestionIconColor(question.type)} />
      </Box>
      <Box>
        <Typo as="p" color="gray" weight="bold">
          {question.title}
        </Typo>
        <Typo color="gray">{getDescription()}</Typo>
      </Box>
    </Grid>
  );
};


const getReviewContentValue = (question: ReviewQuestionElement, answer: string): string => {
  if(question.type === 'question_satisfaction_option'){ 
    return question.options?.find((option)=>option.value === Number(answer))?.label ?? '';
  }
  return answer
}


const renderReviewContent = (args: {
  question: ReviewQuestionElement;
  answer: string;
}):React.ReactElement => {
  const { question, answer } = args;
  const Icon = getCurriculumIcon({
    type: question.type,
    icon: question.icon,
  }); 

  const color = getCurriculumQuestionIconColor(question.type);
  const badgeColor: BadgeProps['color'] = ['question_radio','question_satisfaction_option'].includes(question.type) ? 'accent' : 'neutral';
  const value = getReviewContentValue(question, answer);

  return (
    <Grid
    columns="16px 1fr"
    gap="2"
    key={question.uuid}
    px="4"
    py="2"
    width="100%"
  >
    <Box>
      <Icon color={color} />
    </Box>

    <Box>
      <Typo as="p" color="gray" mb="2" weight="bold">{question.title}</Typo>
      <Badge color={badgeColor} size="large" style={{whiteSpace: 'break-spaces', lineBreak: 'anywhere'}}>
        {value || '(미 응답)'}
      </Badge>
    </Box>
   
  </Grid>
  );
};

function StartReview({ onStart }: StartReviewProps): React.ReactNode {
  const { curriculum, reviewContents, sectionTitle, done,formik } =
    useCurriculumReviewContext();

  return (
    <Flex
      align="center"
      direction="column"
      height="100%"
      justify="center"
      width="100%"
    >
      <Flex
        align="center"
        direction="column"
        height="100%"
        justify="center"
        maxWidth="650px"
        pb={{initial: '6', sm: '0'}}
        pt={{initial: '4', sm: '0'}}
        px={{initial: '4', sm: '0'}}
        width="100%"
      >
        <Typo color="gray" mb="1">{curriculum.title}</Typo>
        <Heading variant="heading3">{reviewContents.title}</Heading>
        <Separator my="4" style={{ width: 100 }} />

        <Typo align="left" as="p" color="gray" mb="4">
          <Typo as="span" weight="bold">
            {sectionTitle}
          </Typo>
          {' '}
          <Typo>{reviewContents.description}</Typo>
        </Typo>

        <Box mb="5" overflowY="auto" width="100%">
          {reviewContents.questions.map((question)=>{
            if(done){
              return renderReviewContent({ question, answer: formik.values.answers[question.uuid]});
            }
            return renderPreviewContent({ question });
          })}
        </Box>
        <Button color="yellow" onClick={onStart} variant={done ?  'outline' : 'solid'}>
          {done ? '나의 응답 수정하기' : reviewContents.buttonTitle}
        </Button>
      </Flex>
    </Flex>
  );
}

export default StartReview;
