import { createVNode as _createVNode } from "vue";
import { computed, defineComponent, ref, watch } from 'vue';
import { generateColor } from '../util';
import ColorSteppers from './ColorSteppers';
var ColorRgbInput = defineComponent({
  name: 'ColorRgbInput',
  props: ['prefixCls', 'value', 'onChange'],
  setup: function setup(props) {
    var colorRgbInputPrefixCls = computed(function () {
      return "".concat(props.prefixCls, "-rgb-input");
    });
    var rgbValue = ref(generateColor(props.value || '#000'));
    watch(function () {
      return props.value;
    }, function (val) {
      if (val) {
        rgbValue.value = generateColor(val || '#000');
      }
    }, {
      immediate: true
    });
    var handleRgbChange = function handleRgbChange(step, type) {
      var _props$onChange;
      var rgb = rgbValue.value.toRgb();
      rgb[type] = step || 0;
      var genColor = generateColor(rgb);
      if (!props.value) {
        rgbValue.value = genColor;
      }
      (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, genColor);
    };
    return function () {
      return _createVNode("div", {
        "class": colorRgbInputPrefixCls.value
      }, [_createVNode(ColorSteppers, {
        "max": 255,
        "min": 0,
        "value": Number(rgbValue.value.toRgb().r),
        "prefixCls": props.prefixCls,
        "class": colorRgbInputPrefixCls.value,
        "onChange": function onChange(step) {
          return handleRgbChange(Number(step), 'r');
        }
      }, null), _createVNode(ColorSteppers, {
        "max": 255,
        "min": 0,
        "value": Number(rgbValue.value.toRgb().g),
        "prefixCls": props.prefixCls,
        "class": colorRgbInputPrefixCls.value,
        "onChange": function onChange(step) {
          return handleRgbChange(Number(step), 'g');
        }
      }, null), _createVNode(ColorSteppers, {
        "max": 255,
        "min": 0,
        "value": Number(rgbValue.value.toRgb().b),
        "prefixCls": props.prefixCls,
        "class": colorRgbInputPrefixCls.value,
        "onChange": function onChange(step) {
          return handleRgbChange(Number(step), 'b');
        }
      }, null)]);
    };
  }
});
export default ColorRgbInput;