import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
import { StyledButton } from "../../CommonUI/Components/Button";
import { ExpressionValueType } from "../ExpressionValueType";
const Buttons = styled.div `
    display: flex;
    width: 100%;

    > * {
        margin-left: 20px;
        &:first-child {
            margin-left: 0px;
        }
    }
`;
const SelectedButton = styled.div `
    border-bottom: 1px solid #4050a6;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33%;
    padding: 12px 0 6px;
`;
const NotSelectedButton = styled.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;
`;
export const ModeButtons = function (props) {
    return (_jsxs(Buttons, { children: [_jsx(ExpressionButton, { value: props.value }, void 0),
            _jsx(VariableButton, { value: props.value }, void 0),
            _jsx(ValueButton, { value: props.value }, void 0)] }, void 0));
};
const ExpressionButton = function (props) {
    function handleClick() {
        props.value.valueType = ExpressionValueType.SUBEXPRESSION;
    }
    if (props.value.valueType === ExpressionValueType.SUBEXPRESSION) {
        return (_jsx(SelectedButton, { children: _jsx(StyledButton, Object.assign({ size: "small" }, { children: "Pick Expression" }), void 0) }, void 0));
    }
    else {
        return (_jsx(NotSelectedButton, { children: _jsx(StyledButton, Object.assign({ size: "small", onClick: handleClick }, { children: "Pick Expression" }), void 0) }, void 0));
    }
};
const VariableButton = function (props) {
    function handleClick() {
        props.value.valueType = ExpressionValueType.VARIABLE;
    }
    if (props.value.valueType === ExpressionValueType.VARIABLE) {
        return (_jsx(SelectedButton, { children: _jsx(StyledButton, Object.assign({ size: "small" }, { children: "Pick Data Name" }), void 0) }, void 0));
    }
    else {
        return (_jsx(NotSelectedButton, { children: _jsx(StyledButton, Object.assign({ size: "small", onClick: handleClick }, { children: "Pick Data Name" }), void 0) }, void 0));
    }
};
const ValueButton = function (props) {
    function handleClick() {
        props.value.valueType = ExpressionValueType.VALUE;
    }
    if (props.value.valueType === ExpressionValueType.VALUE) {
        return (_jsx(SelectedButton, { children: _jsx(StyledButton, Object.assign({ size: "small" }, { children: "Enter Data Value" }), void 0) }, void 0));
    }
    else {
        return (_jsx(NotSelectedButton, { children: _jsx(StyledButton, Object.assign({ size: "small", onClick: handleClick }, { children: "Enter Data Value" }), void 0) }, void 0));
    }
};
//# sourceMappingURL=ModeButtons.js.map