import Zone from "@insite/client-framework/Components/Zone";
import WidgetModule from "@insite/client-framework/Types/WidgetModule";
import WidgetProps from "@insite/client-framework/Types/WidgetProps";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
import getColor from "@insite/mobius/utilities/getColor";
import React from "react";
import { css } from "styled-components";

type Props = WidgetProps;

export interface OnePageCheckoutPageContainerStyles {
    container?: GridContainerProps;
    leftGridItem?: GridItemProps;
    spaceGridItem?: GridItemProps;
    rightGridItem?: GridItemProps;
}

export const containerStyles: OnePageCheckoutPageContainerStyles = {
    leftGridItem: {
        width: [12, 12, 6, 7, 7],
        css: css`
            & > div > div:not(:last-child) {
                padding-bottom: 30px;
                margin-bottom: 30px;
                border-bottom: 1px solid ${getColor("common.border")};
            }
        `,
    },
    spaceGridItem: { width: [0, 0, 1, 1, 1] },
    rightGridItem: { width: [12, 12, 5, 4, 4] },
};

const styles = containerStyles;

const OnePageCheckoutPageContainer = ({ id }: Props) => {
    return (
        <GridContainer {...styles.container}>
            <GridItem {...styles.leftGridItem}>
                <Zone zoneName="Content0" contentId={id} />
            </GridItem>
            <GridItem {...styles.spaceGridItem}></GridItem>
            <GridItem {...styles.rightGridItem}>
                <Zone zoneName="Content1" contentId={id} />
            </GridItem>
        </GridContainer>
    );
};

const widgetModule: WidgetModule = {
    component: OnePageCheckoutPageContainer,
    definition: {
        displayName: "Page Container",
        group: "One Page Checkout",
        allowedContexts: ["OnePageCheckoutPage"],
    },
};

export default widgetModule;
