import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';

export interface CardCommissionBottomSheetProps {
  cardCommissionBottomSheetOn: boolean;
  setCardCommissionBottomSheetOn: (cardCommissionBottomSheetOn: boolean) => void;
};

export const CardCommissionBottomSheet = ({
  cardCommissionBottomSheetOn,
  setCardCommissionBottomSheetOn
}: CardCommissionBottomSheetProps) => {

  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>수수료 및 정산주기</h2>
            <button 
              className="close-btn" 
              type="button"
            >
              <img 
                src={ IMAGE_ROOT + '/ico_close.svg' }
                alt="닫기"
                onClick={ () => onClickToClose() }
              />
            </button>
          </div>
        </div>

        <div className="bottomsheet-content">
          <div className="card-fee">
            <div className="desc">정산주기 : 일일(+3일)</div>

            <div className="notice-tabs">
              <button 
                className="tab36 on" 
                type="button"
              >일반</button>
              <button 
                className="tab36" 
                type="button"
              >무이자</button>
              <button 
                className="tab36" 
                type="button"
              >머니/포인트</button>
            </div>

            <div className="card-fee-box">
              <span className="label">카드사</span>
              <div className="field wid-100">
                <select>
                  <option>KB국민</option>
                </select>
              </div>
            </div>

            <div className="card-fee-list">
              <div className="card-fee-list-header">
                <span className="th-left">할부개월</span>
                <span className="th-right">수수료</span>
              </div>
              <div className="card-fee-row">
                <span>02 개월</span>
                <span>2.000%</span>
              </div>
              <div className="card-fee-row">
                <span>03 개월</span>
                <span>3.100%</span>
              </div>
              <div className="card-fee-row">
                <span>04 개월</span>
                <span>4.400%</span>
              </div>
              <div className="card-fee-row">
                <span>05 개월</span>
                <span>5.200%</span>
              </div>
              <div className="card-fee-row">
                <span>06 개월</span>
                <span>6.000%</span>
              </div>
              <div className="card-fee-row">
                <span>07 개월</span>
                <span>6.600%</span>
              </div>
              <div className="card-fee-row">
                <span>08 개월</span>
                <span>7.500%</span>
              </div>
              <div className="card-fee-row">
                <span>09 개월</span>
                <span>8.000%</span>
              </div>
              <div className="card-fee-row">
                <span>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>
    </>
  );
};