import useAppDispatch from "@insite/client-framework/Common/Hooks/useAppDispatch";
import useAppSelector from "@insite/client-framework/Common/Hooks/useAppSelector";
import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import siteMessage from "@insite/client-framework/SiteMessage";
import { getCurrentUserIsGuest } from "@insite/client-framework/Store/Context/ContextSelectors";
import { getCartState } from "@insite/client-framework/Store/Data/Carts/CartsSelector";
import { getOrderState } from "@insite/client-framework/Store/Data/Orders/OrdersSelectors";
import { getCurrentPage } from "@insite/client-framework/Store/Data/Pages/PageSelectors";
import { getPageLinkByPageType } from "@insite/client-framework/Store/Links/LinksSelectors";
import resetOrderCanceled from "@insite/client-framework/Store/Pages/OrderDetails/Handlers/ResetOrderCanceled";
import WidgetModule from "@insite/client-framework/Types/WidgetModule";
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, { useEffect } from "react";
import { css } from "styled-components";

export interface OrderCancelNotificationStyles {
    container?: GridContainerProps;
    infoGridItem?: GridItemProps;
    messageWrapper?: InjectableCss;
    messageText?: TypographyPresentationProps;
}

export const orderCancelNotificationStyles: OrderCancelNotificationStyles = {
    container: {
        css: css`
            margin: 15px 0;
        `,
    },
    infoGridItem: {
        width: 12,
        css: css`
            padding: 0 15px;
        `,
    },
    messageWrapper: {
        css: css`
            background-color: #ffe9e9;
            text-align: center;
            padding: 15px;
            margin: 15px 0;
            display: flex;
            width: 100%;
        `,
    },
    messageText: {
        css: css`
            width: 100%;
        `,
    },
};

const styles = orderCancelNotificationStyles;

const OrderCancelNotification = () => {
    const cartState = useAppSelector(state =>
        getCartState(state, state.pages.orderConfirmation.cartId ?? state.pages.onePageCheckoutConfirmation.cartId),
    );
    const order = useAppSelector(
        state => getOrderState(state, state.pages.orderDetails?.orderNumber || cartState.value?.orderNumber).value,
    );
    const orderNumber = order?.webOrderNumber || order?.erpOrderNumber;
    const isCanceled = useAppSelector(state => state.pages.orderDetails.isCanceled);
    const currentUserIsGuest = useAppSelector(state => getCurrentUserIsGuest(state));
    const orderDetailsPageUrl = useAppSelector(state =>
        currentUserIsGuest
            ? `${getPageLinkByPageType(state, "OrderStatusPage")?.url}?orderNumber=${orderNumber}&stPostalCode=${
                  order?.shipToPostalCode
              }`
            : `${getPageLinkByPageType(state, "OrderDetailsPage")?.url}?orderNumber=${orderNumber}`,
    );
    const isOrderDetailsPage = useAppSelector(state => getCurrentPage(state).type === "OrderDetailsPage");
    const dispatch = useAppDispatch();

    useEffect(() => {
        return () => {
            // Component unmounted
            dispatch(resetOrderCanceled());
        };
    }, []);

    if (!order || !isCanceled) {
        return null;
    }

    const notificationMessage = isOrderDetailsPage
        ? siteMessage("Order_CancellationRequested_SeeStatusBelow")
        : siteMessage("Order_CancellationRequested_CheckStatusByUri", orderDetailsPageUrl);

    return (
        <GridContainer {...styles.container}>
            <GridItem {...styles.infoGridItem}>
                <StyledWrapper {...styles.messageWrapper}>
                    <Typography {...styles.messageText}>{notificationMessage}</Typography>
                </StyledWrapper>
            </GridItem>
        </GridContainer>
    );
};

const widgetModule: WidgetModule = {
    component: OrderCancelNotification,
    definition: {
        allowedContexts: [
            "OrderDetailsPage",
            "VmiOrderDetailsPage",
            "OrderConfirmationPage",
            "OnePageCheckoutConfirmationPage",
        ],
        group: "Order Details",
        displayName: "Order Cancel Notification",
    },
};

export default widgetModule;
