import { useEffect, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { PaymentTab } from '@/entities/payment/ui/payment-tab';
import { InfoWrap } from '@/entities/payment/ui/info-wrap';
import { PaymentCardResponse, PaymentInstallmentResponse, PaymentNonCardResponse, PaymentTabKeys } from '@/entities/payment/model/types';
import { usePaymentCardMutation } from '@/entities/payment/api/use-payment-card-mutation';
import { usePaymentNonCardMutation } from '@/entities/payment/api/use-payment-non-card-mutation';
import { HeaderType } from '@/entities/common/model/types';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { usePaymentInstallmentMutation } from '@/entities/payment/api/use-payment-installment-mutation';

export const InfoPage = () => {
  const { navigate } = useNavigate();

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

  const [activeTab, setActiveTab] = useState<PaymentTabKeys>(PaymentTabKeys.Info);
  const [mid, setMid] = useState<string>('nictest00g');
  
  const [paymentCardResult, setPaymentCardResult] = useState<PaymentCardResponse>();
  const [paymentNonCardResult, setPaymentNonCardResult] = useState<PaymentNonCardResponse>();
  const [paymentInstallmentResult, setPaymentInstallResult] = useState<PaymentInstallmentResponse>();

  useSetHeaderTitle('결제 관리');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(true);
  useSetOnBack(() => {
    navigate(PATHS.home);
  });

  const callPaymentCard = () => {
    let params = {
      mid: mid,
      paymentMethod: 'CREDIT_CARD'
    };
    
    paymentCard(params).then((rs) => {
      console.log(rs);
      setPaymentCardResult(rs);
    });
  };
  const callPaymentNonCard = () => {
    let params = {
      mid: mid,
      paymentMethod: 'ACCOUNT_TRANSFER'
    };
    
    paymentNonCard(params).then((rs) => {
      console.log(rs);
      setPaymentNonCardResult(rs);
    });
  };
  const callPaymentIntallment = () => {
    let params = {
      mid: mid,
      paymentMethod: 'CREDIT_CARD'
    };
    
    paymentInstallment(params).then((rs) => {
      console.log(rs);
      setPaymentInstallResult(rs);
    });
  };

  useEffect(() => {
    callPaymentCard();
    callPaymentNonCard();
    callPaymentIntallment();
  }, []);

  return (
    <>
      <main>
        <div className="tab-content pb-70">
          <div className="tab-pane pt-46 active">
            <PaymentTab activeTab={ activeTab }></PaymentTab>
            <InfoWrap
              mid={ mid }
              paymentCard={ paymentCardResult }
              paymentNonCard={ paymentNonCardResult }
              paymentInstallment={ paymentInstallmentResult }
            ></InfoWrap>
          </div>
        </div>
      </main>
    </>
  );
};