import Zone from "@insite/client-framework/Components/Zone";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { getReviewAndPayCartState } from "@insite/client-framework/Store/Data/Carts/CartsSelector";
import { getCurrentCountries } from "@insite/client-framework/Store/Data/Countries/CountriesSelectors";
import { getQueryStrings } from "@insite/client-framework/Store/Data/Pages/PageSelectors";
import { getReviewAndPayPromotions } from "@insite/client-framework/Store/Data/Promotions/PromotionsSelectors";
import clearMessages from "@insite/client-framework/Store/Pages/CheckoutReviewAndSubmit/Handlers/ClearMessages";
import loadDataIfNeeded from "@insite/client-framework/Store/Pages/CheckoutReviewAndSubmit/Handlers/LoadDataIfNeeded";
import notifyProductRecs from "@insite/client-framework/Store/Pages/CheckoutReviewAndSubmit/Handlers/NotifyProductRecs";
import setCartId from "@insite/client-framework/Store/Pages/CheckoutReviewAndSubmit/Handlers/SetCartId";
import setPlaceOrderErrorMessage from "@insite/client-framework/Store/Pages/CheckoutReviewAndSubmit/Handlers/SetPlaceOrderErrorMessage";
import PageModule from "@insite/client-framework/Types/PageModule";
import PageProps from "@insite/client-framework/Types/PageProps";
import AddressErrorModal from "@insite/content-library/Components/AddressErrorModal";
import Page from "@insite/mobius/Page";
import React, { useEffect } from "react";
import { connect, ResolveThunks } from "react-redux";

const mapDispatchToProps = {
    setCartId,
    setPlaceOrderErrorMessage,
    loadDataIfNeeded,
    clearMessages,
    notifyProductRecs,
};

const mapStateToProps = (state: ApplicationState) => {
    const { cartId } = getQueryStrings(state);
    const cartState = getReviewAndPayCartState(state);
    const promotionsDataView = getReviewAndPayPromotions(state);
    const expand = state.data.carts.cartApiParameter?.expand || [];

    const isLoadDataNeeded =
        ((!cartState.value ||
            (cartState.value.lineCount && !cartState.value.cartLines?.length) ||
            !cartState.value.carriers ||
            !expand.includes("shipping") ||
            !expand.includes("tax")) &&
            !cartState.isLoading) ||
        (!promotionsDataView.value && !promotionsDataView.isLoading);

    return {
        cartId,
        cartState, // do not delete this, needed to trigger cart loading
        isLoadDataNeeded: isLoadDataNeeded || !getCurrentCountries(state),
        productRecsCalled: state.pages.checkoutReviewAndSubmit.productRecsCalled,
    };
};

type Props = PageProps & ResolveThunks<typeof mapDispatchToProps> & ReturnType<typeof mapStateToProps>;

const CheckoutReviewAndSubmitPage = ({
    id,
    cartId,
    isLoadDataNeeded,
    productRecsCalled,
    setCartId,
    loadDataIfNeeded,
    setPlaceOrderErrorMessage,
    clearMessages,
    notifyProductRecs,
}: Props) => {
    useEffect(() => {
        if (isLoadDataNeeded) {
            loadDataIfNeeded({ cartId, cartLinesShouldBeExpanded: true });
        } else if (!productRecsCalled) {
            notifyProductRecs({ cartId });
        }
    });

    useEffect(() => {
        setCartId({ cartId });
        setPlaceOrderErrorMessage({});
        clearMessages();
    }, []);

    return (
        <Page data-test-selector="checkoutReviewAndSubmitPage">
            <Zone zoneName="Content" contentId={id} />
            <AddressErrorModal />
        </Page>
    );
};

const pageModule: PageModule = {
    component: connect(mapStateToProps, mapDispatchToProps)(CheckoutReviewAndSubmitPage),
    definition: {
        hasEditableUrlSegment: true,
        hasEditableTitle: true,
        pageType: "System",
    },
};

export default pageModule;

/**
 * @deprecated Use string literal "CheckoutReviewAndSubmitPage" instead of this constant.
 */
export const CheckoutReviewAndSubmitPageContext = "CheckoutReviewAndSubmitPage";
