"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _util = require("./util");
var _classNames3 = _interopRequireDefault(require("../_util/classNames"));
var _ColorBlock = _interopRequireDefault(require("./components/ColorBlock"));
var _Picker = _interopRequireDefault(require("./components/Picker"));
var _Slider = _interopRequireDefault(require("./components/Slider"));
var _useColorState3 = _interopRequireDefault(require("./hooks/useColorState"));
var hueColor = ['rgb(255, 0, 0) 0%', 'rgb(255, 255, 0) 17%', 'rgb(0, 255, 0) 33%', 'rgb(0, 255, 255) 50%', 'rgb(0, 0, 255) 67%', 'rgb(255, 0, 255) 83%', 'rgb(255, 0, 0) 100%'];
var ColorPicker = (0, _vue.defineComponent)({
  name: 'VcColorPicker',
  props: ['value', 'defaultValue', 'prefixCls', 'onChange', 'onChangeComplete', 'panelRender', 'disabledAlpha', 'disabled'],
  emits: ['change', 'changeComplete'],
  setup: function setup(props, _ref) {
    var expose = _ref.expose;
    var disabledAlpha = (0, _vue.computed)(function () {
      return props.disabledAlpha || false;
    });
    var disabled = (0, _vue.computed)(function () {
      return props.disabled || false;
    });
    var prefixCls = (0, _vue.computed)(function () {
      return props.prefixCls || _util.ColorPickerPrefixCls;
    });
    var value = (0, _vue.computed)(function () {
      return props.value;
    });
    var colorPickerRef = (0, _vue.shallowRef)();
    var _useColorState = (0, _useColorState3.default)(_util.defaultColor, {
        value: value,
        defaultValue: props.defaultValue
      }),
      _useColorState2 = (0, _slicedToArray2.default)(_useColorState, 2),
      colorValue = _useColorState2[0],
      setColorValue = _useColorState2[1];
    var alphaColor = (0, _vue.computed)(function () {
      var rgb = (0, _util.generateColor)(colorValue.value.toRgbString());
      // alpha color need equal 1 for base color
      rgb.setAlpha(1);
      return rgb.toRgbString();
    });
    var mergeCls = (0, _vue.computed)(function () {
      return (0, _classNames3.default)("".concat(prefixCls.value, "-panel"), (0, _defineProperty2.default)({}, "".concat(prefixCls.value, "-panel-disabled"), disabled.value));
    });
    var basicProps = (0, _vue.computed)(function () {
      return {
        prefixCls: prefixCls.value,
        onChangeComplete: props.onChangeComplete,
        disabled: disabled.value
      };
    });
    var handleChange = function handleChange(data, type) {
      var _props$onChange;
      if (!props.value) {
        setColorValue(data);
      }
      (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, data, type);
    };
    var defaultPanel = (0, _vue.computed)(function () {
      return (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)(_Picker.default, (0, _objectSpread2.default)({
        "color": colorValue.value,
        "onChange": handleChange
      }, basicProps.value), null), (0, _vue.createVNode)("div", {
        "class": "".concat(prefixCls.value, "-slider-container")
      }, [(0, _vue.createVNode)("div", {
        "class": (0, _classNames3.default)("".concat(prefixCls.value, "-slider-group"), (0, _defineProperty2.default)({}, "".concat(prefixCls.value, "-slider-group-disabled-alpha"), disabledAlpha.value))
      }, [(0, _vue.createVNode)(_Slider.default, (0, _objectSpread2.default)({
        "gradientColors": hueColor,
        "color": colorValue.value,
        "value": "hsl(".concat(colorValue.value.toHsb().h, ",100%, 50%)"),
        "onChange": function onChange(color) {
          return handleChange(color, 'hue');
        }
      }, basicProps.value), null), !disabledAlpha.value && (0, _vue.createVNode)(_Slider.default, (0, _objectSpread2.default)({
        "type": "alpha",
        "gradientColors": ['rgba(255, 0, 4, 0) 0%', alphaColor.value],
        "color": colorValue.value,
        "value": colorValue.value.toRgbString(),
        "onChange": function onChange(color) {
          return handleChange(color, 'alpha');
        }
      }, basicProps.value), null)]), (0, _vue.createVNode)(_ColorBlock.default, {
        "color": colorValue.value.toRgbString(),
        "prefixCls": prefixCls.value
      }, null)])]);
    });
    expose({
      colorPickerRef: colorPickerRef
    });
    return function () {
      return (0, _vue.createVNode)("div", {
        "class": mergeCls.value,
        "ref": colorPickerRef
      }, [typeof props.panelRender === 'function' ? props.panelRender(defaultPanel.value) : defaultPanel.value]);
    };
  }
});
var _default = ColorPicker;
exports.default = _default;