"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModeButtons = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const StyledButton_1 = require("../../CommonUI/BuildlingBlocks/StyledButton");
const ExpressionValueType_1 = require("@appglue/common/dist/Expressions/ExpressionValueType");
const Buttons = styled_components_1.default.div `
    display: flex;
    width: 100%;

    > * {
        margin-left: 20px;

        &:first-child {
            margin-left: 0px;
        }
    }
`;
const SelectedButton = styled_components_1.default.div `
    border-bottom: 1px solid #4050a6;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33%;
    padding: 12px 0 6px;
`;
const NotSelectedButton = styled_components_1.default.div `
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33%;
    color: #677c95;
    border-bottom: 1px solid rgba(39, 41, 50, 0.1);
    padding: 12px 0 6px;
`;
const ModeButtons = function (props) {
    return ((0, jsx_runtime_1.jsxs)(Buttons, { children: [(0, jsx_runtime_1.jsx)(ExpressionButton, { value: props.value }), (0, jsx_runtime_1.jsx)(VariableButton, { value: props.value }), (0, jsx_runtime_1.jsx)(ValueButton, { value: props.value })] }));
};
exports.ModeButtons = ModeButtons;
const ExpressionButton = function (props) {
    function handleClick() {
        props.value.valueType = ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION;
    }
    if (props.value.valueType === ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION) {
        return ((0, jsx_runtime_1.jsx)(SelectedButton, { children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { size: "small", children: "Pick Expression" }) }));
    }
    else {
        return ((0, jsx_runtime_1.jsx)(NotSelectedButton, { children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { size: "small", onClick: handleClick, children: "Pick Expression" }) }));
    }
};
const VariableButton = function (props) {
    function handleClick() {
        props.value.valueType = ExpressionValueType_1.ExpressionValueType.VARIABLE;
    }
    if (props.value.valueType === ExpressionValueType_1.ExpressionValueType.VARIABLE) {
        return ((0, jsx_runtime_1.jsx)(SelectedButton, { children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { size: "small", children: "Pick Data Name" }) }));
    }
    else {
        return ((0, jsx_runtime_1.jsx)(NotSelectedButton, { children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { size: "small", onClick: handleClick, children: "Pick Data Name" }) }));
    }
};
const ValueButton = function (props) {
    function handleClick() {
        props.value.valueType = ExpressionValueType_1.ExpressionValueType.VALUE;
    }
    if (props.value.valueType === ExpressionValueType_1.ExpressionValueType.VALUE) {
        return ((0, jsx_runtime_1.jsx)(SelectedButton, { children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { size: "small", children: "Enter Data Value" }) }));
    }
    else {
        return ((0, jsx_runtime_1.jsx)(NotSelectedButton, { children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { size: "small", onClick: handleClick, children: "Enter Data Value" }) }));
    }
};
//# sourceMappingURL=ModeButtons.js.map