import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ClickAwayListener, Typography } from "@material-ui/core";
import styled from "styled-components";
import { DataUtilities } from "../Common/DataUtilities";
import { CloseGrayIcon } from "../CommonUI/Icon/CloseGrayIcon";
import { ObserveState } from "../CommonUI/StateManagement/ObserveState";
import VariablePicker from "../CommonUI/VariablePicker";
export const VariablePickerDialog = (props) => {
    const { show, isList, onVariableSet, allowNewVariable, data, requiredType, selected, onClose } = props;
    let selectedField = null;
    try {
        selectedField =
            selected && selected !== ""
                ? DataUtilities.getFieldFromDataDefinitionByProperty(data.fields, selected, "name")
                : null;
    }
    catch (e) { }
    if (!show)
        return null;
    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsx(DialogWrapper, { children: _jsx(ObserveState, { listenTo: data, properties: ["fields"], control: () => {
                    return (_jsx(VariablePicker, { selected: selected, data: data, onVariableSet: onVariableSet, allowNewVariable: allowNewVariable, renderTitle: () => {
                            var _a;
                            return (_jsxs(DialogHeader, { children: [_jsx(Typography, { children: (_a = selectedField === null || selectedField === void 0 ? void 0 : selectedField.name) !== null && _a !== void 0 ? _a : "Pick Data Name" }, void 0),
                                    _jsx(CloseButton, Object.assign({ onClick: (event) => {
                                            event.stopPropagation();
                                            onClose();
                                        }, "data-testid": "close-pick-dialog" }, { children: _jsx(CloseGrayIcon, {}, void 0) }), void 0)] }, void 0));
                        }, requiredType: requiredType, isList: isList, notPopup: true, hideInput: true, inputProps: {
                            fullWidth: true,
                        } }, void 0));
                } }, void 0) }, void 0) }), void 0));
};
const DialogWrapper = styled.div `
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border: 1px solid #f1f1f6;
    box-shadow: 0px 6px 8px -2px rgba(39, 41, 50, 0.08);
    border-radius: 4px;

    width: 220px;

    padding: 16px;

    z-index: 10;

    .VariablePicker_Content {
        border: none;
        padding: 0;

        .MuiList-root .MuiListSubheader-gutters {
            padding: 0;
        }
    }

    .VariablePicker_TextField {
        .MuiOutlinedInput-input {
            padding: 6px 12px;

            //styleName: text/Inter Regular 14px;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            letter-spacing: 0em;
            text-align: left;
            background: #fcfcfe;
        }

        .MuiOutlinedInput-notchedOutline {
            border: 1px solid rgba(39, 41, 50, 0.2);
            box-sizing: border-box;
            border-radius: 4px;
        }

        .MuiInputAdornment-root {
            display: none;
        }
    }
`;
const DialogHeader = styled.div `
    position: relative;

    .MuiTypography-body1 {
        //styleName: text/Inter SemiBold 12px;
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 17px;
        letter-spacing: 0px;
        text-align: left;

        color: rgba(39, 41, 50, 1);

        margin-bottom: 6px;
    }
`;
const CloseButton = styled.div `
    position: absolute;

    top: -12px;
    width: 24px;
    height: 24px;
    right: -12px;

    cursor: pointer;
`;
//# sourceMappingURL=VariablePickerDialog.js.map