import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { getCartState } 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 Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
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,
    };
};

type Props = WidgetProps & ReturnType<typeof mapStateToProps>;

export interface OnePageCheckoutConfirmationPaymentMethodStyles {
    container?: InjectableCss;
    paymentMethodTitleText?: TypographyPresentationProps;
    paymentMethodText?: TypographyPresentationProps;
}

export const paymentMethodStyles: OnePageCheckoutConfirmationPaymentMethodStyles = {
    container: {
        css: css`
            flex-direction: column;
            margin-top: 15px;
        `,
    },
    paymentMethodTitleText: {
        variant: "h6",
        css: css`
            margin-bottom: 5px;
        `,
    },
};

const styles = paymentMethodStyles;

const OnePageCheckoutConfirmationPaymentMethod = ({ cart }: Props) => {
    if (!cart) {
        return null;
    }

    return (
        <StyledWrapper {...styles.container}>
            <Typography as="h3" {...styles.paymentMethodTitleText}>
                {translate("Payment Method")}
            </Typography>
            <Typography {...styles.paymentMethodText}>
                {cart.paymentMethod?.description || cart.paymentMethod?.name}
            </Typography>
        </StyledWrapper>
    );
};

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

export default widgetModule;
