import { jsx } from "react/jsx-runtime";
import "react";
import { usePrefixCls } from "@tachybase/components";
import { connect, mapProps, mapReadPretty } from "@tachybase/schema";
import { ColorPicker } from "antd";
import { createStyles } from "antd-style";
import classnames from "classnames";
function _tagged_template_literal(strings, raw) {
    if (!raw) raw = strings.slice(0);
    return Object.freeze(Object.defineProperties(strings, {
        raw: {
            value: Object.freeze(raw)
        }
    }));
}
function _templateObject() {
    const data = _tagged_template_literal([
        "\n      display: inline-flex;\n      .ant-color-picker-trigger-disabled {\n        cursor: default;\n      }\n    "
    ]);
    _templateObject = function() {
        return data;
    };
    return data;
}
const useStyles = createStyles((param)=>{
    let { css } = param;
    return {
        color: css(_templateObject())
    };
});
const ColorPicker_ColorPicker = connect((props)=>{
    const { value, onChange, ...others } = props;
    return /*#__PURE__*/ jsx("div", {
        role: "button",
        "aria-label": "color-picker-normal",
        style: {
            display: 'inline-block'
        },
        children: /*#__PURE__*/ jsx(ColorPicker, {
            value: value,
            trigger: "hover",
            ...others,
            destroyTooltipOnHide: true,
            getPopupContainer: (current)=>current,
            presets: [
                {
                    label: 'Recommended',
                    colors: [
                        '#8BBB11',
                        '#52C41A',
                        '#13A8A8',
                        '#1677FF',
                        '#F5222D',
                        '#FADB14',
                        '#FA8C164D',
                        '#FADB144D',
                        '#52C41A4D',
                        '#1677FF4D',
                        '#2F54EB4D',
                        '#722ED14D',
                        '#EB2F964D'
                    ]
                }
            ],
            onChange: (color)=>onChange(color.toHexString())
        })
    });
}, mapProps((props, field)=>({
        ...props
    })), mapReadPretty((props)=>{
    const prefixCls = usePrefixCls("description-color-picker", props);
    const { styles } = useStyles();
    return /*#__PURE__*/ jsx("div", {
        role: "button",
        "aria-label": "color-picker-read-pretty",
        className: classnames(prefixCls, styles.color, props.className),
        children: /*#__PURE__*/ jsx(ColorPicker, {
            disabled: true,
            value: props.value,
            size: "small",
            ...props
        })
    });
}));
const color_picker_ColorPicker = ColorPicker_ColorPicker;
export { ColorPicker_ColorPicker as ColorPicker, color_picker_ColorPicker as default };
