"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _interface = require("../interface");
require("../color");
var _select = _interopRequireDefault(require("../../select"));
var _useMergedState = _interopRequireDefault(require("../../_util/hooks/useMergedState"));
var _ColorHsbInput = _interopRequireDefault(require("./ColorHsbInput"));
var _ColorRgbInput = _interopRequireDefault(require("./ColorRgbInput"));
var _ColorHexInput = _interopRequireDefault(require("./ColorHexInput"));
var _ColorAlphaInput = _interopRequireDefault(require("./ColorAlphaInput"));
const colorInputProps = () => ({
  prefixCls: String,
  format: String,
  onFormatChange: Function,
  disabledAlpha: Boolean,
  value: Object,
  onChange: Function,
  disabledFormat: Boolean
});
const selectOptions = [_interface.FORMAT_HEX, _interface.FORMAT_HSB, _interface.FORMAT_RGB].map(format => ({
  value: format,
  label: format.toUpperCase()
}));
const ColorInput = (0, _vue.defineComponent)({
  name: 'ColorInput',
  inheritAttrs: false,
  props: colorInputProps(),
  setup(props) {
    const [colorFormat, setColorFormat] = (0, _useMergedState.default)(_interface.FORMAT_HEX, {
      value: (0, _vue.toRef)(props, 'format'),
      onChange: props.onFormatChange
    });
    const colorInputPrefixCls = (0, _vue.computed)(() => `${props.prefixCls}-input`);
    const handleFormatChange = newFormat => {
      setColorFormat(newFormat);
    };
    const steppersNode = (0, _vue.computed)(() => {
      const inputProps = {
        value: props.value,
        prefixCls: props.prefixCls,
        onChange: props.onChange
      };
      switch (colorFormat.value) {
        case _interface.FORMAT_HSB:
          return (0, _vue.createVNode)(_ColorHsbInput.default, inputProps, null);
        case _interface.FORMAT_RGB:
          return (0, _vue.createVNode)(_ColorRgbInput.default, inputProps, null);
        default:
          return (0, _vue.createVNode)(_ColorHexInput.default, inputProps, null);
      }
    });
    return () => {
      return (0, _vue.createVNode)("div", {
        "class": `${colorInputPrefixCls.value}-container`
      }, [!props.disabledFormat && (0, _vue.createVNode)(_select.default, {
        "value": colorFormat.value,
        "variant": "borderless",
        "getPopupContainer": current => current.parentNode,
        "dropdownMatchSelectWidth": 68,
        "placement": "bottomRight",
        "onChange": handleFormatChange,
        "class": `${props.prefixCls}-format-select`,
        "size": "small",
        "options": selectOptions
      }, null), (0, _vue.createVNode)("div", {
        "class": colorInputPrefixCls.value
      }, [steppersNode.value]), !props.disabledAlpha && (0, _vue.createVNode)(_ColorAlphaInput.default, {
        "prefixCls": props.prefixCls,
        "value": props.value,
        "onChange": props.onChange
      }, null)]);
    };
  }
});
var _default = exports.default = ColorInput;