import { useApi, useApiCall } from "@/api";
import { IFunnel, IFunnelPaymentPlacement, IFunnelPaymentProperty } from "@/api/resources/Session";
import { Currency } from "@/components/PaymentTable/Price";
import { ELocalesPlacement } from "@/locales";
import { selectors } from "@/store";
import { useCallback, useMemo } from "react";
import { useSelector } from "react-redux";

interface IUseFunnelProps {
    funnel: ELocalesPlacement;
    paymentPlacement: string;
}

export function useFunnel({ funnel, paymentPlacement }: IUseFunnelProps) {
    const api = useApi()
    const token = useSelector(selectors.selectToken);

    const getFunnelData = useCallback(async () => {
        if (!token.length || !funnel) return;
        const subscriptions = await api.getFunnel({
            token,
            funnel
        });
        return subscriptions?.data;
    }, [api, funnel, token]);

    const { data: funnelData, isPending } =
        useApiCall<IFunnel | undefined>(getFunnelData);

    const payment = useMemo(() => {
        return funnelData?.payment[paymentPlacement]
    }, [funnelData])

    const products = useMemo(() => {
        return funnelData?.payment[paymentPlacement]?.variants || []
    }, [funnelData])

    const currency = useMemo(() => {
        return funnelData?.currency || Currency.usd
    }, [funnelData])

    const trialInterval = useMemo(() => {
        return funnelData?.payment[paymentPlacement]?.trialInterval || 7
    }, [funnelData])

    const trialPeriod = useMemo(() => {
        return funnelData?.payment[paymentPlacement]?.trialPeriod || "DAY"
    }, [funnelData])

    const billingInterval = useMemo(() => {
        return funnelData?.payment[paymentPlacement]?.billingInterval || 7
    }, [funnelData])

    const billingPeriod = useMemo(() => {
        return funnelData?.payment[paymentPlacement]?.billingPeriod || "DAY"
    }, [funnelData])

    const placementId = useMemo(() => {
        return funnelData?.payment[paymentPlacement]?.placementId
    }, [funnelData])

    const paywallId = useMemo(() => {
        return funnelData?.payment[paymentPlacement]?.paywallId
    }, [funnelData])

    const paymentUrl = useMemo(() => {
        return funnelData?.payment[paymentPlacement]?.paymentUrl
    }, [funnelData])

    const getProperty = useCallback(
        (key: string): IFunnelPaymentProperty | undefined => {
            const property = payment?.properties?.find(property => property.key === key);
            if (!property && !isPending) {
                console.error(`Property ${key} not found`);
                return {
                    key,
                    value: `UNDEFINED KEY = "${key}" `
                }
            }
            return property;
        },
        [payment, isPending]
    );

    const getPaymentEntity = useCallback(
        (key: string): IFunnelPaymentPlacement | null => {
            return funnelData?.payment[key] || null
        },
        [funnelData]
    );

    return useMemo(() => ({
        funnelData,
        payment,
        isPending,
        products,
        currency,
        trialInterval,
        trialPeriod,
        billingInterval,
        billingPeriod,
        placementId,
        paywallId,
        paymentUrl,
        getProperty,
        getPaymentEntity
    }), [
        funnelData,
        payment,
        isPending,
        products,
        currency,
        trialInterval,
        trialPeriod,
        billingInterval,
        billingPeriod,
        placementId,
        paywallId,
        paymentUrl,
        getProperty,
        getPaymentEntity
    ])
}