import { FulfillmentMethod } from "@insite/client-framework/Services/SessionService";
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 { getShipToState } from "@insite/client-framework/Store/Data/ShipTos/ShipTosSelectors";
import translate from "@insite/client-framework/Translate";
import WidgetModule from "@insite/client-framework/Types/WidgetModule";
import WidgetProps from "@insite/client-framework/Types/WidgetProps";
import AddressInfoDisplay, { AddressInfoDisplayStyles } from "@insite/content-library/Components/AddressInfoDisplay";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
import Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
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;
    return {
        cart,
        billTo: getBillToState(state, cart?.billToId)?.value,
        shipTo: getShipToState(state, cart?.shipToId)?.value,
    };
};

type Props = WidgetProps & ReturnType<typeof mapStateToProps>;

export interface OnePageCheckoutConfirmationBillingAndShippingStyles {
    container?: GridContainerProps;
    shipToGridItem?: GridItemProps;
    shipToTitleText?: TypographyPresentationProps;
    shipToText?: TypographyPresentationProps;
    shipToAddress?: AddressInfoDisplayStyles;
    pickUpGridItem?: GridItemProps;
    pickUpTitleText?: TypographyPresentationProps;
    pickUpText?: TypographyPresentationProps;
    pickUpAddress?: AddressInfoDisplayStyles;
    billToGridItem?: GridItemProps;
    billToTitleText?: TypographyPresentationProps;
    billToText?: TypographyPresentationProps;
}

export const billingAndShippingStyles: OnePageCheckoutConfirmationBillingAndShippingStyles = {
    container: { gap: 20 },
    shipToGridItem: {
        width: 12,
        css: css`
            flex-direction: column;
        `,
    },
    shipToTitleText: {
        variant: "h6",
        css: css`
            margin-bottom: 5px;
        `,
    },
    pickUpGridItem: {
        width: 12,
        css: css`
            flex-direction: column;
        `,
    },
    pickUpTitleText: {
        variant: "h6",
        css: css`
            margin-bottom: 5px;
        `,
    },
    billToGridItem: {
        width: 12,
        css: css`
            flex-direction: column;
        `,
    },
    billToTitleText: {
        variant: "h6",
        css: css`
            margin-bottom: 5px;
        `,
    },
};

const styles = billingAndShippingStyles;

const OnePageCheckoutConfirmationBillingAndShipping = ({ cart, billTo, shipTo }: Props) => {
    if (!cart || !billTo || !shipTo) {
        return null;
    }

    return (
        <GridContainer {...styles.container}>
            {cart.fulfillmentMethod === FulfillmentMethod.Ship && (
                <GridItem
                    {...styles.shipToGridItem}
                    data-test-selector="onePageCheckOutConfirmationShippingInformation"
                >
                    <Typography as="h3" {...styles.shipToTitleText}>
                        {translate("Shipped to")}
                    </Typography>
                    <AddressInfoDisplay
                        {...shipTo}
                        state={shipTo.state?.abbreviation}
                        country={shipTo.country?.name}
                        extendedStyles={styles.shipToAddress}
                    />
                </GridItem>
            )}
            {cart.fulfillmentMethod === FulfillmentMethod.PickUp && cart.defaultWarehouse && (
                <GridItem {...styles.pickUpGridItem}>
                    <Typography as="h3" {...styles.pickUpTitleText}>
                        {translate("Pick Up Location")}
                    </Typography>
                    <AddressInfoDisplay
                        {...cart.defaultWarehouse}
                        companyName={cart.defaultWarehouse?.description || cart.defaultWarehouse?.name}
                        extendedStyles={styles.pickUpAddress}
                    />
                </GridItem>
            )}
            <GridItem {...styles.billToGridItem} data-test-selector="onePageCheckOutConfirmationBillingInformation">
                <Typography as="h3" {...styles.billToTitleText}>
                    {translate("Billed to")}
                </Typography>
                <Typography as="p" {...styles.billToText}>
                    <AddressInfoDisplay {...billTo} state={billTo.state?.abbreviation} country={billTo.country?.name} />
                </Typography>
            </GridItem>
        </GridContainer>
    );
};

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

export default widgetModule;
