import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PureComponent } from 'react';
import cx from 'classnames';
import ColorBoard from './ColorBoard';
import SketchPresetColors from './SketchPresetColors';
import Popover from '../popover';
import { DisabledContext } from '../disabled';
var prefixCls = 'zent-color-picker';
var ColorPicker = (function (_super) {
    __extends(ColorPicker, _super);
    function ColorPicker() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            popVisible: false,
        };
        _this.handleChange = function (color) {
            var _a = _this.props, onChange = _a.onChange, showAlpha = _a.showAlpha;
            var transColor = color;
            if (typeof color === 'object') {
                transColor = showAlpha ? color.rgba : color.hex;
            }
            onChange(transColor);
        };
        _this.handleVisibleChange = function (visible) {
            if (_this.disabled) {
                return;
            }
            _this.setState({
                popVisible: visible,
            });
        };
        return _this;
    }
    Object.defineProperty(ColorPicker.prototype, "disabled", {
        get: function () {
            var _a = this.props.disabled, disabled = _a === void 0 ? this.context.value : _a;
            return disabled;
        },
        enumerable: false,
        configurable: true
    });
    ColorPicker.prototype.render = function () {
        var _a;
        var _b = this.props, color = _b.color, showAlpha = _b.showAlpha, className = _b.className, wrapperClassName = _b.wrapperClassName, type = _b.type, presetColors = _b.presetColors;
        var popVisible = this.state.popVisible;
        var openClassName = popVisible ? prefixCls + "--open" : '';
        var backgroundColor = color;
        return (_jsxs(Popover, __assign({ className: cx(prefixCls + "-popover", className), position: Popover.Position.AutoBottomLeft, cushion: 5, visible: popVisible, onVisibleChange: this.handleVisibleChange }, { children: [_jsx(Popover.Trigger.Click, __assign({ toggle: true }, { children: _jsx("div", __assign({ className: cx(prefixCls, wrapperClassName, openClassName, (_a = {},
                            _a[prefixCls + "_disabled"] = this.disabled,
                            _a)), tabIndex: 0, "data-zv": 'v10.0.12' }, { children: _jsx("div", __assign({ className: prefixCls + "__text", "data-zv": 'v10.0.12' }, { children: _jsx("div", { className: prefixCls + "__preview", style: { backgroundColor: backgroundColor }, "data-zv": 'v10.0.12' }, void 0) }), void 0) }), void 0) }), void 0), _jsx(Popover.Content, { children: type === 'simple' ? (_jsx(SketchPresetColors, { colors: presetColors, onClick: this.handleChange, type: type }, void 0)) : (_jsx(ColorBoard, { color: color, showAlpha: showAlpha, onChange: this.handleChange, type: type }, void 0)) }, void 0)] }), void 0));
    };
    ColorPicker.defaultProps = {
        showAlpha: false,
        onChange: function () { },
        className: '',
        wrapperClassName: '',
        type: 'default',
        presetColors: [
            '#FFFFFF',
            '#F8F8F8',
            '#F2F2F2',
            '#999999',
            '#444444',
            '#FF4444',
            '#FF6500',
            '#FF884D',
            '#FFCD00',
            '#3FBD00',
            '#3FBC87',
            '#00CD98',
            '#5197FF',
            '#BADCFF',
            '#FFEFB8',
        ],
    };
    ColorPicker.ColorBoard = ColorBoard;
    ColorPicker.contextType = DisabledContext;
    return ColorPicker;
}(PureComponent));
export { ColorPicker };
export default ColorPicker;
