import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
import { BankFees, CategoryFees, FeeRanges, GeneralTabItems, InstallmentTabItems, MoneyPointTabItems, PaymentFees } from '../model/types';
import { useStore } from '@/shared/model/store';
import { ChangeEvent, useState } from 'react';

export interface CardCommissionBottomSheetProps {
  cardCommissionBottomSheetOn: boolean;
  setCardCommissionBottomSheetOn: (cardCommissionBottomSheetOn: boolean) => void;
  payType: number;
  settlementPeriod?: string;
  generalTabItems?: Array<GeneralTabItems>,
  installmentTabItems?: Array<InstallmentTabItems>,
  moneyPointTabItems?: Array<MoneyPointTabItems>,
  feeRanges?: Array<FeeRanges>,
  bankFees?: Array<BankFees>,
  paymentFees?: Array<PaymentFees>,
  categoryFees?: Array<CategoryFees>,
  feeRate?: number
};

export const CardCommissionBottomSheet = ({
  cardCommissionBottomSheetOn,
  setCardCommissionBottomSheetOn,
  payType,
  settlementPeriod,
  generalTabItems,
  installmentTabItems,
  moneyPointTabItems,
  feeRanges,
  bankFees,
  paymentFees,
  categoryFees,
  feeRate
}: CardCommissionBottomSheetProps) => {
  const { t } = useTranslation();
  const cardList = useStore.getState().CommonStore.creditCardList;

  const [selectedCard, setSelectedCard] = useState<string>(cardList[0].desc1);

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

  return (
    <>
      { cardCommissionBottomSheetOn &&
        <div className="bg-dim"></div>
      }
      <motion.div 
        className="bottomsheet"
        initial="hidden"
        animate={ (cardCommissionBottomSheetOn)? 'visible': 'hidden' }
        variants={ BottomSheetMotionVaiants }
        transition={ BottomSheetMotionDuration }
      >
        <div className="bottomsheet-header">
          <div className="bottomsheet-title">
            <h2>{t('payment.commissionAndSettlement')}</h2>
            <button
              className="close-btn"
              type="button"
            >
              <img
                src={ IMAGE_ROOT + '/ico_close.svg' }
                alt={t('common.close')}
                onClick={ () => onClickToClose() }
              />
            </button>
          </div>
        </div>

        <div className="bottomsheet-content">
          <div className="card-fee">
            <div className="desc">{t('payment.settlementPeriod')} : { settlementPeriod }</div>

            <div className="notice-tabs">
              { (payType === 2 || payType === 3) &&
                <button
                  className="tab36 on"
                  type="button"
                >{t('payment.general')}</button>
              }
              { (payType === 2 || payType === 3) &&
                <button
                  className="tab36"
                  type="button"
                >{t('payment.noInterest')}</button>
              }
              { (payType === 3) &&
              <button
                className="tab36"
                type="button"
              >{t('payment.moneyPoint')}</button>
              }
            </div>

            <div className="card-fee-box">
              <span className="label">{t('payment.cardCompany')}</span>
              <div className="field wid-100">
                <select
                  value={ selectedCard }
                  onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCard(e.target.value) }
                >
                  { 
                    cardList.map((value, index) => (
                      <option value={ value.desc1 }>{ value.desc1 }</option>
                    ))
                  }
                </select>
              </div>
            </div>

            <div className="card-fee-list">
              <div className="card-fee-list-header">
                <span className="th-left">{t('payment.installmentMonths')}</span>
                <span className="th-right">{t('payment.commission')}</span>
              </div>
              <div className="card-fee-row">
                <span>{t('payment.months', { count: 2 })}</span>
                <span>2.000%</span>
              </div>
              <div className="card-fee-row">
                <span>{t('payment.months', { count: 3 })}</span>
                <span>3.100%</span>
              </div>
              <div className="card-fee-row">
                <span>{t('payment.months', { count: 4 })}</span>
                <span>4.400%</span>
              </div>
              <div className="card-fee-row">
                <span>{t('payment.months', { count: 5 })}</span>
                <span>5.200%</span>
              </div>
              <div className="card-fee-row">
                <span>{t('payment.months', { count: 6 })}</span>
                <span>6.000%</span>
              </div>
              <div className="card-fee-row">
                <span>{t('payment.months', { count: 7 })}</span>
                <span>6.600%</span>
              </div>
              <div className="card-fee-row">
                <span>{t('payment.months', { count: 8 })}</span>
                <span>7.500%</span>
              </div>
              <div className="card-fee-row">
                <span>{t('payment.months', { count: 9 })}</span>
                <span>8.000%</span>
              </div>
              <div className="card-fee-row">
                <span>{t('payment.months', { count: 10 })}</span>
                <span>9.000%</span>
              </div>
            </div>
          </div>
        </div>
        {/*
        <div className="bottomsheet-footer">
          <button 
            className="btn-50 btn-blue flex-1" 
            type="button" 
            disabled
          >신청</button>
        </div>
        */}
      </motion.div>
    </>
  );
};