import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { getCartState, getCurrentCartState } from "@insite/client-framework/Store/Data/Carts/CartsSelector";
import {
    getCurrentPromotionsDataView,
    getDiscountTotal,
    getOrderPromotions,
    getShippingPromotions,
} from "@insite/client-framework/Store/Data/Promotions/PromotionsSelectors";
import { getPageLinkByPageType } from "@insite/client-framework/Store/Links/LinksSelectors";
import translate from "@insite/client-framework/Translate";
import WidgetModule from "@insite/client-framework/Types/WidgetModule";
import WidgetProps from "@insite/client-framework/Types/WidgetProps";
import CartTotalDisplay, { CartTotalDisplayStyles } from "@insite/content-library/Components/CartTotalDisplay";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
import Link, { LinkPresentationProps } from "@insite/mobius/Link";
import LoadingSpinner from "@insite/mobius/LoadingSpinner";
import Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import React from "react";
import { connect } from "react-redux";
import { css } from "styled-components";

const mapStateToProps = (state: ApplicationState) => {
    const { cartId } = state.pages.onePageCheckout;
    const cartState = cartId ? getCartState(state, cartId) : getCurrentCartState(state);
    const promotions = getCurrentPromotionsDataView(state).value;
    return {
        cart: cartState.value,
        orderPromotions: promotions ? getOrderPromotions(promotions) : undefined,
        shippingPromotions: promotions ? getShippingPromotions(promotions) : undefined,
        discountTotal: promotions ? getDiscountTotal(promotions) : undefined,
        isLoading: !cartState.value || cartState.isLoading,
        cartUrl: getPageLinkByPageType(state, "CartPage")?.url,
    };
};

type Props = WidgetProps & ReturnType<typeof mapStateToProps>;

export interface OnePageCheckoutOrderSummaryStyles {
    container?: GridContainerProps;
    centeringWrapper?: InjectableCss;
    titleGridItem?: GridItemProps;
    titleText?: TypographyPresentationProps;
    editGridItem?: GridItemProps;
    editLink?: LinkPresentationProps;
    cartTotalGridItem?: GridItemProps;
    cartTotal?: CartTotalDisplayStyles;
}

export const orderSummaryStyles: OnePageCheckoutOrderSummaryStyles = {
    container: { gap: 20 },
    centeringWrapper: {
        css: css`
            display: flex;
            justify-content: center;
            align-items: center;
            height: 450px;
        `,
    },
    titleGridItem: {
        width: 10,
        css: css`
            align-items: center;
        `,
    },
    titleText: {
        variant: "h5",
        css: css`
            margin-bottom: 0;
        `,
    },
    editGridItem: {
        width: 2,
        css: css`
            justify-content: end;
            align-items: center;
        `,
    },
    cartTotalGridItem: { width: 12 },
    cartTotal: {
        container: {
            gap: 10,
            css: css`
                padding: 0;
                background-color: transparent;
            `,
        },
    },
};

const styles = orderSummaryStyles;

const OnePageCheckoutOrderSummary = ({
    cart,
    orderPromotions,
    shippingPromotions,
    discountTotal,
    isLoading,
    cartUrl,
}: Props) => {
    if (isLoading) {
        return (
            <StyledWrapper {...styles.centeringWrapper}>
                <LoadingSpinner data-test-selector="onePageCheckout_orderSummary" />
            </StyledWrapper>
        );
    }

    return (
        <GridContainer {...styles.container}>
            <GridItem {...styles.titleGridItem}>
                <Typography as="h2" {...styles.titleText}>
                    {translate("Order Summary")}
                </Typography>
            </GridItem>
            <GridItem {...styles.editGridItem}>
                <Link {...styles.editLink} href={cartUrl}>
                    {translate("Edit")}
                </Link>
            </GridItem>
            <GridItem {...styles.cartTotalGridItem}>
                <CartTotalDisplay
                    extendedStyles={styles.cartTotal}
                    cart={cart}
                    orderPromotions={orderPromotions}
                    shippingPromotions={shippingPromotions}
                    discountTotal={discountTotal}
                />
            </GridItem>
        </GridContainer>
    );
};

const widgetModule: WidgetModule = {
    component: connect(mapStateToProps)(OnePageCheckoutOrderSummary),
    definition: {
        group: "One Page Checkout",
        allowedContexts: ["OnePageCheckoutPage"],
        displayName: "Order Summary",
    },
};

export default widgetModule;
