import { computed, defineComponent, ref, createVNode as _createVNode } from 'vue';
import '../color';
import { generateColor, getRoundNumber } from '../util';
import '../../vc-color-picker';
import ColorSteppers from './ColorSteppers';
const colorHsbInputProps = () => ({
  prefixCls: String,
  value: Object,
  onChange: Function
});
const ColorHsbInput = defineComponent({
  name: 'ColorHsbInput',
  inheritAttrs: false,
  props: colorHsbInputProps(),
  setup(props) {
    const colorHsbInputPrefixCls = computed(() => `${props.prefixCls}-hsb-input`);
    const internalValue = ref(generateColor(props.value || '#000'));
    const hsbValue = computed(() => props.value || internalValue.value);
    const handleHsbChange = (step, type) => {
      var _a;
      const hsb = hsbValue.value.toHsb();
      hsb[type] = type === 'h' ? step : (step || 0) / 100;
      const genColor = generateColor(hsb);
      internalValue.value = genColor;
      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, genColor);
    };
    return () => {
      return _createVNode("div", {
        "class": colorHsbInputPrefixCls.value
      }, [_createVNode(ColorSteppers, {
        "max": 360,
        "min": 0,
        "value": Number(hsbValue.value.toHsb().h),
        "prefixCls": props.prefixCls,
        "className": colorHsbInputPrefixCls.value,
        "formatter": step => getRoundNumber(Number(step) || 0).toString(),
        "onChange": step => handleHsbChange(Number(step), 'h')
      }, null), _createVNode(ColorSteppers, {
        "max": 100,
        "min": 0,
        "value": Number(hsbValue.value.toHsb().s * 100),
        "prefixCls": props.prefixCls,
        "className": colorHsbInputPrefixCls.value,
        "formatter": step => `${getRoundNumber(Number(step) || 0)}%`,
        "onChange": step => handleHsbChange(Number(step), 's')
      }, null), _createVNode(ColorSteppers, {
        "max": 100,
        "min": 0,
        "value": Number(hsbValue.value.toHsb().b * 100),
        "prefixCls": props.prefixCls,
        "className": colorHsbInputPrefixCls.value,
        "formatter": step => `${getRoundNumber(Number(step) || 0)}%`,
        "onChange": step => handleHsbChange(Number(step), 'b')
      }, null)]);
    };
  }
});
export default ColorHsbInput;