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

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 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>무이자 정보</h2>
            <button 
              className="close-btn" 
              type="button"
            >
              <img 
                src={ IMAGE_ROOT + '/ico_close.svg' }
                alt="닫기"
                onClick={ () => onClickToClose() }
              />
            </button>
          </div>
        </div>
          
        <div className="fee-cycle">
          <div className="card-fee-box">
            <span className="label">카드사</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>할부개월 : </span>
                <span>{ value.installmentMonths }</span>
              </div>
              <div className="desc dot">
                <span>적용기간 : </span>
                <span>{ value.applicationPeriod }</span>
              </div>
              <div className="desc dot">
                <span>적용금액 : </span>
                <span>
                  <NumericFormat
                    value={ value.applicationAmount } 
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
                </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>
    </>
  )
};