var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React, { useContext } from 'react';
import { ConfigContext } from '../ConfigProvider';
import useMergeProps from '../_util/hooks/useMergeProps';
import { Panel } from './panel';
import cs from '../_util/classNames';
import Trigger from '../Trigger';
import { colors } from './colors';
import { useColorPicker } from './hooks/useColorPicker';
var defaultProps = {
    size: 'default',
    presetColors: colors,
};
function ColorPicker(baseProps, ref) {
    var _a = useContext(ConfigContext), getPrefixCls = _a.getPrefixCls, componentConfig = _a.componentConfig;
    var props = useMergeProps(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.ColorPicker);
    var style = props.style, className = props.className, size = props.size, disabled = props.disabled, _b = props.triggerProps, triggerProps = _b === void 0 ? {} : _b, unmountOnExit = props.unmountOnExit, showText = props.showText, historyColors = props.historyColors, presetColors = props.presetColors, showHistory = props.showHistory, showPreset = props.showPreset;
    var prefixCls = getPrefixCls('color-picker');
    var _c = useColorPicker(props), value = _c.value, popupVisible = _c.popupVisible, color = _c.color, alpha = _c.alpha, colorString = _c.colorString, onHsvChange = _c.onHsvChange, onAlphaChange = _c.onAlphaChange, onVisibleChange = _c.onVisibleChange;
    var renderInput = function () {
        var _a;
        return (React.createElement("div", { className: cs(prefixCls, className, (_a = {},
                _a[prefixCls + "-size-" + size] = size,
                _a[prefixCls + "-disabled"] = disabled,
                _a)), style: style, ref: ref },
            React.createElement("div", { className: prefixCls + "-preview", style: { backgroundColor: value } }),
            Boolean(showText) && React.createElement("div", { className: prefixCls + "-value" }, value),
            React.createElement("input", { className: prefixCls + "-input", value: value, disabled: disabled, readOnly: true })));
    };
    var renderPanel = function () {
        return (React.createElement(Panel, { color: color, alpha: alpha, colorString: colorString, historyColors: historyColors, presetColors: presetColors, showHistory: showHistory, showPreset: showPreset, onHsvChange: onHsvChange, onAlphaChange: onAlphaChange }));
    };
    return (React.createElement(Trigger, __assign({ popup: renderPanel, trigger: "click", position: "bl", popupAlign: {
            top: 8,
            bottom: 8,
            left: 8,
            right: 8,
        }, disabled: disabled, popupVisible: popupVisible, classNames: "slideDynamicOrigin", unmountOnExit: unmountOnExit }, triggerProps, { onVisibleChange: onVisibleChange }), renderInput()));
}
var ColorPickerComponent = React.forwardRef(ColorPicker);
ColorPickerComponent.displayName = 'ColorPicker';
export default ColorPickerComponent;
