import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import { HasCartContext, withCart } from "@insite/client-framework/Components/CartContext";
import siteMessage from "@insite/client-framework/SiteMessage";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { getCurrentAccountState } from "@insite/client-framework/Store/Data/Accounts/AccountsSelector";
import translate from "@insite/client-framework/Translate";
import WidgetModule from "@insite/client-framework/Types/WidgetModule";
import WidgetProps from "@insite/client-framework/Types/WidgetProps";
import OrderApprovalDetailsActionButtons, {
    OrderApprovalDetailsActionButtonsStyles,
} from "@insite/content-library/Widgets/OrderApprovalDetails/OrderApprovalDetailsActionButtons";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
import Typography, { TypographyPresentationProps, TypographyProps } from "@insite/mobius/Typography";
import getColor from "@insite/mobius/utilities/getColor";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import VisuallyHidden from "@insite/mobius/VisuallyHidden";
import React from "react";
import { css } from "styled-components";
import { connect } from "react-redux";

export interface OrderApprovalDetailsHeaderStyles {
    headerGridContainer?: GridContainerProps;
    title?: TypographyProps;
    orderNumberText?: TypographyProps;
    titleGridItem?: GridItemProps;
    buttonGridItem?: GridItemProps;
    orderApprovalDetailsActionButtonsStyles?: OrderApprovalDetailsActionButtonsStyles;
    messageGridItem?: GridItemProps;
    messageWrapper?: InjectableCss;
    messageText?: TypographyPresentationProps;
}

export const headerStyles: OrderApprovalDetailsHeaderStyles = {
    headerGridContainer: {
        gap: 10,
    },
    buttonGridItem: {
        css: css`
            justify-content: flex-end;
        `,
        width: [2, 2, 2, 9, 8],
    },
    titleGridItem: {
        width: [10, 10, 10, 3, 4],
    },
    title: {
        variant: "h3",
        as: "p",
        css: css`
            @media print {
                font-size: 11px;
            }
        `,
    },
    messageGridItem: {
        width: 12,
        css: css`
            @media print {
                display: none;
            }
        `,
    },
    messageWrapper: {
        css: css`
            width: 100%;
            text-align: center;
            padding: 10px;
            margin-bottom: 20px;
            background-color: ${getColor("info.main")};
        `,
    },
};

const styles = headerStyles;

const mapStateToProps = (state: ApplicationState) => ({
    account: getCurrentAccountState(state)?.value,
});

type Props = WidgetProps & HasCartContext & ReturnType<typeof mapStateToProps>;

const OrderApprovalDetailsHeader = ({ cart, account }: Props) => {
    if (!cart || !account) {
        return null;
    }

    return (
        <GridContainer {...styles.headerGridContainer}>
            <GridItem {...styles.titleGridItem}>
                <Typography {...styles.title}>
                    <span aria-hidden>{translate("Order #")}&nbsp;</span>
                    <VisuallyHidden>{translate("Order Number")}</VisuallyHidden>
                    <Typography {...styles.orderNumberText} data-test-selector="orderApprovalDetails_orderNumber">
                        {cart.orderNumber}
                    </Typography>
                </Typography>
            </GridItem>
            <GridItem {...styles.buttonGridItem}>
                <OrderApprovalDetailsActionButtons
                    cart={cart}
                    extendedStyles={styles.orderApprovalDetailsActionButtonsStyles}
                />
            </GridItem>
            {cart.orderApprovalStatus === "EditingInProcess" && account.canApproveOrders && (
                <GridItem {...styles.messageGridItem}>
                    <StyledWrapper {...styles.messageWrapper}>
                        <Typography {...styles.messageText}>
                            {siteMessage("OrderApproval_BuyerIsEditingOrder")}
                        </Typography>
                    </StyledWrapper>
                </GridItem>
            )}
            {cart.orderApprovalStatus === "ApprovalInProcess" && !account.canApproveOrders && (
                <GridItem {...styles.messageGridItem}>
                    <StyledWrapper {...styles.messageWrapper}>
                        <Typography {...styles.messageText}>
                            {siteMessage("OrderApproval_ApproverIsApprovingOrder")}
                        </Typography>
                    </StyledWrapper>
                </GridItem>
            )}
        </GridContainer>
    );
};

const widgetModule: WidgetModule = {
    component: connect(mapStateToProps)(withCart(OrderApprovalDetailsHeader)),
    definition: {
        displayName: "Page Header",
        allowedContexts: ["OrderApprovalDetailsPage"],
        group: "Order Approval Details",
    },
};

export default widgetModule;
