import mergeToNew from "@insite/client-framework/Common/mergeToNew";
import siteMessage from "@insite/client-framework/SiteMessage";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { getPageLinkByPageType } from "@insite/client-framework/Store/Links/LinksSelectors";
import translate from "@insite/client-framework/Translate";
import Button, { ButtonPresentationProps } from "@insite/mobius/Button";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
import Link, { LinkPresentationProps } from "@insite/mobius/Link";
import Modal, { ModalPresentationProps } from "@insite/mobius/Modal";
import Typography, { TypographyProps } from "@insite/mobius/Typography";
import { HasHistory, withHistory } from "@insite/mobius/utilities/HistoryContext";
import React from "react";
import { connect } from "react-redux";
import { css } from "styled-components";

const mapStateToProps = (state: ApplicationState) => {
    return {
        cartPageLink: getPageLinkByPageType(state, "CartPage")?.url,
    };
};

interface OwnProps {
    modalIsOpen: boolean;
    vmiLocationId: string;
    cartLocationName: string;
    extendedStyles?: VmiCartRemovalConfirmStyles;
    onCancel: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
    onSubmit: (vmiLocationId: string) => void;
    onClose?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
}

type Props = OwnProps & ReturnType<typeof mapStateToProps> & HasHistory;

export interface VmiCartRemovalConfirmStyles {
    modal?: ModalPresentationProps;
    container?: GridContainerProps;
    textGridItem?: GridItemProps;
    messageText?: TypographyProps;
    buttonsGridItem?: GridItemProps;
    cancelLink?: LinkPresentationProps;
    submitButton?: ButtonPresentationProps;
    navigateToCartButton?: ButtonPresentationProps;
}

export const cartRemovalConfirmStyles: VmiCartRemovalConfirmStyles = {
    modal: {
        sizeVariant: "small",
    },
    textGridItem: {
        width: 12,
    },
    buttonsGridItem: {
        width: 12,
        css: css`
            justify-content: flex-end;
        `,
    },
    cancelLink: {
        css: css`
            margin: 9px 20px;
            white-space: nowrap;
        `,
    },
    navigateToCartButton: {
        variant: "secondary",
        css: css`
            margin-right: 10px;
        `,
    },
    submitButton: {
        color: "primary",
    },
};

class VmiCartRemovalConfirmModal extends React.Component<Props> {
    private readonly styles: VmiCartRemovalConfirmStyles;

    constructor(props: Props) {
        super(props);

        this.styles = mergeToNew(cartRemovalConfirmStyles, props.extendedStyles);
    }

    navigateToCartHandler = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
        e.preventDefault();
        this.props.history.push(this.props.cartPageLink ?? "");
    };

    formCancelHandler = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
        e.preventDefault();
        this.props.onCancel(e);
    };

    formSubmitHandler = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
        e.preventDefault();
        this.props.onSubmit(this.props.vmiLocationId);
    };

    formCloseHandler = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
        e.preventDefault();
        if (this.props.onClose) {
            this.props.onClose(e);
        } else {
            this.props.onCancel(e);
        }
    };

    render() {
        const styles = this.styles;

        return (
            <Modal
                headline={translate("Items in Cart")}
                {...styles.modal}
                isOpen={this.props.modalIsOpen}
                handleClose={this.formCloseHandler}
            >
                <GridContainer {...styles.container}>
                    <GridItem {...styles.textGridItem}>
                        <Typography
                            {...styles.messageText}
                            data-test-selector="vmiCartRemovalConfirm_locationChangeMessage"
                        >
                            {siteMessage("Vmi_Cart_Location_Changes", this.props.cartLocationName ?? "").toString()}
                        </Typography>
                    </GridItem>
                    <GridItem {...styles.textGridItem}>
                        <Typography {...styles.messageText} data-test-selector="vmiCartRemovalConfirm_continueMessage">
                            {translate("Would you like to continue?")}
                        </Typography>
                    </GridItem>
                    <GridItem {...styles.buttonsGridItem}>
                        <Link {...styles.cancelLink} onClick={this.formCancelHandler}>
                            {translate("Cancel")}
                        </Link>
                        <Button {...styles.navigateToCartButton} onClick={this.navigateToCartHandler}>
                            {translate("Go to Cart")}
                        </Button>
                        <Button
                            {...styles.submitButton}
                            onClick={this.formSubmitHandler}
                            data-test-selector="vmiCartRemovalConfirm_continue"
                        >
                            {translate("Continue")}
                        </Button>
                    </GridItem>
                </GridContainer>
            </Modal>
        );
    }
}

export default connect(mapStateToProps)(withHistory(VmiCartRemovalConfirmModal));
