"use client"
import { PaymentMethod } from "@/lib/appConstant";
import { getServicePath, getViewSettings } from "@/lib/redux/features/serviceAdmin";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import StorageHelper from "@/lib/storeHelper";
import { STORAGE_KEYS } from "@/types/common";
import { ServiceViewSettings } from "@/types/serviceAdmin";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { Fragment, useEffect, useState } from "react";
import AppButton from "../ui/button/button";
import { Col, Row } from "antd";
import { FormItem } from "../ui/form";
import { CreditCard } from "lucide-react";
import AppInput from "../ui/input/input";
import { confirmOrderReceive, fetchGakkenPaymentInfo, getIsPaymentError, getIsPaymentSuccess,resetCreateOrderReceive, resetGakkenPaymentInfo } from "@/lib/redux/features/payment";
import { getAuthInfo } from "@/lib/redux/features/auth";
import { showToast } from "../toast/showToast";
import OrderConfirmation from "./order-confirmation";

type PropsType = { viewSettings?: ServiceViewSettings };

export default function GakkenPaymentConfirm (props: PropsType) {
    const {
    } = props;
    const t = useTranslations("");
    const dispatch = useAppDispatch();
    const router = useRouter();
  
    const servicePath = useAppSelector(getServicePath);
    const viewSettings = useAppSelector(getViewSettings);

    const [cacheGakkenPayment, setCacheGakkenPayment] = useState({});

    const cacheCouponCode = StorageHelper.getSessionItem(STORAGE_KEYS.couponCode);
    const cacheSubscriptionId = StorageHelper.getSessionItem(STORAGE_KEYS.subsId);
    const gakkenPayment = useAppSelector((state) => state.payment.gakkenPayment);
    const isPaymentSuccess = useAppSelector(getIsPaymentSuccess);
    const isPaymentError = useAppSelector(getIsPaymentError);

    useEffect(() => {
        if (viewSettings.paymentGateway !== PaymentMethod.GAKKEN_ID) {
            router.push(`${servicePath ? '/'+servicePath : ''}`);
        }
        if (gakkenPayment.gidOrderNo) {
            if (!cacheSubscriptionId) {
                router.push(`${servicePath ? '/'+servicePath : ''}`);
            } else {
                setCacheGakkenPayment({
                    gidOrderNo: gakkenPayment.gidOrderNo,
                    periodicPaymentId: gakkenPayment.periodicPaymentId,
                    couponCode: cacheCouponCode
                });
                const request = {
                    gidOrderNo: gakkenPayment.gidOrderNo,
                    subscriptionPlanId: cacheSubscriptionId,
                    couponCode: cacheCouponCode
                };
                handleGetPaymentInfo(request);
            }
        } else {
            router.push(`${servicePath ? '/'+servicePath : ''}`);
        }
    }, []);

    useEffect(() => {
        if (isPaymentSuccess) {
            router.push(`${servicePath ? '/'+servicePath : ''}/thank-you`);
        }
    }, [isPaymentSuccess, isPaymentError]);

    const handleGetPaymentInfo = (request) => {        
        dispatch(fetchGakkenPaymentInfo(request));
    };
    const handleConfirmGakkenPayment = async () => {
        dispatch(confirmOrderReceive(cacheGakkenPayment));
    };
    const cancelConfirmGakkenPayment = async () => {
        dispatch(resetGakkenPaymentInfo());
        dispatch(resetCreateOrderReceive());
        showToast('error', t('toast.success.cancelGakkenPayment'))
       
        if (gakkenPayment.state) {
            router.push(`${gakkenPayment.state}`);
        } else {
            router.push(`${servicePath ? '/'+servicePath : ''}`);
        }
    };


    return (
        <div style={{
            width: '100%',
            display: 'flex',
            flexWrap: 'wrap',
            flexDirection: 'column',
            alignContent: 'center'
            // justifyContent: 'center'
        }}>
          <OrderConfirmation
            onSubmit={handleConfirmGakkenPayment}
            onCancel={cancelConfirmGakkenPayment}
          />
        </div>
    );
};