import Zone from "@insite/client-framework/Components/Zone";
import { Cart } from "@insite/client-framework/Services/CartService";
import translate from "@insite/client-framework/Translate";
import WidgetModule from "@insite/client-framework/Types/WidgetModule";
import WidgetProps from "@insite/client-framework/Types/WidgetProps";
import Button, { ButtonPresentationProps } from "@insite/mobius/Button";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
import TextField, { TextFieldPresentationProps } from "@insite/mobius/TextField";
import Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
import getColor from "@insite/mobius/utilities/getColor";
import * as React from "react";
import styled, { css } from "styled-components";

const enum fields {
    addDiscount = "addDiscount",
    addToList = "addToList",
    saveOrder = "saveOrder",
}

interface OwnProps extends WidgetProps {
    fields: {
        [fields.addDiscount]: boolean;
        [fields.addToList]: boolean;
        [fields.saveOrder]: boolean;
    };
}

type Props = OwnProps;

interface CartStyles {
    container?: GridContainerProps;
    titleGridItem?: GridItemProps;
    titleText?: TypographyPresentationProps;
    totalGridItem?: GridItemProps;
    totalContainer?: GridContainerProps;
    totalLabelGridItem?: GridItemProps;
    totalLabel?: TypographyPresentationProps;
    totalValueGridItem?: GridItemProps;
    totalValue?: TypographyPresentationProps;
    subtotalValue?: TypographyPresentationProps;
    totalLabelText?: TypographyPresentationProps;
    totalValueText?: TypographyPresentationProps;
    discountButtonGridItem?: GridItemProps;
    addDiscountButton?: ButtonPresentationProps;
    shippingMethodGridItem?: GridItemProps;
    shippingMethodContainer?: GridContainerProps;
    blockLabelGridItem?: GridItemProps;
    blockLabel?: TypographyPresentationProps;
    shippingMethodButtonsGridItem?: GridItemProps;
    shipButton?: ButtonPresentationProps;
    pickUpButton?: ButtonPresentationProps;
    cartLinesGridItem?: GridItemProps;
    cartLinesContainer?: GridContainerProps;
    cartLineGridItem?: GridItemProps;
    cartLineContainer?: GridContainerProps;
    productLeftGridItem?: GridItemProps;
    productRightGridItem?: GridItemProps;
    productDescriptionContainer?: GridContainerProps;
    productDescriptionText?: TypographyPresentationProps;
    productAttributesText?: TypographyPresentationProps;
    productPriceText?: TypographyPresentationProps;
    productUOMText?: TypographyPresentationProps;
    productDescriptionGridItem?: GridItemProps;
    productAttributesGridItem?: GridItemProps;
    productPriceGridItem?: GridItemProps;
    qtyGridItem?: GridItemProps;
    qtyTextField?: TextFieldPresentationProps;
    subtotalGridItem?: GridItemProps;
    subtotalLabelText?: TypographyPresentationProps;
    subtotalText?: TypographyPresentationProps;
    actionButtonsGridItem?: GridItemProps;
    actionButtonsContainer?: GridContainerProps;
    actionButtonGridItem?: GridItemProps;
    actionButton?: ButtonPresentationProps;
    checkoutButtonGridItem?: GridItemProps;
    checkoutButton?: ButtonPresentationProps;
}

