"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _color = require("../../vc-color-picker/color");
var _util = require("../util");
var _ColorSteppers = _interopRequireDefault(require("./ColorSteppers"));
var ColorHsbInput = (0, _vue.defineComponent)({
  name: 'ColorHsbInput',
  props: ['prefixCls', 'value', 'onChange'],
  setup: function setup(props) {
    var colorHsbInputPrefixCls = (0, _vue.computed)(function () {
      return "".concat(props.prefixCls, "-hsb-input");
    });
    var hsbValue = (0, _vue.ref)((0, _util.generateColor)(props.value || '#000'));
    (0, _vue.watch)(function () {
      return props.value;
    }, function (val) {
      if (val) {
        hsbValue.value = (0, _util.generateColor)(val || '#000');
      }
    }, {
      immediate: true
    });
    var handleHsbChange = function handleHsbChange(step, type) {
      var _props$onChange;
      var hsb = hsbValue.value.toHsb();
      hsb[type] = type === 'h' ? step : (step || 0) / 100;
      var genColor = (0, _util.generateColor)(hsb);
      if (!props.value) {
        hsbValue.value = genColor;
      }
      (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, genColor);
    };
    return function () {
      return (0, _vue.createVNode)("div", {
        "class": colorHsbInputPrefixCls.value
      }, [(0, _vue.createVNode)(_ColorSteppers.default, {
        "max": 360,
        "min": 0,
        "value": Number(hsbValue.value.toHsb().h),
        "prefixCls": props.prefixCls,
        "class": colorHsbInputPrefixCls.value,
        "formatter": function formatter(step) {
          return (0, _color.getRoundNumber)(step || 0).toString();
        },
        "onChange": function onChange(step) {
          return handleHsbChange(Number(step), 'h');
        }
      }, null), (0, _vue.createVNode)(_ColorSteppers.default, {
        "max": 100,
        "min": 0,
        "value": Number(hsbValue.value.toHsb().s) * 100,
        "prefixCls": props.prefixCls,
        "class": colorHsbInputPrefixCls.value,
        "formatter": function formatter(step) {
          return "".concat((0, _color.getRoundNumber)(step || 0), "%");
        },
        "onChange": function onChange(step) {
          return handleHsbChange(Number(step), 's');
        }
      }, null), (0, _vue.createVNode)(_ColorSteppers.default, {
        "max": 100,
        "min": 0,
        "value": Number(hsbValue.value.toHsb().b) * 100,
        "prefixCls": props.prefixCls,
        "class": colorHsbInputPrefixCls.value,
        "formatter": function formatter(step) {
          return "".concat((0, _color.getRoundNumber)(step || 0), "%");
        },
        "onChange": function onChange(step) {
          return handleHsbChange(Number(step), 'b');
        }
      }, null)]);
    };
  }
});
var _default = ColorHsbInput;
exports.default = _default;