import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import {
  FilterMotionDuration,
  FilterMotionStyle,
  FilterMotionVariants
} from '@/entities/common/model/constant';
import moment from 'moment';

export interface ReferenceRequestSuccessProps {
  pageOn: boolean;
  setPageOn: (pageOn: boolean) => void;
  email: string;
  startDate: string;
};

export const ReferenceRequestSuccess = ({
  pageOn,
  setPageOn,
  email,
  startDate
}: ReferenceRequestSuccessProps) => {
  const { t } = useTranslation();
  const onClickToClose = () => {
    setPageOn(false);
  };
  return (
    <>
      <motion.div 
        className="full-menu-modal"
        initial="hidden"
        animate={(pageOn) ? 'visible' : 'hidden'}
        variants={ FilterMotionVariants }
        transition={ FilterMotionDuration }
        style={ FilterMotionStyle }
      >
        <div className="full-menu-container">
          <div
            className="success-body"
            style={{ margin: '0 auto' }}
          >
            <div className="success-icon" aria-hidden="true"></div>
            <h1 className="success-title">
              <span>{t('vatReturn.vatReferenceData')}</span>
              <br/>
              <span>{t('vatReturn.requestCompleted')}</span>
            </h1>
            <p className="success-subtitle">{t('vatReturn.fileProvidedBySelectedMethod')}</p>
            <div className="success-result">
              <p className="result-text">
                <span>{t('vatReturn.applicationDate')} :</span> <span>{ moment(startDate).format('YYYY.MM.DD') }</span>
                <br/>
                <span>{t('vatReturn.emailAddress')} :</span> <span>{ email }</span>
              </p>
            </div>
            <p className="success-note dot">{t('vatReturn.referenceDataNote')}</p>
          </div>
          <div className="apply-row">
            <button
              className="btn-50 btn-blue flex-1"
              onClick={ onClickToClose }
            >{t('common.confirm')}</button>
          </div>
        </div>
      </motion.div>
    </>
  );
};