import { IMAGE_ROOT } from "@/shared/constants/common";
import { InfoItem } from "./info-item";
import { InfoItemProps, PaymentCardResponse, PaymentInfoItemType, PaymentInstallmentResponse, PaymentNonCardResponse } from "../model/types";

export interface InfoWrapProp {
  paymentCard?: PaymentCardResponse,
  paymentNonCard?: PaymentNonCardResponse,
  paymentInstallment?: PaymentInstallmentResponse
};
export const InfoWrap = ({
  paymentCard,
  paymentNonCard,
  paymentInstallment
}: InfoWrapProp) => {
  

  const list1 = [
    {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
    {payName: '카카오페이', payImage: 'pay_02.svg', infoLink: ''},
    {payName: '네이버페이', payImage: 'pay_03.svg', infoLink: ''},
    {payName: '삼성페이', payImage: 'pay_04.svg', infoLink: ''},
    {payName: '계좌이체', payImage: 'pay_05.svg', infoLink: ''},
    {payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: ''},
    {payName: '문화상품권', payImage: 'pay_07.svg', infoLink: ''},
    {payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: ''},
    {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''},
    {payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: ''},
    {payName: '애플페이', payImage: 'pay_11.svg', infoLink: ''},
    {payName: '토스페이', payImage: 'pay_12.svg', infoLink: ''},
    {payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: ''},
    {payName: '리브페이', payImage: 'pay_14.svg', infoLink: ''},
    {payName: '대만결제', payImage: 'pay_15.svg', infoLink: ''},
    {payName: '티머니페이', payImage: 'pay_16.svg', infoLink: ''},
    {payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: ''},
    {payName: 'PAYU', payImage: 'pay_18.svg', infoLink: ''},
    {payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: ''},
    {payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: ''},
    {payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: ''},
    {payName: '가상계좌', payImage: 'pay_23.svg', infoLink: ''},
    {payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: ''},
    {payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: ''},
  ];

  const list2 = [
    {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
    {payName: 'SK PAY', payImage: 'pay_20.svg', infoLink: ''},
    {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''},
    {payName: '삼성페이(카드)', payImage: 'pay_04.svg', infoLink: ''},
  ];

  const getList = (type: PaymentInfoItemType) => {
    let rs = [];
    if(type === PaymentInfoItemType.Comission){
      for(let i=0;i<list1.length;i++){
        rs.push(
          <InfoItem
            type={ type }
            payName={ list1[i]?.payName }
            payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
            infoLink={ list1[i]?.infoLink }
          ></InfoItem>
        );
      }
    }
    else if(type === PaymentInfoItemType.NoInterest){
      for(let i=0;i<list2.length;i++){
        rs.push(
          <InfoItem
            type={ type }
            payName={ list2[i]?.payName }
            payImage={ IMAGE_ROOT + '/' + list2[i]?.payImage }
            infoLink={ list2[i]?.infoLink }
          ></InfoItem>
        );
      }
    }
    
    return rs;
  }


  return (
    <>
      <div className="ing-list">
        <div className="ing-title">서비스 이용, 수수료 및 정산주기</div>
        <ul className="ing-card-list">
          { getList(PaymentInfoItemType.Comission) }
        </ul>

        <div className="ing-title">가맹점 분담 무이자 정보</div>
        <ul className="ing-card-list">
          { getList(PaymentInfoItemType.NoInterest) }
        </ul>
      </div>
    
    </>
  );
};