import { computed, defineComponent, ref, createVNode as _createVNode } from 'vue';
import '../color';
import { generateColor } from '../util';
import '../../vc-color-picker';
import ColorSteppers from './ColorSteppers';
const colorRgbInputProps = () => ({
  prefixCls: String,
  value: Object,
  onChange: Function
});
const ColorRgbInput = defineComponent({
  name: 'ColorRgbInput',
  inheritAttrs: false,
  props: colorRgbInputProps(),
  setup(props) {
    const colorRgbInputPrefixCls = computed(() => `${props.prefixCls}-rgb-input`);
    const internalValue = ref(generateColor(props.value || '#000'));
    const rgbValue = computed(() => props.value || internalValue.value);
    const handleRgbChange = (step, type) => {
      var _a;
      const rgb = rgbValue.value.toRgb();
      rgb[type] = step || 0;
      const genColor = generateColor(rgb);
      internalValue.value = genColor;
      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, genColor);
    };
    return () => {
      return _createVNode("div", {
        "class": colorRgbInputPrefixCls.value
      }, [_createVNode(ColorSteppers, {
        "max": 255,
        "min": 0,
        "value": Number(rgbValue.value.toRgb().r),
        "prefixCls": props.prefixCls,
        "className": colorRgbInputPrefixCls.value,
        "onChange": step => handleRgbChange(Number(step), 'r')
      }, null), _createVNode(ColorSteppers, {
        "max": 255,
        "min": 0,
        "value": Number(rgbValue.value.toRgb().g),
        "prefixCls": props.prefixCls,
        "className": colorRgbInputPrefixCls.value,
        "onChange": step => handleRgbChange(Number(step), 'g')
      }, null), _createVNode(ColorSteppers, {
        "max": 255,
        "min": 0,
        "value": Number(rgbValue.value.toRgb().b),
        "prefixCls": props.prefixCls,
        "className": colorRgbInputPrefixCls.value,
        "onChange": step => handleRgbChange(Number(step), 'b')
      }, null)]);
    };
  }
});
export default ColorRgbInput;