import openPrintDialog from "@insite/client-framework/Common/Utilities/openPrintDialog";
import { FulfillmentMethod } from "@insite/client-framework/Services/SessionService";
import siteMessage from "@insite/client-framework/SiteMessage";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { getBillToState } from "@insite/client-framework/Store/Data/BillTos/BillTosSelectors";
import { getCartState } from "@insite/client-framework/Store/Data/Carts/CartsSelector";
import { getHomePageUrl } 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 LocalizedDateTime from "@insite/content-library/Components/LocalizedDateTime";
import Button, { ButtonPresentationProps } from "@insite/mobius/Button";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
import Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
import getColor from "@insite/mobius/utilities/getColor";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import React from "react";
import { connect } from "react-redux";
import styled, { css } from "styled-components";

const mapStateToProps = (state: ApplicationState) => {
    const cart = getCartState(state, state.pages.onePageCheckoutConfirmation.cartId)?.value;
    return {
        cart,
        billTo: getBillToState(state, cart?.billToId)?.value,
        homePageUrl: getHomePageUrl(state),
    };
};

type Props = WidgetProps & ReturnType<typeof mapStateToProps>;

export interface OnePageCheckoutConfirmationHeaderStyles {
    container?: GridContainerProps;
    titleGridItem?: GridItemProps;
    titleText?: TypographyPresentationProps;
    emailSentText?: TypographyPresentationProps;
    divider?: InjectableCss;
    orderInfoGridItem?: GridItemProps;
    orderNumberText?: TypographyPresentationProps;
    orderPlacedText?: TypographyPresentationProps;
    deliveryMethodText?: TypographyPresentationProps;
    buttonsGridItem?: GridItemProps;
    printButton?: ButtonPresentationProps;
}

export const headerStyles: OnePageCheckoutConfirmationHeaderStyles = {
    titleGridItem: {
        width: 12,
        css: css`
            flex-direction: column;
        `,
    },
    titleText: {
        variant: "h2",
    },
    divider: {
        css: css`
            padding: 15px;
            height: 100%;
            width: 100%;
            overflow: hidden;
            border-bottom: 1px solid ${getColor("common.border")};
        `,
    },
    orderInfoGridItem: {
        width: [8, 8, 10, 10, 10],
        css: css`
            flex-direction: column;
        `,
    },
    deliveryMethodText: {
        css: css`
            margin-top: 10px;
        `,
    },
    orderNumberText: { variant: "h5" },
    buttonsGridItem: {
        width: [4, 4, 2, 2, 2],
        css: css`
            justify-content: flex-end;
        `,
    },
    printButton: {
        buttonType: "outline",
        variant: "secondary",
    },
};

const styles = headerStyles;

const Divider = styled.div`
    ${styles.divider?.css}
`;

const OnePageCheckoutConfirmationHeader = ({ cart, billTo }: Props) => {
    const printOrOpenPrintAllModal = () => {
        openPrintDialog();
    };

    if (!cart || !billTo) {
        return null;
    }

    return (
        <GridContainer {...styles.container}>
            <GridItem {...styles.titleGridItem}>
                <Typography as="h2" {...styles.titleText} data-test-selector="orderConfirmation_Success">
                    {siteMessage("OrderConfirmation_Success")}
                </Typography>
                <Typography as="p" {...styles.emailSentText} data-test-selector="orderConfirmation_EmailSent">
                    {siteMessage("OrderConfirmation_EmailSent", billTo.email)}
                </Typography>
                <Divider />
            </GridItem>
            <GridItem {...styles.orderInfoGridItem}>
                <Typography as="h3" {...styles.orderNumberText} data-test-selector="orderConfirmation_orderNumber">
                    {translate("Order Number")} - {cart.erpOrderNumber || cart.orderNumber}
                </Typography>
                <Typography as="p" {...styles.orderPlacedText} data-test-selector="orderConfirmation_orderPlaced">
                    {translate("Order placed")}:&nbsp;
                    <LocalizedDateTime
                        dateTime={cart.orderDate}
                        options={{ year: "numeric", month: "numeric", day: "numeric" }}
                    />
                </Typography>
                <Typography as="p" {...styles.deliveryMethodText} data-test-selector="orderConfirmation_deliveryMethod">
                    {translate("Delivery method")}:&nbsp;
                    {cart.fulfillmentMethod === FulfillmentMethod.PickUp
                        ? translate("Store pickup at ") +
                          (cart.defaultWarehouse?.description || cart.defaultWarehouse?.name || "")
                        : cart.carrier && cart.shipVia
                        ? `${translate("Ship to home via")} ${cart.carrier.description} - ${cart.shipVia.description}`
                        : translate("Ship to home")}
                </Typography>
            </GridItem>
            <GridItem {...styles.buttonsGridItem}>
                <Button
                    {...styles.printButton}
                    onClick={printOrOpenPrintAllModal}
                    data-test-selector="orderConfirmation_printButton"
                >
                    {translate("Print")}
                </Button>
            </GridItem>
        </GridContainer>
    );
};

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

export default widgetModule;
