import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import styled from "styled-components";
import { Select } from "@material-ui/core";
import { XDataType } from "../Common/Data/XDataType";
import { DataUtilities } from "../Common/DataUtilities";
import { EditGrayIcon } from "./Icon/EditGrayIcon";
import { DataDefEditLayer } from "./DataDesigner/DataDefEditLayer";
export const DataTypePicker = ({ dataDef: propDataDef, updateCallback, readonly }) => {
    const [dataDef, setDataDef] = useState(propDataDef);
    const [anchorEl, setAnchorEl] = useState(null);
    const onChangeType = (event) => {
        let newType = DataUtilities.createDataByType(event.target.value, propDataDef.name);
        updateCallback(newType);
        setDataDef(newType);
    };
    const onEditProperty = (event) => {
        setAnchorEl(event.currentTarget);
    };
    return (_jsxs(DataTypePickerRender, Object.assign({ className: "DataTypePicker-root", "data-testid": "DataTypePicker" }, { children: [_jsxs(Select, Object.assign({ native: true, value: dataDef.type, onChange: onChangeType, className: "DataTypePicker-select", disabled: readonly }, { children: [_jsx("option", Object.assign({ value: XDataType.STRING }, { children: XDataType.STRING }), void 0),
                    _jsx("option", Object.assign({ value: XDataType.BOOLEAN }, { children: XDataType.BOOLEAN }), void 0),
                    _jsx("option", Object.assign({ value: XDataType.NUMBER }, { children: XDataType.NUMBER }), void 0),
                    _jsx("option", Object.assign({ value: XDataType.DATE }, { children: XDataType.DATE }), void 0),
                    _jsx("option", Object.assign({ value: XDataType.FILE }, { children: XDataType.FILE }), void 0),
                    _jsx("option", Object.assign({ value: XDataType.OBJECT }, { children: XDataType.OBJECT }), void 0)] }), void 0),
            dataDef.type !== XDataType.BOOLEAN && (_jsx(EditPropertyButton, Object.assign({ onClick: onEditProperty, className: "DataTypePicker-edit", "data-testid": "DataTypePicker-edit" }, { children: _jsx(EditGrayIcon, {}, void 0) }), void 0)),
            _jsx(DataDefEditLayer, { dataDef: dataDef, onUpdate: () => {
                    updateCallback(dataDef);
                }, anchorEl: anchorEl, open: Boolean(anchorEl), keepMounted: true, onClose: () => {
                    setAnchorEl(null);
                } }, void 0)] }), void 0));
};
const DataTypePickerRender = styled.div `
    position: relative;
    display: flex;
    align-items: center;
`;
const EditPropertyButton = styled.div `
    width: 16px;
    height: 16px;
    cursor: pointer;

    margin-left: 10px;

    ${(props) => (props.hide ? "display: none;" : "display: block;")}
`;
//# sourceMappingURL=DataTypePicker.js.map