import { ChangeEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
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,
  BankFees,
  CategoryFees,
  FeeRanges,
  GeneralTabItems,
  InstallmentData,
  InstallmentDetails,
  InstallmentTabItems,
  MobilePaymentData,
  MoneyPointTabItems,
  OtherPaymentData,
  PaymentCardParams,
  PaymentCardResponse, 
  PaymentFees, 
  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';
import { useStore } from '@/shared/model/store';
import { showAlert } from '@/widgets/show-alert';
import { snackBar } from '@/shared/lib';
import { TransferCommissionBottomSheet } from './transfer-commission-bottom-sheet';

export const InfoWrap = () => {
  const { t } = useTranslation();
  const midOptions = useStore.getState().UserStore.selectOptionsMids;
  const userMid = useStore.getState().UserStore.mid;
  let midItem = midOptions.filter((value, index) => {
    return value.value === userMid; 
  });

  const [mid, setMid] = useState<string>((midItem.length > 0)? userMid: '');

  const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false);
  const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false);
  const [creditCardListBottomSheetOn, setCreditCardListBottomSheetOn] = useState<boolean>(false);
  const [transferCommissionBottomSheetOn, setTransferCommissionBottomSheetOn] = useState<boolean>(false);
  
  const [cardCompany, setCardCompany] = useState<string>(t('payment.paymentMethods.bcCard'));
  const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
  const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
  
  const [payType, setPayType] = useState<number>(2);
  const [itemKey, setItemKey] = useState<string>('');
  const [cardSettlementPeriod, setCardSettlementPeriod] = useState<string>();
  const [nonCardSettlementPeriod, setNonCardSettlementPeriod] = useState<string>();
  const [generalTabItems, setGeneralTabItems] = useState<Array<GeneralTabItems>>([]);
  const [installmentTabItems, setInstallmentTabItems] = useState<Array<InstallmentTabItems>>([]);
  const [moneyPointTabItems, setMoneyPointTabItems] = useState<Array<MoneyPointTabItems>>([]);

  const [feeRanges, setFeeRanges] = useState<Array<FeeRanges>>([]);
  const [bankFees, setBankFees] = useState<Array<BankFees>>([]);
  const [paymentFees, setPaymentFees] = useState<Array<PaymentFees>>([]);
  const [categoryFees, setCategoryFees] = useState<Array<CategoryFees>>([]);
  const [feeRate, setFeeRate] = useState<number>(0);
  
  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: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: '', payType: 2, itemKey: 'creditCard'},
    {payName: t('payment.paymentMethods.kakaoPay'), payImage: 'pay_02.svg', infoLink: '', payType: 3, itemKey: 'kakaoPay'},
    {payName: t('payment.paymentMethods.naverPay'), payImage: 'pay_03.svg', infoLink: '', payType: 3, itemKey: 'naverPay'},
    {payName: t('payment.paymentMethods.samsungPay'), payImage: 'pay_04.svg', infoLink: '', payType: 2, itemKey: 'samsungPay'},
    {payName: t('payment.paymentMethods.accountTransfer'), payImage: 'pay_05.svg', infoLink: '', payType: 1, itemKey: 'accountTransfer'},
    {payName: t('payment.paymentMethods.mobilePaymentFull'), payImage: 'pay_06.svg', infoLink: '', payType: 1, itemKey: 'mobilePaymentFull'},
    {payName: t('payment.paymentMethods.cultureLandGiftCard'), payImage: 'pay_07.svg', infoLink: '', payType: 1, itemKey: 'etc'},
    {payName: t('payment.paymentMethods.ssgMoney'), payImage: 'pay_08.svg', infoLink: '', payType: 1, itemKey: 'etc'},
    {payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: '', payType: 1, itemKey: 'etc'},
    {payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_10.svg', infoLink: '', payType: 2, itemKey: 'samsungPayCard'},
    {payName: t('payment.paymentMethods.applePay'), payImage: 'pay_11.svg', infoLink: '', payType: 2, itemKey: 'applePay'},
    {payName: t('payment.paymentMethods.tossPay'), payImage: 'pay_12.svg', infoLink: '', payType: 3, itemKey: 'tossPay'},
    {payName: t('payment.paymentMethods.payco'), payImage: 'pay_13.svg', infoLink: '', payType: 2, itemKey: 'payco'},
    {payName: t('payment.paymentMethods.livePay'), payImage: 'pay_14.svg', infoLink: '', payType: 2, itemKey: 'livePay'},
    {payName: t('payment.paymentMethods.taiwanPayment'), payImage: 'pay_15.svg', infoLink: '', payType: 1, itemKey: ''},
    {payName: t('payment.paymentMethods.tmoneyPay'), payImage: 'pay_16.svg', infoLink: '', payType: 1, itemKey: ''},
    {payName: t('payment.paymentMethods.lPay'), payImage: 'pay_17.svg', infoLink: '', payType: 2, itemKey: 'lPay'},
    {payName: t('payment.paymentMethods.payU'), payImage: 'pay_18.svg', infoLink: '', payType: 2, itemKey: 'payU'},
    {payName: t('payment.paymentMethods.twLinePay'), payImage: 'pay_19.svg', infoLink: '', payType: 2, itemKey: 'twLinePay'},
    {payName: t('payment.paymentMethods.ssgPay'), payImage: 'pay_21.svg', infoLink: '', payType: 3, itemKey: 'ssgPay'},
    {payName: t('payment.paymentMethods.kBankPay'), payImage: 'pay_22.svg', infoLink: '', payType: 2, itemKey: 'kBankPay'},
    {payName: t('payment.paymentMethods.virtualAccount'), payImage: 'pay_23.svg', infoLink: '', payType: 1, itemKey: 'virtualAccount'},
    {payName: t('payment.paymentMethods.ssgBankAccount'), payImage: 'pay_21.svg', infoLink: '', payType: 1, itemKey: 'etc'},
    {payName: t('payment.paymentMethods.accountSimplePayment'), payImage: 'pay_24.svg', infoLink: '', payType: 1, itemKey: 'accountSimplePayment'},
  ];

  const list2 = [
    {payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: ''},
    {payName: t('payment.paymentMethods.skPay'), payImage: 'pay_20.svg', infoLink: ''},
    {payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: ''},
    {payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_04.svg', infoLink: ''},
  ];

  const getList = (type: PaymentInfoItemType) => {
    let rs = [];
    if(type === PaymentInfoItemType.Comission){
      for(let i=0;i<list1.length;i++){
        let itemKey = list1[i]?.itemKey;
        let payType = list1[i]?.payType;

        let newBottomSheetOn;
        if(payType === 1){
          newBottomSheetOn = setTransferCommissionBottomSheetOn;
        }
        else if(payType === 2){
          newBottomSheetOn = setCardCommissionBottomSheetOn;
        }
        else if(payType === 3){
          newBottomSheetOn = setCardCommissionBottomSheetOn;
        }
        if(!!newBottomSheetOn){
          rs.push(
            <InfoItem
              key={ `comission-info-wrap-${i}` }
              type={ type }
              payName={ list1[i]?.payName }
              payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
              infoLink={ list1[i]?.infoLink }
              payType={ payType }
              itemKey={ itemKey }
              setItemKey={ setItemKey }
              setPayType={ setPayType }
              setBottomSheetOn={ newBottomSheetOn }
            ></InfoItem>
          );
        }
        
      }
    }
    else if(type === PaymentInfoItemType.NoInterest){
      for(let i=0;i<list2.length;i++){
        rs.push(
          <InfoItem
            key={ `nointerest-info-wrap-${i}` }
            type={ type }
            payName={ list2[i]?.payName }
            payImage={ IMAGE_ROOT + '/' + list2[i]?.payImage }
            infoLink={ list2[i]?.infoLink }
            setBottomSheetOn={ setNoInterestInfoBottomSheetOn }
          ></InfoItem>
        );
      }
    }
    
    return rs;
  };

  const callPaymentCard = () => {
    let params: PaymentCardParams = {
      mid: mid,
      paymentMethod: 'CREDIT_CARD'
    };
    
    paymentCard(params).then((rs: PaymentCardResponse) => {
      setCardSettlementPeriod(rs.settlementPeriod);
      setGeneralTabItems(rs.generalTab.items);
      setInstallmentTabItems(rs.installmentTab.items);
      setMoneyPointTabItems(rs.moneyPointTab.items);
    }).catch((e: any) => {
      if(e.response?.data?.error?.message){
        snackBar(e.response?.data?.error?.message);
        return;
      }
    });
  };
  const callPaymentNonCard = () => {
    let params: PaymentNonCardParams = {
      mid: mid,
      paymentMethod: 'ACCOUNT_TRANSFER'
    };
    
    paymentNonCard(params).then((rs: PaymentNonCardResponse) => {
      setNonCardSettlementPeriod(rs.settlementPeriod);
      setFeeRanges(rs.accountTransferData.feeRanges);
      setBankFees(rs.accountTransferData.bankFees);
      setPaymentFees(rs.mobilePaymentData.paymentFees);
      setCategoryFees(rs.mobilePaymentData.categoryFees);
      setFeeRate(rs.otherPaymentData.feeRate);
    }).catch((e: any) => {
      if(e.response?.data?.error?.message){
        snackBar(e.response?.data?.error?.message);
        return;
      }
    });
  };
  const callPaymentIntallment = () => {
    let params: PaymentInstallmentParams = {
      mid: mid,
      paymentMethod: 'CREDIT_CARD'
    };
    
    paymentInstallment(params).then((rs: PaymentInstallmentResponse) => {
      console.log(rs);
      setInstallmentData(rs.installmentData);
    }).catch((e: any) => {
      if(e.response?.data?.error?.message){
        snackBar(e.response?.data?.error?.message);
        return;
      }
    });
  };

  const callPaymentIntallmentDetail = (selectedCardCompany: string) => {
    let params: PaymentInstallmentDetailParams  = {
      mid: mid,
      cardCompany: selectedCardCompany
    };
    
    paymentInstallmentDetail(params).then((rs: PaymentInstallmentDetailResponse) => {
      console.log(rs);
      if(rs.cardCompany){
        setCardCompany(rs.cardCompany);
      }
      if(rs.cardCompanyOptions){
        setCardCompanyOptions(rs.cardCompanyOptions);
      }
      if(rs.installmentDetails){
        setInstallmentDetails(rs.installmentDetails);
      }
    }).catch((e: any) => {
      if(e.response?.data?.error?.message){
        snackBar(e.response?.data?.error?.message);
        return;
      }
    });
  };
  const changeToCardCompany = (cardCompany: string) => {
    setCardCompany(cardCompany);
    callPaymentIntallmentDetail(cardCompany);
  };
  useEffect(() => {
    if(!!mid){
      callPaymentCard();
      callPaymentNonCard();
      callPaymentIntallment();
      callPaymentIntallmentDetail(cardCompany);
    }
  }, [mid]);
  
  return (
    <>
      <div 
        className="input-wrapper top-select mt-30"
        style={{ paddingBottom: 0}}
      >
        <select
          value={ mid }
          onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
        >
        { 
          midOptions.map((value, index) => (
            <option
              key={ value.value }
              value={ value.value }
            >{ value.name }</option>
          )) 
        }  
        </select>
      </div>
      <div className="ing-list">
        <div className="ing-title">{t('payment.serviceUsageCommissionAndSettlement')}</div>
        <ul className="ing-card-list">
        { getList(PaymentInfoItemType.Comission) }
        </ul>

        <div className="ing-title">{t('payment.merchantNoInterestInfo')}</div>
        <ul className="ing-card-list">
        { getList(PaymentInfoItemType.NoInterest) }
        </ul>
      </div>
      { !!cardCommissionBottomSheetOn &&
        <CardCommissionBottomSheet
          cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
          setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
          payType={ payType }
          itemKey={ itemKey }
          settlementPeriod={ cardSettlementPeriod }
          generalTabItems={ generalTabItems }
          installmentTabItems={ installmentTabItems }
          moneyPointTabItems= { moneyPointTabItems }
          feeRanges={ feeRanges }
          bankFees={ bankFees }
          paymentFees={ paymentFees  }
          categoryFees={ categoryFees }
          feeRate={ feeRate }
        ></CardCommissionBottomSheet>
      }
      { !!transferCommissionBottomSheetOn &&
        <TransferCommissionBottomSheet
          itemKey={ itemKey }
          settlementPeriod={ nonCardSettlementPeriod }
          transferCommissionBottomSheetOn={ transferCommissionBottomSheetOn }
          setTransferCommissionBottomSheetOn={ setTransferCommissionBottomSheetOn }
        ></TransferCommissionBottomSheet>
      }
      
      <CreditCardListBottomSheet
        creditCardListBottomSheetOn={ creditCardListBottomSheetOn }
        setCreditCardListBottomSheetOn={ setCreditCardListBottomSheetOn }
      ></CreditCardListBottomSheet>
      <NoInterestInfoBottomSheet
        noInterestInfoBottomSheetOn={ noInterestInfoBottomSheetOn }
        setNoInterestInfoBottomSheetOn={ setNoInterestInfoBottomSheetOn }
        cardCompany={ cardCompany }
        cardCompanyOptions={ cardCompanyOptions }
        installmentDetails={ installmentDetails }
        changeToCardCompany={ changeToCardCompany }
      ></NoInterestInfoBottomSheet>
    </>
  );
};