import { computed, defineComponent, toRef, createVNode as _createVNode } from 'vue';
import { FORMAT_HEX, FORMAT_HSB, FORMAT_RGB } from '../interface';
import '../color';
import Select from '../../select';
import useMergedState from '../../_util/hooks/useMergedState';
import ColorHsbInput from './ColorHsbInput';
import ColorRgbInput from './ColorRgbInput';
import ColorHexInput from './ColorHexInput';
import ColorAlphaInput from './ColorAlphaInput';
const colorInputProps = () => ({
  prefixCls: String,
  format: String,
  onFormatChange: Function,
  disabledAlpha: Boolean,
  value: Object,
  onChange: Function,
  disabledFormat: Boolean
});
const selectOptions = [FORMAT_HEX, FORMAT_HSB, FORMAT_RGB].map(format => ({
  value: format,
  label: format.toUpperCase()
}));
const ColorInput = defineComponent({
  name: 'ColorInput',
  inheritAttrs: false,
  props: colorInputProps(),
  setup(props) {
    const [colorFormat, setColorFormat] = useMergedState(FORMAT_HEX, {
      value: toRef(props, 'format'),
      onChange: props.onFormatChange
    });
    const colorInputPrefixCls = computed(() => `${props.prefixCls}-input`);
    const handleFormatChange = newFormat => {
      setColorFormat(newFormat);
    };
    const steppersNode = computed(() => {
      const inputProps = {
        value: props.value,
        prefixCls: props.prefixCls,
        onChange: props.onChange
      };
      switch (colorFormat.value) {
        case FORMAT_HSB:
          return _createVNode(ColorHsbInput, inputProps, null);
        case FORMAT_RGB:
          return _createVNode(ColorRgbInput, inputProps, null);
        default:
          return _createVNode(ColorHexInput, inputProps, null);
      }
    });
    return () => {
      return _createVNode("div", {
        "class": `${colorInputPrefixCls.value}-container`
      }, [!props.disabledFormat && _createVNode(Select, {
        "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), _createVNode("div", {
        "class": colorInputPrefixCls.value
      }, [steppersNode.value]), !props.disabledAlpha && _createVNode(ColorAlphaInput, {
        "prefixCls": props.prefixCls,
        "value": props.value,
        "onChange": props.onChange
      }, null)]);
    };
  }
});
export default ColorInput;