import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useRef } from "react";
import { SketchPicker } from "react-color";
import { Popover, TextField, Input, Button, Link } from "@material-ui/core";
import styled from "styled-components";
export const PropertyEditorColor = (props) => {
    var _a;
    const [open, setOpen] = useState(false);
    const value = (_a = Reflect.get(props.editObject, props.propertyName)) !== null && _a !== void 0 ? _a : props.parentDefaultValue;
    let textRef = useRef(null);
    const [color, setColor] = 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 (_jsxs(_Fragment, { children: [props.label && (_jsx(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) }, void 0)),
            !props.label && (_jsx(Input, { value: value || "", onClick: () => setOpen(true), ref: textRef, readOnly: true, autoFocus: true }, void 0)),
            _jsxs(Popover, Object.assign({ open: open, anchorEl: textRef.current, onClose: () => setOpen(false) }, { children: [_jsx(StyledColorPicker, { onChange: onChange, color: color || "", "data-testid": `color-picker_${props.propertyName}` }, void 0),
                    _jsxs(StyledButtonGroup, { children: [_jsx(Link, Object.assign({ onClick: onCancel }, { children: "Cancel" }), void 0),
                            _jsx(Button, Object.assign({ onClick: onApply, color: "primary", variant: "contained" }, { children: "Apply" }), void 0)] }, void 0)] }), void 0)] }, void 0));
};
const StyledButtonGroup = styled.div `
    background: #fff;
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: flex-end;

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