import React from 'react';
import { Box } from '@/atoms/box';
import { Card } from '@/atoms/card';
import { Grid } from '@/atoms/grid';
import { TextArea } from '@/atoms/text-area';
import { Typo } from '@/atoms/typo';
import { BellIcon } from '@/icon';
import { type CurriculumReviewQuestionText } from '@/types/curriculumContents.type';
import { Callout } from '@/atoms/call-out';
import { ReviewQuestionContentHeader } from './review-comp';

interface ReviewQuestionTextProps {
  question: CurriculumReviewQuestionText;
  answer: string;
  error?: string;
  onChange: (value: string) => void;
}

function ReviewQuestionText(props: ReviewQuestionTextProps): React.ReactNode {
  const { question, answer, onChange } = props;

  const minLengthNotMet =
    question.minLength && answer.length < question.minLength;

  const remainingLength =
    question.minLength && answer.length < question.minLength
      ? question.minLength - answer.length
      : 0;

  return (
    <Card
      size="2"
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <Grid height="100%" rows="1fr auto">
        <Grid height="100%" rows="auto 1fr" width="100%">
          <ReviewQuestionContentHeader
            icon={question.icon}
            question={question.question}
            title={question.title}
            type={question.type}
          />

          <TextArea
            mt="2"
            onChange={(e) => {
              onChange(e.target.value);
            }}
            placeholder={question.placeholder}
            value={answer}
          />
        </Grid>
        {minLengthNotMet ? (
          <Box mt="2">
            <Typo align="right" as="p" color="red" variant="caption">
              {`${remainingLength}자 더 작성해주세요.`}
            </Typo>
            {question.minLengthInfoMessage ? (
              <Callout.Root
                color="iris"
                mt="2"
                style={{ alignItems: 'center' }}
              >
                <Callout.Icon>
                  <BellIcon />
                </Callout.Icon>
                <Callout.Text>
                  <Typo as="p" variant="caption">
                    {question.minLengthInfoMessage}
                  </Typo>
                </Callout.Text>
              </Callout.Root>
            ) : null}
          </Box>
        ) : null}
      </Grid>
    </Card>
  );
}

export default ReviewQuestionText;
