"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyEditorColor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_color_1 = require("react-color");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const PropertyEditorColor = (props) => {
    const [open, setOpen] = (0, react_1.useState)(false);
    const value = Reflect.get(props.editObject, props.propertyName) ?? props.parentDefaultValue;
    let textRef = (0, react_1.useRef)(null);
    const [color, setColor] = (0, react_1.useState)(value);
    const onChange = (data) => {
        setColor(data.hex);
    };
    const onApply = () => {
        if (color) {
            Reflect.set(props.editObject, props.propertyName, color);
            props.updateCallback();
            setOpen(false);
        }
    };
    const onCancel = () => {
        setColor(value);
        setOpen(false);
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.label && ((0, jsx_runtime_1.jsx)(core_1.TextField, { "data-testid": "property-editor-color", value: value || "", label: props.label, onClick: () => setOpen(true), variant: "outlined", inputProps: {
                    ref: textRef,
                    readOnly: true,
                }, inputRef: (input) => (textRef = input) })), !props.label && ((0, jsx_runtime_1.jsx)(core_1.Input, { value: value || "", onClick: () => setOpen(true), ref: textRef, readOnly: true, autoFocus: true })), (0, jsx_runtime_1.jsxs)(core_1.Popover, { open: open, anchorEl: textRef.current, onClose: () => setOpen(false), children: [(0, jsx_runtime_1.jsx)(StyledColorPicker, { onChange: onChange, color: color || "", "data-testid": `color-picker_${props.propertyName}` }), (0, jsx_runtime_1.jsxs)(StyledButtonGroup, { children: [(0, jsx_runtime_1.jsx)(core_1.Link, { onClick: onCancel, children: "Cancel" }), (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: onApply, color: "primary", variant: "contained", children: "Apply" })] })] })] }));
};
exports.PropertyEditorColor = PropertyEditorColor;
const StyledButtonGroup = styled_components_1.default.div `
    background: #fff;
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: flex-end;

    > *:first-child {
        margin-right: 10px;
    }
`;
const StyledColorPicker = (0, styled_components_1.default)(react_color_1.SketchPicker) `
    box-shadow: none !important;
`;
//# sourceMappingURL=PropertyEditorColor.js.map