"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DivideExpressionEditor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const ExpressionRuleEditor_1 = require("../ExpressionRuleEditor");
const ExpressionStyles_1 = require("../../Builder/ExpressionStyles");
const ExpressionValueRenderer_1 = require("../../Builder/ExpressionValueRenderer");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const ExpressionReactContext_1 = require("../../Structure/ExpressionReactContext");
class DivideExpressionEditor extends ExpressionRuleEditor_1.ExpressionRuleEditor {
    render() {
        return ((0, jsx_runtime_1.jsx)(ExpressionStyles_1.ExpressionPiece, { children: (0, jsx_runtime_1.jsxs)(DivisionDiv, { children: [(0, jsx_runtime_1.jsx)(TopDiv, { children: (0, jsx_runtime_1.jsx)(ExpressionValueRenderer_1.ExpressionValueRenderer, { el: this.ruleData.divideValue }) }), (0, jsx_runtime_1.jsx)(BottomDiv, { children: (0, jsx_runtime_1.jsx)(ExpressionValueRenderer_1.ExpressionValueRenderer, { el: this.ruleData.divideBy }) })] }) }));
    }
}
exports.DivideExpressionEditor = DivideExpressionEditor;
const StyledDivisionDiv = styled_components_1.default.div `
    display: flex;
    flex-direction: column;

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                font-size:      18px;
                border-left: 1px solid darkgray;
                border-right: 1px solid darkgray;
                border-radius: 10px;
                margin-left: 10px;
                margin-right: 10px;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 2px;
                padding-bottom: 2px;
            `
    : `
            jusity-content: center;
        `}
`;
const DivisionDiv = (props) => {
    const context = react_1.default.useContext(ExpressionReactContext_1.ExpressionReactContext);
    return (0, jsx_runtime_1.jsx)(StyledDivisionDiv, { ...props, renderType: context.renderType });
};
const StyledTopDiv = styled_components_1.default.div `
    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                padding-bottom: 5px;

                margin-top: 5px;
                margin-bottom: 5px;
                margin-left: 5px;
                margin-right: 5px;
                width: 100%;
                border-bottom: 3px solid #677C95;

        `
    : `
                border-bottom: 2px solid #677C95;
                padding-bottom: 5px;
            `}
    > div {
        justify-content: center;
    }
`;
const TopDiv = (props) => {
    const context = react_1.default.useContext(ExpressionReactContext_1.ExpressionReactContext);
    return (0, jsx_runtime_1.jsx)(StyledTopDiv, { ...props, renderType: context.renderType });
};
const StyledBottomDiv = styled_components_1.default.div `
    width: 100%;

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                margin: 5px;
            `
    : `
                padding-top: 5px;
            `}
    > div {
        justify-content: center;
    }
`;
const BottomDiv = (props) => {
    const context = react_1.default.useContext(ExpressionReactContext_1.ExpressionReactContext);
    return (0, jsx_runtime_1.jsx)(StyledBottomDiv, { ...props, renderType: context.renderType });
};
//# sourceMappingURL=DivideExpressionEditor.js.map