import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { getSettingsCollection } from "@insite/client-framework/Store/Context/ContextSelectors";
import { getCartState } from "@insite/client-framework/Store/Data/Carts/CartsSelector";
import translate from "@insite/client-framework/Translate";
import WidgetModule from "@insite/client-framework/Types/WidgetModule";
import WidgetProps from "@insite/client-framework/Types/WidgetProps";
import ProductImage, { ProductImageStyles } from "@insite/content-library/Components/ProductImage";
import ProductPrice, { ProductPriceStyles } from "@insite/content-library/Components/ProductPrice";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
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 { enableVat, vatPriceDisplay } = getSettingsCollection(state).productSettings;
    return {
        cart,
        enableVat,
        vatPriceDisplay,
    };
};

type Props = WidgetProps & ReturnType<typeof mapStateToProps>;

export interface OnePageCheckoutConfirmationProductListStyles {
    listContainer?: InjectableCss;
    itemContainer?: GridContainerProps;
    productImageGridItem?: GridItemProps;
    productImage?: ProductImageStyles;
    productInfoGridItem?: GridItemProps;
    productDescriptionText?: TypographyPresentationProps;
    productErpNumberText?: TypographyPresentationProps;
    qtyOrderedText?: TypographyPresentationProps;
    productPrice?: ProductPriceStyles;
    subtotalGridItem?: GridItemProps;
    subtotalText?: TypographyPresentationProps;
}

export const productListStyles: OnePageCheckoutConfirmationProductListStyles = {
    productImageGridItem: { width: 2 },
    productInfoGridItem: {
        width: 8,
        css: css`
            flex-direction: column;
        `,
    },
    qtyOrderedText: { size: 13, transform: "capitalize" },
    productPrice: {
        wrapper: {
            css: css`
                flex-direction: row;
                align-items: end;
            `,
        },
        priceLabelText: {
            variant: "p",
            size: 13,
            css: css`
                margin-right: 5px;
                margin-bottom: 0;
            `,
        },
        price: {
            priceText: { size: 13, weight: "normal" },
            unitOfMeasure: {
                unitOfMeasureText: { size: 13 },
            },
        },
    },
    subtotalGridItem: {
        width: 2,
        css: css`
            justify-content: end;
        `,
    },
};

const styles = productListStyles;

const OnePageCheckoutConfirmationProductList = ({ cart, enableVat, vatPriceDisplay }: Props) => {
    if (!cart) {
        return null;
    }

    return (
        <StyledWrapper {...styles.listContainer}>
            {cart.cartLines?.map(cartLine => (
                <GridContainer
                    {...styles.itemContainer}
                    key={cartLine.id}
                    data-test-selector={`product_${cartLine.erpNumber}`}
                >
                    <GridItem {...styles.productImageGridItem}>
                        <ProductImage product={cartLine} extendedStyles={styles.productImage} />
                    </GridItem>
                    <GridItem {...styles.productInfoGridItem}>
                        <Typography {...styles.productDescriptionText} data-test-selector="productTitle">
                            {cartLine.shortDescription}
                        </Typography>
                        <Typography {...styles.productErpNumberText} data-test-selector="productNumber">
                            {cartLine.erpNumber}
                        </Typography>
                        <Typography {...styles.qtyOrderedText} data-test-selector="productQuantity">
                            {translate("QTY").toLowerCase()}: {cartLine.qtyOrdered}
                        </Typography>
                        <ProductPrice
                            product={cartLine}
                            label={`${translate("Unit price")}:`}
                            currencySymbol={cart.currencySymbol}
                            extendedStyles={styles.productPrice}
                            data-test-selector="productUnitPrice"
                        />
                    </GridItem>
                    <GridItem {...styles.subtotalGridItem}>
                        <Typography {...styles.subtotalText} data-test-selector="productSubTotalPrice">
                            {enableVat && vatPriceDisplay !== "DisplayWithoutVat"
                                ? cartLine.pricing!.extendedUnitRegularPriceWithVatDisplay
                                : cartLine.pricing!.extendedUnitNetPriceDisplay}
                        </Typography>
                    </GridItem>
                </GridContainer>
            ))}
        </StyledWrapper>
    );
};

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

export default widgetModule;
