"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpressionView = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const ExpressionReactContext_1 = require("../Structure/ExpressionReactContext");
const ExpressionBuilder_1 = require("../ExpressionBuilder");
const ExpressionEditLayer_1 = require("../ExpressionEditLayer");
class ExpressionView extends react_1.default.Component {
    static contextType = ExpressionReactContext_1.ExpressionReactContext;
    ref = react_1.default.createRef();
    constructor(props) {
        super(props);
        this.state = {
            open: !!this.props.open || !!props.defaultOpen,
        };
    }
    componentDidUpdate(prevProps) {
        if (this.props.open !== undefined && prevProps.open !== this.props.open) {
            this.setState({
                open: this.props.open,
            });
        }
    }
    onOpen = () => {
        if (this.props.onOpen) {
            this.props.onOpen();
        }
        if (this.props.open === undefined && !this.state.open) {
            this.setState({
                open: true,
            });
        }
    };
    onClose = () => {
        this.setState({
            open: false,
        });
        if (this.props.onDone) {
            this.props.onDone();
        }
    };
    render() {
        return ((0, jsx_runtime_1.jsxs)(ExpressionViewDiv, { "data-testid": `expression_compact_${this.props.expression._id}`, className: "ExpressionView-root", onClick: this.onOpen, ref: this.ref, children: [(0, jsx_runtime_1.jsx)(ExpressionCompact, { isText: this.context?.renderType === ExpressionReactContext_1.ExpressionRenderType.TEXT, children: (0, jsx_runtime_1.jsx)(ExpressionCompactContent, { isText: this.context?.renderType === ExpressionReactContext_1.ExpressionRenderType.TEXT, children: (0, jsx_runtime_1.jsx)(ExpressionReactContext_1.ExpressionReactContext.Provider, { value: this.context?.renderType === ExpressionReactContext_1.ExpressionRenderType.TEXT
                                ? this.context
                                : {
                                    ...ExpressionReactContext_1.expressionSettings[ExpressionReactContext_1.ExpressionRenderType.COMPACT],
                                    color: this.props.color,
                                    hideValidation: this.props.hideValidation,
                                }, children: (0, jsx_runtime_1.jsx)(ExpressionBuilder_1.ExpressionBuilder, { ...this.props }) }) }) }), this.state.open && ((0, jsx_runtime_1.jsx)(ExpressionEditLayer_1.ExpressionEditLayer, { open: this.state.open, expression: this.props.expression, onClose: this.onClose, "data-testid": `expression_edit_layer_${this.props.expression._id}` }))] }));
    }
}
exports.ExpressionView = ExpressionView;
const ExpressionViewDiv = styled_components_1.default.div `
    position: relative;
    padding-bottom: 7px;
    height: 100%;

    .edit-button {
        opacity: 0;
    }

    &:hover {
        .edit-button {
            opacity: 1;
        }
    }
`;
const ExpressionCompact = styled_components_1.default.div `
    padding: 10px 16px 10px;
    position: relative;
    overflow: hidden;
    max-width: fit-content;
`;
const ExpressionCompactContent = styled_components_1.default.div `
    max-height: ${(props) => (props.isText ? 120 : 60)}px;
    overflow: hidden;

    &::after {
        content: "...";
        position: absolute;
        top: ${(props) => (props.isText ? 120 : 60)}px;
        left: 16px;
    }

    button {
        display: none;
    }
`;
//# sourceMappingURL=ExpressionView.js.map