import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
import { DebtPreventionCancelDisplayInfo } from '../model/types';
import { useState } from 'react';
import moment from 'moment';
import { NumericFormat } from 'react-number-format';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { useNavigate } from '@/shared/lib/hooks';
import { PATHS } from '@/shared/constants/paths';
import { useTranslation } from 'react-i18next';
export interface AllTransactionCancelPreventBondProps {
  cancelPreventBondOn: boolean;
  setCancelPreventBondOn: (cancelPreventBondOn: boolean) => void;
  debtPreventionCancelDisplayInfo?: DebtPreventionCancelDisplayInfo | null;
  serviceCode: string;
  tid: string;
};

export const AllTransactionCancelPreventBond = ({
  cancelPreventBondOn,
  setCancelPreventBondOn,
  debtPreventionCancelDisplayInfo,
  serviceCode,
  tid
}: AllTransactionCancelPreventBondProps) => {
  const { t } = useTranslation();
  const { navigate } = useNavigate();
  const [item, setItem] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(debtPreventionCancelDisplayInfo);
  const onClickToClose = () => {
    navigate(PATHS.transaction.allTransaction.detail, {
      state: {
        serviceCode: serviceCode,
        tid: tid
      }
    });
  };
  const callTransactionCancel = () => {

  };
  
  return (
    <>
      <motion.div 
        className="full-menu-modal" 
        initial="hidden"
        animate={ (cancelPreventBondOn)? 'visible': 'hidden' }
        variants={ FilterMotionVariants }
        transition={ FilterMotionDuration }
        style={ FilterMotionStyle }
      >
        <div className="full-menu-container">
          <div className="full-menu-header">
            <div className="full-menu-title center">{t('transaction.cancel.afterDeposit.title')}</div>
            <div className="full-menu-actions">
              <button
                id="closeFullMenu"
                className="full-menu-close"
              >
                <img
                  src={ IMAGE_ROOT + '/ico_close.svg' }
                  alt={t('common.close')}
                  onClick={ onClickToClose }
                />
              </button>
            </div>
          </div>
          <div className="option-list-nopadding pw-26">
            <div className="after-deposit-cancel pb-120">
              <div className="notice-text">{t('transaction.cancel.afterDeposit.notice')}</div>
              <div className="section-title">{t('transaction.cancel.afterDeposit.cancelTransactionTitle')}</div>
              <div className="amount-info">
                <ul className="kv-list">
                  <li className="kv-row">
                    <div className="k">· {t('transaction.fields.approvalDay')}</div>
                    <div className="v">{ item?.approvalDate? moment(item?.approvalDate).format('YYYY.MM.DD'): '' }</div>
                  </li>
                  <li className="kv-row">
                    <div className="k">· {t('transaction.fields.approvalNumber')}</div>
                    <div className="v">{ item?.approvalNo }</div>
                  </li>
                  <li className="kv-row">
                    <div className="k">· {t('transaction.cancel.afterDeposit.approvalAmount')}</div>
                    <div className="v">
                      <NumericFormat
                        value={ item?.amount }
                        thousandSeparator
                        displayType="text"
                      ></NumericFormat>
                    </div>
                  </li>
                  <li className="kv-row">
                    <div className="k">· {t('transaction.fields.totalCancelAmount')}</div>
                    <div className="v">
                      <NumericFormat
                        value={ item?.totalCancelAmount }
                        thousandSeparator
                        displayType="text"
                      ></NumericFormat>
                    </div>
                  </li>
                  <li className="kv-row">
                    <div className="k red">· {t('transaction.cancel.afterDeposit.depositRequestAmount')} :</div>
                    <div className="v red">
                      <NumericFormat
                        value={ item?.depositRequestAmount }
                        thousandSeparator
                        displayType="text"
                      ></NumericFormat>
                    </div>
                  </li>
                </ul>
              </div>

              <div className="section-title">{t('transaction.cancel.afterDeposit.depositInfoTitle')}</div>
              <div className="amount-info">
                <ul className="kv-list">
                  <li className="kv-row">
                    <div className="k">· {t('transaction.fields.bank')}</div>
                    <div className="v">{ item?.bankName }</div>
                  </li>
                  <li className="kv-row">
                    <div className="k">· {t('transaction.fields.accountNo')}</div>
                    <div className="v">{ item?.accountNo }</div>
                  </li>
                  <li className="kv-row">
                    <div className="k">· {t('transaction.fields.accountHolder')}</div>
                    <div className="v">{ item?.accountName }</div>
                  </li>
                </ul>
              </div>

              <div className="guide-list mt-26">
                <div className="desc dot">{t('transaction.cancel.afterDeposit.guide1')}</div>
                <div className="desc dot">{t('transaction.cancel.afterDeposit.guide2')}</div>
                <div className="desc dot">{t('transaction.cancel.afterDeposit.guide3')}</div>
                <div className="desc dot">{t('transaction.cancel.afterDeposit.guide4')}</div>
                <div className="desc dot" dangerouslySetInnerHTML={{ __html: t('transaction.cancel.afterDeposit.guide5') }}></div>
                <div className="desc dot" dangerouslySetInnerHTML={{ __html: t('transaction.cancel.afterDeposit.guide6') }}></div>
              </div>
            </div>
          </div>
        </div>
        <div className="apply-row">
          <button
            className="btn-50 btn-blue flex-1"
            onClick={ () => callTransactionCancel() }
          >{t('transaction.submit')}</button>
        </div>
      </motion.div>
    </>
  );
};