"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VariablePickerDialog = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const CloseGrayIcon_1 = require("../CommonUI/Icon/CloseGrayIcon");
const ObserveState_1 = require("../CommonUI/StateManagement/ObserveState");
const VariablePicker_1 = tslib_1.__importDefault(require("../CommonUI/VariablePicker"));
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const VariablePickerDialog = (props) => {
    const { show, isList, onVariableSet, allowNewVariable, data, requiredType, selected, onClose } = props;
    let selectedField = null;
    try {
        selectedField =
            selected && selected !== ""
                ? DataUtilities_1.DataUtilities.getFieldFromDataDefinitionByName(data.fields, selected)
                : null;
    }
    catch (e) { }
    if (!show)
        return null;
    return ((0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: onClose, children: (0, jsx_runtime_1.jsx)(DialogWrapper, { children: (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: data, properties: ["fields"], control: () => {
                    return ((0, jsx_runtime_1.jsx)(VariablePicker_1.default, { selected: selected, data: data, onVariableSet: onVariableSet, allowNewVariable: allowNewVariable, renderTitle: () => {
                            return ((0, jsx_runtime_1.jsxs)(DialogHeader, { children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { children: selectedField?.name ?? "Pick Data Name" }), (0, jsx_runtime_1.jsx)(CloseButton, { onClick: (event) => {
                                            event.stopPropagation();
                                            onClose();
                                        }, "data-testid": "close-pick-dialog", children: (0, jsx_runtime_1.jsx)(CloseGrayIcon_1.CloseGrayIcon, {}) })] }));
                        }, requiredType: requiredType, isList: isList, notPopup: true, hideInput: true, inputProps: {
                            fullWidth: true,
                        } }));
                } }) }) }));
};
exports.VariablePickerDialog = VariablePickerDialog;
const DialogWrapper = styled_components_1.default.div `
    position: absolute;
    top: 0;
    left: 0;
    background: ${UIStyleConstants_1.UIStyleConstants.WHITE_COLOR};
    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;
        }

        .MuiList-root {
            max-height: 300px;
        }
    }

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

            //styleName: text/Inter Regular 14px;

            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_components_1.default.div `
    position: relative;

    .MuiTypography-body1 {
        //styleName: text/Inter SemiBold 12px;

        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_components_1.default.div `
    position: absolute;

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

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