"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.colorPickerProps = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _vue = require("vue");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _type = require("../_util/type");
var _interface = require("./interface");
var _propsUtil = require("../_util/props-util");
var _Slider = _interopRequireDefault(require("./components/Slider"));
var _useColorState = _interopRequireDefault(require("./hooks/useColorState"));
var _util = require("./util");
var _color = require("./color");
var _classNames = _interopRequireDefault(require("../_util/classNames"));
var _Picker = _interopRequireDefault(require("./components/Picker"));
var _ColorBlock = _interopRequireDefault(require("./components/ColorBlock"));
var _lodash = require("lodash");
const HUE_COLORS = [{
  color: 'rgb(255, 0, 0)',
  percent: 0
}, {
  color: 'rgb(255, 255, 0)',
  percent: 17
}, {
  color: 'rgb(0, 255, 0)',
  percent: 33
}, {
  color: 'rgb(0, 255, 255)',
  percent: 50
}, {
  color: 'rgb(0, 0, 255)',
  percent: 67
}, {
  color: 'rgb(255, 0, 255)',
  percent: 83
}, {
  color: 'rgb(255, 0, 0)',
  percent: 100
}];
const colorPickerProps = () => (0, _extends2.default)((0, _extends2.default)({}, (0, _lodash.omit)((0, _interface.baseColorPickerProps)(), ['color'])), {
  value: (0, _type.anyType)(),
  defaultValue: (0, _type.anyType)(),
  className: String,
  style: Object,
  panelRender: Function,
  disabledAlpha: Boolean,
  components: Object
});
exports.colorPickerProps = colorPickerProps;
const ColorPicker = (0, _vue.defineComponent)({
  name: 'VcColorPicker',
  inheritAttrs: false,
  props: (0, _propsUtil.initDefaultProps)(colorPickerProps(), {
    prefixCls: 'rc-color-picker'
  }),
  setup(props, {
    expose
  }) {
    const divRef = (0, _vue.ref)();
    expose({
      divRef
    });
    // ========================== Components ==========================
    const FinalSlider = props.components.slider || _Slider.default;
    // ============================ Color =============================
    const [colorValue, setColorValue] = (0, _useColorState.default)(props.defaultValue || _util.defaultColor, (0, _vue.toRef)(props, 'value'));
    const alphaColor = (0, _vue.computed)(() => colorValue.value.setA(1).toRgbString());
    // ============================ Events ============================
    const handleChange = (data, type) => {
      var _a;
      if (!props.value) {
        setColorValue(data);
      }
      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, data, type);
    };
    // Convert
    const getHueColor = hue => new _color.Color(colorValue.value.setHue(hue));
    const getAlphaColor = alpha => new _color.Color(colorValue.value.setA(alpha / 100));
    // Slider change
    const onHueChange = hue => {
      handleChange(getHueColor(hue), {
        type: 'hue',
        value: hue
      });
    };
    const onAlphaChange = alpha => {
      handleChange(getAlphaColor(alpha), {
        type: 'alpha',
        value: alpha
      });
    };
    // Complete
    const onHueChangeComplete = hue => {
      var _a;
      (_a = props.onChangeComplete) === null || _a === void 0 ? void 0 : _a.call(props, getHueColor(hue));
    };
    const onAlphaChangeComplete = alpha => {
      var _a;
      (_a = props.onChangeComplete) === null || _a === void 0 ? void 0 : _a.call(props, getAlphaColor(alpha));
    };
    // ============================ Render ============================
    return () => {
      const {
        prefixCls,
        disabled,
        onChangeComplete,
        disabledAlpha,
        panelRender,
        className,
        style
      } = props;
      const mergedCls = (0, _classNames.default)(`${prefixCls}-panel`, className, {
        [`${prefixCls}-panel-disabled`]: disabled
      });
      const sharedSliderProps = {
        prefixCls,
        disabled,
        color: colorValue.value
      };
      const defaultPanel = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)(_Picker.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
        "onChange": handleChange
      }, sharedSliderProps), {}, {
        "onChangeComplete": onChangeComplete
      }), null), (0, _vue.createVNode)("div", {
        "class": `${prefixCls}-slider-container`
      }, [(0, _vue.createVNode)("div", {
        "class": (0, _classNames.default)(`${prefixCls}-slider-group`, {
          [`${prefixCls}-slider-group-disabled-alpha`]: disabledAlpha
        })
      }, [(0, _vue.createVNode)(FinalSlider, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, sharedSliderProps), {}, {
        "type": "hue",
        "colors": HUE_COLORS,
        "min": 0,
        "max": 359,
        "value": colorValue.value.getHue(),
        "onChange": onHueChange,
        "onChangeComplete": onHueChangeComplete
      }), null), !disabledAlpha && (0, _vue.createVNode)(FinalSlider, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, sharedSliderProps), {}, {
        "type": "alpha",
        "colors": [{
          percent: 0,
          color: 'rgba(255, 0, 4, 0)'
        }, {
          percent: 100,
          color: alphaColor.value
        }],
        "min": 0,
        "max": 100,
        "value": colorValue.value.a * 100,
        "onChange": onAlphaChange,
        "onChangeComplete": onAlphaChangeComplete
      }), null)]), (0, _vue.createVNode)(_ColorBlock.default, {
        "color": colorValue.value.toRgbString(),
        "prefixCls": prefixCls
      }, null)])]);
      return (0, _vue.createVNode)("div", {
        "class": mergedCls,
        "style": style,
        "ref": divRef
      }, [typeof panelRender === 'function' ? panelRender(defaultPanel) : defaultPanel]);
    };
  }
});
var _default = exports.default = ColorPicker;