const cartStyles: CartStyles = {
    titleGridItem: {
        width: 12,
        css: css`
            justify-content: center;
        `,
    },
    titleText: {
        css: css`
            font-size: 17px;
        `,
    },
    totalGridItem: { width: 12 },
    totalContainer: { gap: 4 },
    totalLabelGridItem: { width: 8 },
    totalValueGridItem: {
        width: 4,
        css: css`
            justify-content: end;
        `,
    },
    subtotalValue: { weight: "bold" },
    totalLabelText: { weight: "bold" },
    totalValueText: { weight: "bold" },
    discountButtonGridItem: { width: 12 },
    addDiscountButton: {
        variant: "secondary",
        css: css`
            width: 100%;
            margin-top: 10px;
            min-height: 32px;
        `,
    },
    shippingMethodGridItem: { width: 12 },
    shippingMethodContainer: { gap: 0 },
    blockLabelGridItem: {
        width: 12,
        css: css`
            border-bottom: 1px solid ${getColor("common.border")};
            padding-bottom: 3px;
        `,
    },
    blockLabel: {
        css: css`
            color: ${getColor("common.border")};
            text-transform: uppercase;
        `,
    },
    shippingMethodButtonsGridItem: {
        width: 12,
        css: css`
            justify-content: space-between;
            gap: 12px;
            padding-top: 8px;
        `,
    },
    shipButton: {
        css: css`
            flex-grow: 1;
            min-height: 32px;
            border-radius: 4px;
        `,
    },
    pickUpButton: {
        variant: "secondary",
        css: css`
            flex-grow: 1;
            min-height: 32px;
            border-radius: 4px;
        `,
    },
    cartLinesGridItem: { width: 12 },
    cartLinesContainer: { gap: 0 },
    cartLineGridItem: {
        width: 12,
        css: css`
            padding-top: 8px;
        `,
    },
    productLeftGridItem: { width: 4 },
    productRightGridItem: {
        width: 8,
        css: css`
            flex-direction: column;
        `,
    },
    productDescriptionContainer: { gap: 3 },
    productDescriptionGridItem: { width: 12 },
    productAttributesGridItem: { width: 12 },
    productAttributesText: {
        css: css`
            font-size: 13px;
        `,
    },
    productPriceText: { weight: "bold" },
    productPriceGridItem: { width: 12 },
    qtyGridItem: { width: 5 },
    subtotalGridItem: {
        width: 7,
        css: css`
            flex-direction: column;
            align-items: flex-start;
            padding-left: 15px;
            gap: 18px;
            font-weight: bold;
        `,
    },
    actionButtonsGridItem: { width: 12 },
    actionButtonsContainer: { gap: 4 },
    actionButtonGridItem: { width: 12 },
    actionButton: {
        variant: "secondary",
        color: "primary.main",
        css: css`
            width: 100%;
            min-height: 32px;
            border-radius: 4px;
        `,
    },
    checkoutButtonGridItem: { width: 12 },
    checkoutButton: {
        css: css`
            width: 100%;
            min-height: 32px;
            border-radius: 4px;
            margin: 10px 0;
        `,
    },
};

const ProductImage = styled.div`
    width: 95px;
    height: 95px;
    background-color: #e0e0e0;
`;

const styles = cartStyles;

