import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
import _extends from "@babel/runtime/helpers/esm/extends";
import { defineComponent, toRef, computed, ref } from 'vue';
import { anyType } from '../_util/type';
import { baseColorPickerProps } from './interface';
import { initDefaultProps } from '../_util/props-util';
import Slider from './components/Slider';
import useColorState from './hooks/useColorState';
import { defaultColor } from './util';
import { Color } from './color';
import classNames from '../_util/classNames';
import Picker from './components/Picker';
import ColorBlock from './components/ColorBlock';
import { omit } from '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
}];
export const colorPickerProps = () => _extends(_extends({}, omit(baseColorPickerProps(), ['color'])), {
  value: anyType(),
  defaultValue: anyType(),
  className: String,
  style: Object,
  panelRender: Function,
  disabledAlpha: Boolean,
  components: Object
});
const ColorPicker = defineComponent({
  name: 'VcColorPicker',
  inheritAttrs: false,
  props: initDefaultProps(colorPickerProps(), {
    prefixCls: 'rc-color-picker'
  }),
  setup(props, {
    expose
  }) {
    const divRef = ref();
    expose({
      divRef
    });
    // ========================== Components ==========================
    const FinalSlider = props.components.slider || Slider;
    // ============================ Color =============================
    const [colorValue, setColorValue] = useColorState(props.defaultValue || defaultColor, toRef(props, 'value'));
    const alphaColor = 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(colorValue.value.setHue(hue));
    const getAlphaColor = alpha => new 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 = classNames(`${prefixCls}-panel`, className, {
        [`${prefixCls}-panel-disabled`]: disabled
      });
      const sharedSliderProps = {
        prefixCls,
        disabled,
        color: colorValue.value
      };
      const defaultPanel = _createVNode(_Fragment, null, [_createVNode(Picker, _objectSpread(_objectSpread({
        "onChange": handleChange
      }, sharedSliderProps), {}, {
        "onChangeComplete": onChangeComplete
      }), null), _createVNode("div", {
        "class": `${prefixCls}-slider-container`
      }, [_createVNode("div", {
        "class": classNames(`${prefixCls}-slider-group`, {
          [`${prefixCls}-slider-group-disabled-alpha`]: disabledAlpha
        })
      }, [_createVNode(FinalSlider, _objectSpread(_objectSpread({}, sharedSliderProps), {}, {
        "type": "hue",
        "colors": HUE_COLORS,
        "min": 0,
        "max": 359,
        "value": colorValue.value.getHue(),
        "onChange": onHueChange,
        "onChangeComplete": onHueChangeComplete
      }), null), !disabledAlpha && _createVNode(FinalSlider, _objectSpread(_objectSpread({}, 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)]), _createVNode(ColorBlock, {
        "color": colorValue.value.toRgbString(),
        "prefixCls": prefixCls
      }, null)])]);
      return _createVNode("div", {
        "class": mergedCls,
        "style": style,
        "ref": divRef
      }, [typeof panelRender === 'function' ? panelRender(defaultPanel) : defaultPanel]);
    };
  }
});
export default ColorPicker;