import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from "@material-ui/core";
import React from "react";
import styled from "styled-components";
import { Menu } from "@material-ui/core";
import { ExpressionContext, ExpressionRenderType, expressionSettings } from "./ExpressionContext";
import { XExpressionEditor } from "./XExpressionEditor";
export class XExpressionView extends React.Component {
    constructor(props) {
        super(props);
        this.ref = React.createRef();
        this.onOpen = () => {
            if (this.props.onOpen) {
                this.props.onOpen();
            }
            if (this.props.open === undefined && !this.state.open) {
                this.setState({
                    open: true,
                });
            }
        };
        this.onClose = () => {
            this.setState({
                open: false,
            });
            if (this.props.onDone) {
                this.props.onDone();
            }
        };
        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,
            });
        }
    }
    render() {
        var _a, _b, _c;
        return (_jsxs(ExpressionView, Object.assign({ "data-testid": `expression_compact_${this.props.expression._id}`, className: "ExpressionView-root", onClick: this.onOpen, ref: this.ref }, { children: [_jsx(ExpressionCompact, Object.assign({ isText: ((_a = this.context) === null || _a === void 0 ? void 0 : _a.renderType) === ExpressionRenderType.TEXT }, { children: _jsx(ExpressionCompactContent, Object.assign({ isText: ((_b = this.context) === null || _b === void 0 ? void 0 : _b.renderType) === ExpressionRenderType.TEXT }, { children: _jsx(ExpressionContext.Provider, Object.assign({ value: ((_c = this.context) === null || _c === void 0 ? void 0 : _c.renderType) === ExpressionRenderType.TEXT
                                ? this.context
                                : Object.assign(Object.assign({}, expressionSettings[ExpressionRenderType.COMPACT]), { color: this.props.color, hideValidation: this.props.hideValidation }) }, { children: _jsx(XExpressionEditor, Object.assign({}, this.props), void 0) }), void 0) }), void 0) }), void 0),
                this.state.open && (_jsx(ExpressionEditDialog, Object.assign({ open: this.state.open, "data-testid": `expression_edit_layer_${this.props.expression._id}`, anchorEl: this.ref.current }, { children: _jsxs(ExpressionEditRender, { children: [_jsx("div", Object.assign({ className: "Dialog__content" }, { children: _jsx(ExpressionContext.Provider, Object.assign({ value: expressionSettings[ExpressionRenderType.FULL] }, { children: _jsx(XExpressionEditor, Object.assign({}, this.props), void 0) }), void 0) }), void 0),
                            _jsx("div", Object.assign({ className: "Dialog__actions" }, { children: _jsx(Button, Object.assign({ onClick: this.onClose, variant: "contained" }, { children: "Done" }), void 0) }), void 0)] }, void 0) }), void 0))] }), void 0));
    }
}
XExpressionView.contextType = ExpressionContext;
const ExpressionView = styled.div `
    position: relative;
    padding-bottom: 7px;
    height: 100%;

    .edit-button {
        opacity: 0;
    }

    &:hover {
        .edit-button {
            opacity: 1;
        }
    }
`;
const ExpressionCompact = styled.div `
    padding: 10px 16px 10px;
    position: relative;
    overflow: hidden;
    max-width: fit-content;
`;
const ExpressionCompactContent = styled.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;
    }
`;
const ExpressionEditDialog = styled(Menu) `
    .MuiPaper-root {
        border-radius: 6px;
        border: 2px solid lightblue;
        max-height: fit-content;
        overflow: visible;
        overflow-x: visible;
        overflow-y: visible;
    }
`;
const ExpressionEditRender = styled.div `
    width: 600px;
    min-height: 400px;

    display: flex;
    flex-direction: column;
    background: #fff;

    > div {
        padding: 15px;
    }

    .Dialog__actions {
        text-align: right;
        margin-top: auto;
        border-top: 1px solid lightgray;

        .MuiButton-contained {
            background: #4050a6;
            color: #fff;
            text-transform: none;
        }
    }

    .Dialog__content {
        flex: 1;

        position: relative;

        .XExpressionEditor-root {
            position: static;

            .XExpressionEditor {
                max-height: 300px;
                overflow: auto;
            }
        }
    }
`;
//# sourceMappingURL=XExpressionView.js.map