import { getCookie } from "@insite/client-framework/Common/Cookies";
import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import Zone from "@insite/client-framework/Components/Zone";
import siteMessage from "@insite/client-framework/SiteMessage";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { getCurrentCartState, isCartEmpty } 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 { NavigationModeCookieName } from "@insite/content-library/Components/NavigationModeMenu";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
import Icon, { IconPresentationProps } from "@insite/mobius/Icon";
import Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
import getColor from "@insite/mobius/utilities/getColor";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import React, { FC } from "react";
import { connect } from "react-redux";
import { css } from "styled-components";

type Props = WidgetProps & ReturnType<typeof mapStateToProps>;

export interface CartHeaderStyles {
    container?: GridContainerProps;
    gridItem1?: GridItemProps;
    gridItem2?: GridItemProps;
    approverInfoGridItem?: GridItemProps;
    vmiInfoGridItem?: GridItemProps;
    vmiMessageWrapper?: InjectableCss;
    vmiMessageText?: TypographyPresentationProps;
    warningIcon?: IconPresentationProps;
    approvalEditWrapper?: InjectableCss;
    approvalEditText?: TypographyPresentationProps;
}

const mapStateToProps = (state: ApplicationState) => {
    const cart = getCurrentCartState(state).value;
    return {
        cart,
        isCartEmpty: isCartEmpty(cart),
        isAuthenticated: state.context?.session?.isAuthenticated && !state.context?.session?.isGuest,
        isApprovalEditDraft: cart?.status === "AwaitingApprovalEditDraft",
    };
};

export const cartHeaderStyles: CartHeaderStyles = {
    gridItem1: {
        width: [10, 10, 8, 9, 9],
    },
    gridItem2: {
        width: [2, 2, 4, 3, 3],
    },
    approverInfoGridItem: {
        width: 12,
        css: css`
            padding: 0 15px;
            flex-direction: column;
        `,
    },
    vmiInfoGridItem: {
        width: 12,
        css: css`
            padding: 0 15px;
        `,
    },
    vmiMessageWrapper: {
        css: css`
            border: 2px solid ${getColor("danger.main")};
            padding: 10px 10px;
            display: flex;
            width: 100%;
            margin: 15px 0;
        `,
    },
    vmiMessageText: {
        css: css`
            width: 100%;
        `,
    },
    warningIcon: {
        src: "AlertCircle",
        color: "danger.main",
        css: css`
            margin-right: 10px;
        `,
    },
    approvalEditWrapper: {
        css: css`
            width: 100%;
            text-align: center;
            padding: 10px;
            margin-bottom: 10px;
            background-color: ${getColor("info.main")};
        `,
    },
    approvalEditText: {
        css: css`
            width: 100%;
        `,
    },
};

const styles = cartHeaderStyles;

const CartHeader: FC<Props> = ({ id, cart, isCartEmpty, isAuthenticated, isApprovalEditDraft }) => {
    const currentMode = getCookie(NavigationModeCookieName);
    const shouldShowVmiMessage = !isCartEmpty && isAuthenticated && currentMode === "Vmi";
    const shouldShowApprovalEditMessage = !isCartEmpty && isAuthenticated && isApprovalEditDraft;
    return (
        <GridContainer {...styles.container}>
            <GridItem {...styles.gridItem1}>
                <Zone contentId={id} zoneName="Content0" />
            </GridItem>
            <GridItem {...styles.gridItem2}>
                <Zone contentId={id} zoneName="Content1" />
            </GridItem>
            <GridItem {...styles.approverInfoGridItem}>
                {cart && shouldShowApprovalEditMessage && (
                    <StyledWrapper {...styles.approvalEditWrapper}>
                        <Typography {...styles.approvalEditText} data-test-selector="cart_approvalEditMessage">
                            {translate("You are editing order #{0}", cart.orderNumber.split("_")[0])}
                        </Typography>
                    </StyledWrapper>
                )}
                <Zone contentId={id} zoneName="Content2" />
            </GridItem>
            <GridItem {...styles.vmiInfoGridItem}>
                {shouldShowVmiMessage && (
                    <StyledWrapper {...styles.vmiMessageWrapper}>
                        <Icon {...styles.warningIcon}></Icon>
                        <Typography {...styles.vmiMessageText} data-test-selector="cartHeader_warningCartViewOnVmi">
                            {siteMessage("Cart_View_On_Vmi")}
                        </Typography>
                    </StyledWrapper>
                )}
            </GridItem>
        </GridContainer>
    );
};

const widgetModule: WidgetModule = {
    component: connect(mapStateToProps)(CartHeader),
    definition: {
        group: "Cart",
        displayName: "Page Header",
        allowedContexts: ["CartPage"],
    },
};

export default widgetModule;
