import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { FormDesignConstants, FormMode } from "../FormDesignConstants";
const FormWrapper = styled("div") `
    display: flex;
    flex: 1;
    overflow: auto;
    background: ${(props) => props.background || "#fff"};
    position: relative;
    flex-direction: column;
`;
const FormContent = styled("div") `
    margin-left: ${(props) => props.marginLeft || FormDesignConstants.FORM_OUTER_MARGIN}px;
    margin-right: ${FormDesignConstants.FORM_OUTER_MARGIN}px;
    margin-top: ${(props) => props.marginTop || FormDesignConstants.FORM_OUTER_MARGIN}px;
    width: ${(props) => props.width}px;
    height: ${(props) => (props.height ? `${props.height}` : "auto")};
    position: relative;
    margin-bottom: 50px;

    ${(props) => props.mode === FormDesignConstants.FORM_MODE_PAPER &&
    `
            box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
        `}

    ${(props) => props.mode === FormDesignConstants.FORM_MODE_OUTLINE &&
    `
            border: 1px solid rgba(0, 0, 0, 0.12);
        `}

    ${(props) => props.isDevice &&
    `
            border-radius: 36px;
            border-width: 60px 24px;
            border-style: solid;
            border-color: black;
            background-color: black;
            box-sizing: content-box;
            &::before {
                content: '';
                display: block;
                width: 60px;
                height: 5px;
                position: absolute;
                top: -30px;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #333;
                border-radius: 10px;
            }
            &::after {
                content: '';
                display: block;
                width: 35px;
                height: 35px;
                position: absolute;
                left: 50%;
                bottom: -65px;
                transform: translate(-50%, -50%);
                background: #333;
                border-radius: 50%;
            }
        `}
`;
const Form = styled("div") `
    overflow-y: ${(props) => (props.hasScroll ? "auto" : "inherit")};
    height: ${(props) => (props.hasScroll || props.fullHeight ? "100%" : "auto")};
`;
export class XFormDesignerLayoutPanel extends React.Component {
    render() {
        var _a, _b, _c, _d, _e, _f, _g;
        let height = "auto";
        let width = FormDesignConstants.DESIGN_WIDTH;
        let isDevice = false;
        if (((_a = this.props.editContext.designConfig) === null || _a === void 0 ? void 0 : _a.mode) === FormDesignConstants.FORM_MODE_TABLET_VERTICAL) {
            height = "1024px";
            width = 768;
            isDevice = true;
        }
        else if (((_b = this.props.editContext.designConfig) === null || _b === void 0 ? void 0 : _b.mode) === FormDesignConstants.FORM_MODE_TABLET_HORIZONTAL) {
            height = "768px";
            width = 1024;
            isDevice = true;
        }
        else if (((_c = this.props.editContext.designConfig) === null || _c === void 0 ? void 0 : _c.mode) === FormDesignConstants.FORM_MODE_PHONE_VERTICAL) {
            height = "667px";
            width = 375;
            isDevice = true;
        }
        else if (((_d = this.props.editContext.designConfig) === null || _d === void 0 ? void 0 : _d.mode) === FormDesignConstants.FORM_MODE_PHONE_HORIZONTAL) {
            height = "375px";
            width = 667;
            isDevice = true;
        }
        const hasScroll = isDevice;
        const hasPinned = this.props.editContext.mode !== FormMode.Runtime &&
            (this.props.editContext.form.doNotScrollLastContainerOnForm ||
                this.props.editContext.form.doNotScrollFirstContainerOnForm);
        if (hasPinned && !isDevice) {
            height = undefined;
        }
        if (this.props.editContext.mode === FormMode.Runtime &&
            (this.props.editContext.form.doNotScrollLastContainerOnForm ||
                this.props.editContext.form.doNotScrollFirstContainerOnForm) &&
            !isDevice) {
            height = this.props.height ? `${this.props.height}px` : "calc(100% - 30px)";
        }
        return (_jsx(FormWrapper, Object.assign({ background: ((_e = this.props.editContext.designConfig) === null || _e === void 0 ? void 0 : _e.mode) === FormDesignConstants.FORM_MODE_GRAY
                ? FormDesignConstants.DESIGN_AREA_BACKGROUND_COLOR
                : undefined, "data-testid": "form-wrapper" }, { children: _jsx(FormContent, Object.assign({ width: width, height: height, marginLeft: hasPinned ? 83 : undefined, "data-testid": ((_f = this.props.editContext.designConfig) === null || _f === void 0 ? void 0 : _f.mode) === FormDesignConstants.FORM_MODE_GRAY
                    ? "background-gray"
                    : "background-white", isDevice: isDevice, mode: (_g = this.props.editContext.designConfig) === null || _g === void 0 ? void 0 : _g.mode }, { children: _jsx(Form, Object.assign({ hasScroll: hasScroll, fullHeight: this.props.editContext.mode === FormMode.Runtime }, { children: this.props.editContext.form.render() }), void 0) }), void 0) }), void 0));
    }
}
//# sourceMappingURL=XFormDesignerLayoutPanel.js.map