import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { getCartState } from "@insite/client-framework/Store/Data/Carts/CartsSelector";
import {
    getDiscountTotal,
    getOrderPromotions,
    getPromotionsDataView,
    getShippingPromotions,
} from "@insite/client-framework/Store/Data/Promotions/PromotionsSelectors";
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 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 cart = getCartState(state, state.pages.onePageCheckoutConfirmation.cartId)?.value;
    const promotions = getPromotionsDataView(state, state.pages.onePageCheckoutConfirmation.cartId).value;
    let orderPromotions;
    let shippingPromotions;
    let discountTotal;
    if (promotions) {
        orderPromotions = getOrderPromotions(promotions);
        shippingPromotions = getShippingPromotions(promotions);
        discountTotal = getDiscountTotal(promotions);
    }

    return {
        cart,
        promotions,
        orderPromotions,
        shippingPromotions,
        discountTotal,
    };
};
type Props = WidgetProps & ReturnType<typeof mapStateToProps>;

export interface OnePageCheckoutConfirmationOrderSummaryStyles {
    container?: InjectableCss;
    cartTotal?: CartTotalDisplayStyles;
    notesContainer?: InjectableCss;
    notesTitle?: TypographyPresentationProps;
    notesText?: TypographyPresentationProps;
}

export const orderSummaryStyles: OnePageCheckoutConfirmationOrderSummaryStyles = {
    container: {
        css: css`
            flex-direction: column;
            margin-top: 15px;
        `,
    },
    cartTotal: {
        container: {
            gap: 10,
            css: css`
                padding: 0;
                background-color: transparent;
            `,
        },
    },
    notesContainer: {
        css: css`
            flex-direction: column;
            margin-top: 15px;
        `,
    },
    notesTitle: {
        variant: "h6",
        css: css`
            margin-bottom: 5px;
        `,
    },
};

const styles = orderSummaryStyles;

const OnePageCheckoutConfirmationOrderSummary = ({
    cart,
    promotions,
    orderPromotions,
    shippingPromotions,
    discountTotal,
}: Props) => {
    if (!cart || !promotions) {
        return null;
    }

    return (
        <StyledWrapper {...styles.container}>
            <CartTotalDisplay
                cart={cart}
                orderPromotions={orderPromotions}
                shippingPromotions={shippingPromotions}
                discountTotal={discountTotal}
                extendedStyles={styles.cartTotal}
            />
            {cart.notes && (
                <StyledWrapper {...styles.notesContainer}>
                    <Typography {...styles.notesTitle}>{translate("Notes")}</Typography>
                    <Typography {...styles.notesText}>{cart.notes}</Typography>
                </StyledWrapper>
            )}
        </StyledWrapper>
    );
};

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

export default widgetModule;
