import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
import { defineComponent, computed, shallowRef } from 'vue';
import { ColorPickerPrefixCls, defaultColor, generateColor } from './util';
import classNames from '../_util/classNames';
import ColorBlock from './components/ColorBlock';
import Picker from './components/Picker';
import Slider from './components/Slider';
import useColorState from './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 = 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 = computed(function () {
      return props.disabledAlpha || false;
    });
    var disabled = computed(function () {
      return props.disabled || false;
    });
    var prefixCls = computed(function () {
      return props.prefixCls || ColorPickerPrefixCls;
    });
    var value = computed(function () {
      return props.value;
    });
    var colorPickerRef = shallowRef();
    var _useColorState = useColorState(defaultColor, {
        value: value,
        defaultValue: props.defaultValue
      }),
      _useColorState2 = _slicedToArray(_useColorState, 2),
      colorValue = _useColorState2[0],
      setColorValue = _useColorState2[1];
    var alphaColor = computed(function () {
      var rgb = generateColor(colorValue.value.toRgbString());
      // alpha color need equal 1 for base color
      rgb.setAlpha(1);
      return rgb.toRgbString();
    });
    var mergeCls = computed(function () {
      return classNames("".concat(prefixCls.value, "-panel"), _defineProperty({}, "".concat(prefixCls.value, "-panel-disabled"), disabled.value));
    });
    var basicProps = 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 = computed(function () {
      return _createVNode(_Fragment, null, [_createVNode(Picker, _objectSpread({
        "color": colorValue.value,
        "onChange": handleChange
      }, basicProps.value), null), _createVNode("div", {
        "class": "".concat(prefixCls.value, "-slider-container")
      }, [_createVNode("div", {
        "class": classNames("".concat(prefixCls.value, "-slider-group"), _defineProperty({}, "".concat(prefixCls.value, "-slider-group-disabled-alpha"), disabledAlpha.value))
      }, [_createVNode(Slider, _objectSpread({
        "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 && _createVNode(Slider, _objectSpread({
        "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)]), _createVNode(ColorBlock, {
        "color": colorValue.value.toRgbString(),
        "prefixCls": prefixCls.value
      }, null)])]);
    });
    expose({
      colorPickerRef: colorPickerRef
    });
    return function () {
      return _createVNode("div", {
        "class": mergeCls.value,
        "ref": colorPickerRef
      }, [typeof props.panelRender === 'function' ? props.panelRender(defaultPanel.value) : defaultPanel.value]);
    };
  }
});
export default ColorPicker;