import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { FaqItem } from '../../model/types';
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';

export interface FaqDetaillProps {
  detailOn: boolean;
  setDetailOn: (detailOn: boolean) => void;
  faqItem: FaqItem
};
export const FaqDetail = ({
  detailOn,
  setDetailOn,
  faqItem
}: FaqDetaillProps) => {
  const { t } = useTranslation();

  const [cursorId, setCursorId] = useState<number>();
  const [seq, setSeq] = useState<string>();
  const [category, setCategory] = useState<string>();
  const [title, setTitle] = useState<string>();
  const [contents, setContents] = useState<string>();

  const onClickToClose = () => {
    setDetailOn(false);
  };

  useEffect(() => {
    setCursorId(faqItem?.cursorId);
    setSeq(faqItem?.seq);
    setCategory(faqItem?.category);
    setTitle(faqItem?.title);
    setContents(faqItem?.contents);
  }, [faqItem]);

  return (
    <>
      <motion.div 
        className="full-menu-modal" 
        initial="hidden"
        animate={ (detailOn)? 'visible': 'hidden' }
        variants={ DetailMotionVariants }
        transition={ DetailMotionDuration }
        style={ DetailMotionStyle }
      >
        { contents &&
          <div className="full-menu-container pdw-16">
            <div className="full-menu-header">
              <div className="full-menu-title center">{ t('support.qna.title') }</div>
              <div className="full-menu-actions">
                <FullMenuClose
                  addClass="full-menu-close"
                  onClickToCallback={ onClickToClose }
                ></FullMenuClose>
              </div>
            </div>
            <div className="faq-detail">
              <div className="faq-detail__title">{ title }</div>
              <div className="faq-detail__divider"></div>
              <div className="faq-detail__body" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
            </div>
          </div>
        }
      </motion.div>
    </>
  );
};