import { useEffect, useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { InfoItem } from './info-item';
import { CardCommissionBottomSheet } from './card-commission-bottom-sheet';
import { CreditCardListBottomSheet } from './credit-card-list-bottom-sheet';
import { NoInterestInfoBottomSheet } from './no-interest-info-bottom-sheet';
import { usePaymentInstallmentDetailMutation } from '../api/use-payment-installment-detail-mutation';
import { 
  AccountTransferData,
  GeneralTab,
  InstallmentData,
  InstallmentDetails,
  InstallmentTab,
  MobilePaymentData,
  MoneyPointTab,
  OtherPaymentData,
  PaymentCardParams,
  PaymentCardResponse, 
  PaymentInfoItemType, 
  PaymentInstallmentDetailParams, 
  PaymentInstallmentDetailResponse, 
  PaymentInstallmentParams, 
  PaymentInstallmentResponse, 
  PaymentNonCardParams, 
  PaymentNonCardResponse 
} from '../model/types';
import { usePaymentCardMutation } from '../api/use-payment-card-mutation';
import { usePaymentNonCardMutation } from '../api/use-payment-non-card-mutation';
import { usePaymentInstallmentMutation } from '../api/use-payment-installment-mutation';

export const InfoWrap = () => {
  
  const [mid, setMid] = useState<string>('nictest00g');

  const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false);
  const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false);
  const [creditCardListBottomSheetOn, setCreditCardListBottomSheetOn] = useState<boolean>(false);

  const [cardCompany, setCardCompany] = useState<string>('비씨');
  const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
  const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
  
  const [settlementPeriod, setSettlementPeriod] = useState<string>();
  const [generalTab, setGeneralTab] = useState<GeneralTab>();
  const [installmentTab, setInstallmentTab] = useState<InstallmentTab>();
  const [moneyPointTab, setMoneyPointTab] = useState<MoneyPointTab>();
  
  const [accountTransferData, setAccountTransferData] = useState<AccountTransferData>();
  const [mobilePaymentData, setMobilePaymentData] = useState<MobilePaymentData>();
  const [otherPaymentData, setOtherPaymentData] = useState<OtherPaymentData>();

  const [installmentData, setInstallmentData] = useState<Array<InstallmentData>>();

  const { mutateAsync: paymentCard } = usePaymentCardMutation();
  const { mutateAsync: paymentNonCard } = usePaymentNonCardMutation();
  const { mutateAsync: paymentInstallment } = usePaymentInstallmentMutation();
  const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();

  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 }
            setNoInterestInfoBottomSheetOn={ setNoInterestInfoBottomSheetOn }
          ></InfoItem>
        );
      }
    }
    
    return rs;
  };

  const callPaymentCard = () => {
    let params: PaymentCardParams = {
      mid: mid,
      paymentMethod: 'CREDIT_CARD'
    };
    
    paymentCard(params).then((rs: PaymentCardResponse) => {
      console.log(rs);
      setSettlementPeriod(rs.settlementPeriod);
      setGeneralTab(rs.generalTab);
      setInstallmentTab(rs.installmentTab);
      setMoneyPointTab(rs.moneyPointTab);
    });
  };
  const callPaymentNonCard = () => {
    let params: PaymentNonCardParams = {
      mid: mid,
      paymentMethod: 'ACCOUNT_TRANSFER'
    };
    
    paymentNonCard(params).then((rs: PaymentNonCardResponse) => {
      console.log(rs);
      setSettlementPeriod(rs.settlementPeriod);
      setAccountTransferData(rs.accountTransferData);
      setMobilePaymentData(rs.mobilePaymentData);
      setOtherPaymentData(rs.otherPaymentData);
    });
  };
  const callPaymentIntallment = () => {
    let params: PaymentInstallmentParams = {
      mid: mid,
      paymentMethod: 'CREDIT_CARD'
    };
    
    paymentInstallment(params).then((rs: PaymentInstallmentResponse) => {
      console.log(rs);
      setInstallmentData(rs.installmentData);
    });
  };

  const callPaymentIntallmentDetail = () => {
    let params: PaymentInstallmentDetailParams  = {
      mid: mid,
      cardCompany: cardCompany
    };
    
    paymentInstallmentDetail(params).then((rs: PaymentInstallmentDetailResponse) => {
      console.log(rs);
      setCardCompany(rs.cardCompany);
      setCardCompanyOptions(rs.cardCompanyOptions);
      setInstallmentDetails(rs.installmentDetails);
    });
  };
  useEffect(() => {
    callPaymentCard();
    callPaymentNonCard();
    callPaymentIntallment();
  }, []);
  useEffect(() => {
    callPaymentIntallmentDetail();
  }, [cardCompany]);

  return (
    <>
      <div className="ing-list pb-70">
        <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>
      <CardCommissionBottomSheet
        cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
        setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
      ></CardCommissionBottomSheet>
      <CreditCardListBottomSheet
        creditCardListBottomSheetOn={ creditCardListBottomSheetOn }
        setCreditCardListBottomSheetOn={ setCreditCardListBottomSheetOn }
      ></CreditCardListBottomSheet>
      <NoInterestInfoBottomSheet
        noInterestInfoBottomSheetOn={ noInterestInfoBottomSheetOn }
        setNoInterestInfoBottomSheetOn={ setNoInterestInfoBottomSheetOn }
        cardCompany={ cardCompany }
        cardCompanyOptions={ cardCompanyOptions }
        installmentDetails={ installmentDetails }
        setCardCompany={ setCardCompany }
      ></NoInterestInfoBottomSheet>
    </>
  );
};