// eslint-disable-next-line no-import-assign
const Cart = ({ fields: { addDiscount, addToList, saveOrder }, id }: Props) => {
    return (
        <GridContainer {...styles.container}>
            <GridItem {...styles.titleGridItem}>
                <Typography {...styles.titleText}>{translate("Cart")}</Typography>
            </GridItem>
            <GridItem {...styles.totalGridItem}>
                <GridContainer {...styles.totalContainer}>
                    <GridItem {...styles.totalLabelGridItem}>
                        <Typography {...styles.totalLabel}>{translate("Subtotal (2 items)")}</Typography>
                    </GridItem>
                    <GridItem {...styles.totalValueGridItem}>
                        <Typography {...styles.subtotalValue}>$140.00</Typography>
                    </GridItem>
                    <GridItem {...styles.totalLabelGridItem}>
                        <Typography {...styles.totalLabel}>{translate("Estimated Shipping & Handling")}</Typography>
                    </GridItem>
                    <GridItem {...styles.totalValueGridItem}>
                        <Typography {...styles.totalValue}>$0.00</Typography>
                    </GridItem>
                    <GridItem {...styles.totalLabelGridItem}>
                        <Typography {...styles.totalLabel}>{translate("Estimated Tax")}</Typography>
                    </GridItem>
                    <GridItem {...styles.totalValueGridItem}>
                        <Typography {...styles.totalValue}>{translate("TBD")}</Typography>
                    </GridItem>
                    <GridItem {...styles.totalLabelGridItem}>
                        <Typography {...styles.totalLabel}>{translate("Discounts")}</Typography>
                    </GridItem>
                    <GridItem {...styles.totalValueGridItem}>
                        <Typography {...styles.totalValue}>$14.00</Typography>
                    </GridItem>
                    <GridItem {...styles.totalLabelGridItem}>
                        <Typography {...styles.totalLabelText}>{translate("Total")}</Typography>
                    </GridItem>
                    <GridItem {...styles.totalValueGridItem}>
                        <Typography {...styles.totalValueText}>$126.00</Typography>
                    </GridItem>
                    {addDiscount && (
                        <GridItem {...styles.discountButtonGridItem}>
                            <Button {...styles.addDiscountButton}>{translate("Add Discount")}</Button>
                        </GridItem>
                    )}
                </GridContainer>
            </GridItem>
            <GridItem {...styles.shippingMethodGridItem}>
                <GridContainer {...styles.shippingMethodContainer}>
                    <GridItem {...styles.blockLabelGridItem}>
                        <Typography {...styles.blockLabel}>{translate("Shipping Method")}</Typography>
                    </GridItem>
                    <GridItem {...styles.shippingMethodButtonsGridItem}>
                        <Button {...styles.shipButton}>{translate("Ship")}</Button>
                        <Button {...styles.pickUpButton}>{translate("Pick Up")}</Button>
                    </GridItem>
                </GridContainer>
            </GridItem>
            <GridItem {...styles.cartLinesGridItem}>
                <GridContainer {...styles.cartLinesContainer}>
                    <GridItem {...styles.blockLabelGridItem}>
                        <Typography {...styles.blockLabel}>{translate("Cart Contents (1 Item)")}</Typography>
                    </GridItem>
                    <GridItem {...styles.cartLineGridItem}>
                        <GridContainer {...styles.cartLineContainer}>
                            <GridItem {...styles.productLeftGridItem}>
                                <ProductImage />
                            </GridItem>
                            <GridItem {...styles.productRightGridItem}>
                                <GridContainer {...styles.productDescriptionContainer}>
                                    <GridItem {...styles.productDescriptionGridItem}>
                                        <Typography {...styles.productDescriptionText}>
                                            {translate("Women's Super Cool Shoes")}
                                        </Typography>
                                    </GridItem>
                                    <GridItem {...styles.productAttributesGridItem}>
                                        <Typography {...styles.productAttributesText}>
                                            {translate("Size 6.5, Color: White")}
                                        </Typography>
                                    </GridItem>
                                    <GridItem {...styles.productPriceGridItem}>
                                        <Typography {...styles.productPriceText}>$70.00</Typography>
                                        <Typography {...styles.productUOMText}>
                                            &nbsp;/&nbsp;{translate("EA")}
                                        </Typography>
                                    </GridItem>
                                    <GridItem {...styles.qtyGridItem}>
                                        <TextField
                                            {...styles.qtyTextField}
                                            type="number"
                                            min={0}
                                            max={999999}
                                            label={translate("QTY")}
                                            value={2}
                                        />
                                    </GridItem>
                                    <GridItem {...styles.subtotalGridItem}>
                                        <Typography {...styles.subtotalLabelText}>{translate("Subtotal")}</Typography>
                                        <Typography {...styles.subtotalText}>$140.00</Typography>
                                    </GridItem>
                                </GridContainer>
                            </GridItem>
                        </GridContainer>
                    </GridItem>
                </GridContainer>
            </GridItem>
            <GridItem {...styles.actionButtonsGridItem}>
                <GridContainer {...styles.actionButtonsContainer}>
                    {addToList && (
                        <GridItem {...styles.actionButtonGridItem}>
                            <Button {...styles.actionButton}>{translate("Add All to List")}</Button>
                        </GridItem>
                    )}
                    {saveOrder && (
                        <GridItem {...styles.actionButtonGridItem}>
                            <Button {...styles.actionButton}>{translate("SaveOrder")}</Button>
                        </GridItem>
                    )}
                    <GridItem {...styles.actionButtonGridItem}>
                        <Button {...styles.actionButton}>{translate("Continue Shopping")}</Button>
                    </GridItem>
                    <GridItem {...styles.actionButtonGridItem}>
                        <Button {...styles.actionButton}>{translate("Clear Cart")}</Button>
                    </GridItem>
                    <Zone contentId={id} zoneName="Content" />
                    <GridItem {...styles.checkoutButtonGridItem}>
                        <Button {...styles.checkoutButton}>{translate("Checkout")}</Button>
                    </GridItem>
                </GridContainer>
            </GridItem>
        </GridContainer>
    );
};

const widgetModule: WidgetModule = {
    component: Cart,
    definition: {
        group: "Mobile",
        icon: "cart-shopping",
        fieldDefinitions: [
            {
                name: fields.addDiscount,
                editorTemplate: "CheckboxField",
                fieldType: "Contextual",
                defaultValue: false,
            },
            {
                name: fields.addToList,
                editorTemplate: "CheckboxField",
                fieldType: "Contextual",
                defaultValue: true,
            },
            {
                name: fields.saveOrder,
                editorTemplate: "CheckboxField",
                fieldType: "Contextual",
                defaultValue: true,
            },
        ],
    },
};

export default widgetModule;
