import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { BottomSheetMotionVaiants, BottomSheetMotionDuration } from '@/entities/common/model/constant';
import { InstallmentDetails, PaymentInstallmentDetailResponse } from '../model/types';
import { ChangeEvent, useState } from 'react';
import { NumericFormat } from 'react-number-format';
import { useStore } from '@/shared/model/store';

export interface NoInterestInfoBottomSheetProps {
  noInterestInfoBottomSheetOn: boolean;
  setNoInterestInfoBottomSheetOn: (noInterestInfoBottomSheetOn: boolean) => void;
  cardCompany?: string;
  cardCompanyOptions?: Array<string>;
  installmentDetails?: Array<InstallmentDetails>;
  changeToCardCompany?: (cardCompany: string) => void;
};

export const NoInterestInfoBottomSheet = ({
  noInterestInfoBottomSheetOn,
  setNoInterestInfoBottomSheetOn,
  cardCompany,
  cardCompanyOptions,
  installmentDetails,
  changeToCardCompany
}: NoInterestInfoBottomSheetProps) => {
  const { t, i18n } = useTranslation();
  const cardList = useStore.getState().CommonStore.creditCardList;

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

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

  const onChangeToCardCompany = (e: ChangeEvent<HTMLSelectElement>) => {
    let value = e.target.value;
    if(changeToCardCompany){
      changeToCardCompany(value);
    }
  };

  return (
    <>
      { noInterestInfoBottomSheetOn &&
        <div className="bg-dim"></div>
      }
      <motion.div 
        className="bottomsheet"
        initial="hidden"
        animate={ (noInterestInfoBottomSheetOn)? 'visible': 'hidden' }
        variants={ BottomSheetMotionVaiants }
        transition={ BottomSheetMotionDuration }
      >
        <div className="bottomsheet-header">
          <div className="bottomsheet-title">
            <h2>{t('payment.noInterestInfo')}</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="fee-cycle">
          <div className="card-fee-box">
            <span className="label">{t('payment.cardCompany')}</span>
            <div className="field wid-100">
            { !!cardCompanyOptions &&
              <select onChange={ onChangeToCardCompany }>
              { cardCompanyOptions.map((value, index) => (
                  <option 
                    value={ value }
                    selected={ cardCompany === value }
                  >{ value }</option>
                ))
              }
              </select>
            }
            </div>
          </div>
          { !!installmentDetails 
            && installmentDetails.length > 0
            && installmentDetails.map((value, index) => (
            <>
              { (index > 0) &&
                <div className="divider"></div>
              }
              <div className="desc dot">
                <span>{t('payment.installmentMonths')} : </span>
                <span>{ value.installmentMonths }</span>
              </div>
              <div className="desc dot">
                <span>{t('payment.applicationPeriod')} : </span>
                <span>{ value.applicationPeriod }</span>
              </div>
              <div className="desc dot">
                <span>{t('payment.applicationAmount')} : </span>
                <span>
                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.applicationAmount || 0) })}
                </span>
              </div>
            </>
            ))
          }
          {/*
          <div className="desc dot">할부개월 : 02, 03, 07</div>
          <div className="desc dot">적용기간 : 2025.06.01 ~ 9999.12.31</div>
          <div className="desc dot">적용금액 : 70,000</div>
          <div className="divider"></div>
          <div className="desc dot">할부개월 : 15, 20, 36, 60</div>
          <div className="desc dot">적용기간 : 2025.06.01 ~ 9999.12.31</div>
          <div className="desc dot">적용금액 : 50,000</div>
          */}
        </div>
      </motion.div>
    </>
  )
};