import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { BaseExpression } from "../../BaseExpression";
import { ExpressionValue } from "../../ExpressionValue";
import { ExpressionValueRenderer } from "../../ExpressionValueRenderer";
import styled from "styled-components";
import { ExpressionPiece } from "../../ExpressionStyles";
import { ExpressionContext, ExpressionRenderType } from "../../ExpressionContext";
const StyledDivisionDiv = styled.div `
    display: flex;
    flex-direction: column;

    ${(props) => props.renderType === 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.useContext(ExpressionContext);
    return _jsx(StyledDivisionDiv, Object.assign({}, props, { renderType: context.renderType }), void 0);
};
const StyledTopDiv = styled.div `
    ${(props) => props.renderType === 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.useContext(ExpressionContext);
    return _jsx(StyledTopDiv, Object.assign({}, props, { renderType: context.renderType }), void 0);
};
const StyledBottomDiv = styled.div `
    width: 100%;
    ${(props) => props.renderType === ExpressionRenderType.FULL
    ? `
                margin: 5px;
            `
    : `
                padding-top: 5px;
            `}

    > div {
        justify-content: center;
    }
`;
const BottomDiv = (props) => {
    const context = React.useContext(ExpressionContext);
    return _jsx(StyledBottomDiv, Object.assign({}, props, { renderType: context.renderType }), void 0);
};
export class DivideExpression extends BaseExpression {
    constructor() {
        super();
        this.__type = "Divide";
        this.divideValue = ExpressionValue.createExpressionValue(this, "divideValue");
        this.divideBy = ExpressionValue.createExpressionValue(this, "divideBy");
    }
    render() {
        return (_jsx(ExpressionPiece, { children: _jsxs(DivisionDiv, { children: [_jsx(TopDiv, { children: _jsx(ExpressionValueRenderer, { el: this.divideValue }, void 0) }, void 0),
                    _jsx(BottomDiv, { children: _jsx(ExpressionValueRenderer, { el: this.divideBy }, void 0) }, void 0)] }, void 0) }, void 0));
    }
    evaluate(data, testContext) {
        let divideValue = this.divideValue.evaluate(data, testContext);
        let divideBy = this.divideBy.evaluate(data, testContext);
        if (divideBy === 0) {
            throw new Error("Can not divide by zero");
        }
        return divideValue / divideBy;
    }
}
//# sourceMappingURL=DivideExpression.js.map