import { computed, defineComponent, ref, watch, createVNode as _createVNode } from 'vue';
import { toHexFormat } from '../color';
import Input from '../../input';
import '../../_util/EventInterface';
import { generateColor } from '../util';
const colorHexInputProps = () => ({
  prefixCls: String,
  value: Object,
  onChange: Function
});
const hexReg = /(^#[\da-f]{6}$)|(^#[\da-f]{8}$)/i;
const isHexString = hex => hexReg.test(`#${hex}`);
const ColorHexInput = defineComponent({
  name: 'ColorHexInput',
  inheritAttrs: false,
  props: colorHexInputProps(),
  setup(props) {
    const colorHexInputPrefixCls = computed(() => `${props.prefixCls}-hex-input`);
    const hexValue = ref(props.value ? toHexFormat(props.value.toHexString()) : undefined);
    watch(() => props.value, nextValue => {
      if (nextValue) {
        hexValue.value = toHexFormat(nextValue.toHexString());
      }
    }, {
      immediate: true,
      flush: 'post'
    });
    const handleHexChange = e => {
      var _a;
      const originValue = e.target.value;
      hexValue.value = toHexFormat(originValue);
      if (isHexString(toHexFormat(originValue, true))) {
        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, generateColor(originValue));
      }
    };
    return () => {
      return _createVNode(Input, {
        "class": colorHexInputPrefixCls.value,
        "value": hexValue.value,
        "prefix": "#",
        "onChange": handleHexChange,
        "size": "small"
      }, null);
    };
  }
});
export default ColorHexInput;