"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTypePicker = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const DataTypes_1 = require("@appglue/common/dist/Common/Data/DataTypes");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const EditGrayIcon_1 = require("./Icon/EditGrayIcon");
const DataDefEditLayer_1 = require("./DataDesigner/DataDefEditLayer");
const UILabel_1 = require("./BuildlingBlocks/UILabel");
const material_1 = require("@mui/material");
const DataTypePicker = ({ dataDef: propDataDef, updateCallback, readonly, width, label, }) => {
    const [dataDef, setDataDef] = (0, react_1.useState)(propDataDef);
    const ref = (0, react_1.useRef)(null);
    const [open, setOpen] = (0, react_1.useState)(false);
    const onChangeType = (event) => {
        let newType = DataUtilities_1.DataUtilities.createDataByType(event.target.value, propDataDef.name);
        updateCallback(newType);
        setDataDef(newType);
    };
    const onEditProperty = () => {
        setOpen(true);
    };
    (0, react_1.useEffect)(() => {
        if (dataDef.type === DataTypes_1.DataTypes.OBJECT && (dataDef.fields?.length || 0) === 0) {
            setOpen(true);
        }
    }, [dataDef]);
    return ((0, jsx_runtime_1.jsxs)(DataTypePickerRender, { className: "DataTypePicker-root", "data-testid": "DataTypePicker", children: [label && ((0, jsx_runtime_1.jsx)(material_1.Box, { paddingRight: "7px", children: (0, jsx_runtime_1.jsx)(UILabel_1.UILabel, { children: label }) })), (0, jsx_runtime_1.jsxs)(core_1.Select, { value: dataDef.type, onChange: onChangeType, className: "DataTypePicker-select", disabled: readonly, style: { width: width }, MenuProps: {
                    style: {
                        paddingRight: 5,
                        paddingLeft: 5,
                    },
                }, children: [(0, jsx_runtime_1.jsx)(StyledMenuItem, { value: DataTypes_1.DataTypes.STRING, children: DataTypes_1.DataTypes.STRING }), (0, jsx_runtime_1.jsx)(StyledMenuItem, { value: DataTypes_1.DataTypes.BOOLEAN, children: DataTypes_1.DataTypes.BOOLEAN }), (0, jsx_runtime_1.jsx)(StyledMenuItem, { value: DataTypes_1.DataTypes.NUMBER, children: DataTypes_1.DataTypes.NUMBER }), (0, jsx_runtime_1.jsx)(StyledMenuItem, { value: DataTypes_1.DataTypes.DATE, children: DataTypes_1.DataTypes.DATE }), (0, jsx_runtime_1.jsx)(StyledMenuItem, { value: DataTypes_1.DataTypes.FILE, children: DataTypes_1.DataTypes.FILE }), (0, jsx_runtime_1.jsx)(StyledMenuItem, { value: DataTypes_1.DataTypes.OBJECT, children: DataTypes_1.DataTypes.OBJECT })] }), dataDef.type !== DataTypes_1.DataTypes.BOOLEAN && dataDef.type !== DataTypes_1.DataTypes.FILE && ((0, jsx_runtime_1.jsx)(EditPropertyButton, { onClick: onEditProperty, className: "DataTypePicker-edit", "data-testid": "DataTypePicker-edit", ref: ref, children: (0, jsx_runtime_1.jsx)(EditGrayIcon_1.EditGrayIcon, {}) })), (0, jsx_runtime_1.jsx)(DataDefEditLayer_1.DataDefEditLayer, { dataDef: dataDef, onUpdate: () => {
                    updateCallback(dataDef);
                }, anchorEl: ref?.current, open: open, keepMounted: true, onClose: () => {
                    setOpen(false);
                } })] }));
};
exports.DataTypePicker = DataTypePicker;
const DataTypePickerRender = styled_components_1.default.div `
    position: relative;
    display: flex;
    align-items: center;
`;
const EditPropertyButton = styled_components_1.default.div `
    width: 16px;
    height: 16px;
    cursor: pointer;

    margin-left: 10px;

    ${(props) => (props.hide ? "display: none;" : "display: block;")}
`;
const StyledMenuItem = (0, styled_components_1.default)(core_1.MenuItem) `
    && {
        padding: 8px 16px !important;

        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: left;
        color: #272932;
    }
`;
//# sourceMappingURL=DataTypePicker.js.map