import { createVNode as _createVNode } from "vue";
import { computed, defineComponent, ref, watch } from 'vue';
import Input from '../../input';
import { generateColor, toHexFormat } from '../util';
var hexReg = /(^#[\da-f]{6}$)|(^#[\da-f]{8}$)/i;
var isHexString = function isHexString(hex) {
  return hexReg.test("#".concat(hex));
};
var ColorHexInput = defineComponent({
  name: 'ColorHexInput',
  props: ['prefixCls', 'value', 'onChange'],
  setup: function setup(props) {
    var _props$value;
    var colorHexInputPrefixCls = computed(function () {
      return "".concat(props.prefixCls, "-hex-input");
    });
    var hexValue = ref((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.toHex());
    watch(function () {
      return props.value;
    }, function (val) {
      var hex = val === null || val === void 0 ? void 0 : val.toHex();
      if (isHexString(hex) && val) {
        hexValue.value = toHexFormat(hex);
      }
    }, {
      immediate: true
    });
    var handleHexChange = function handleHexChange(e) {
      var originValue = e.target.value;
      hexValue.value = toHexFormat(originValue);
      if (isHexString(toHexFormat(originValue, true))) {
        var _props$onChange;
        (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, generateColor(originValue));
      }
    };
    return function () {
      return _createVNode(Input, {
        "class": colorHexInputPrefixCls.value,
        "value": hexValue.value.toUpperCase(),
        "prefix": "#",
        "onChange": handleHexChange,
        "size": "small"
      }, null);
    };
  }
});
export default ColorHexInput;