import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { createVNode as _createVNode } from "vue";
import { computed, defineComponent } from 'vue';
import useMergedState from '../../_util/hooks/useMergedState';
import Select from '../../select';
import { ColorFormat } from '../interface';
import ColorAlphaInput from './ColorAlphaInput';
import ColorHexInput from './ColorHexInput';
import ColorHsbInput from './ColorHsbInput';
import ColorRgbInput from './ColorRgbInput';
var BaseSelectOptions = [ColorFormat.hex, ColorFormat.hsb, ColorFormat.rgb].map(function (format) {
  return {
    value: format,
    label: format.toLocaleUpperCase()
  };
});
var ColorInput = defineComponent({
  name: 'ColorInput',
  props: ['prefixCls', 'format', 'formatOptions', 'onFormatChange', 'value', 'onChange'],
  setup: function setup(props) {
    var _useMergedState = useMergedState(props.format, {
        onChange: props.onFormatChange
      }),
      _useMergedState2 = _slicedToArray(_useMergedState, 2),
      colorFormat = _useMergedState2[0],
      setColorFormat = _useMergedState2[1];
    var selectOptions = computed(function () {
      return props.formatOptions ? BaseSelectOptions.filter(function (option) {
        return props.formatOptions.includes(option.value);
      }) : BaseSelectOptions;
    });
    var colorInputPrefixCls = computed(function () {
      return "".concat(props.prefixCls, "-input");
    });
    var handleFormatChange = function handleFormatChange(newFormat) {
      setColorFormat(newFormat);
    };
    var steppersNode = computed(function () {
      var inputProps = {
        value: props.value,
        prefixCls: props.prefixCls,
        onChange: props.onChange
      };
      switch (colorFormat.value) {
        case ColorFormat.hsb:
          return _createVNode(ColorHsbInput, inputProps, null);
        case ColorFormat.rgb:
          return _createVNode(ColorRgbInput, inputProps, null);
        case ColorFormat.hex:
        default:
          return _createVNode(ColorHexInput, inputProps, null);
      }
    });
    return function () {
      var _selectOptions$value, _selectOptions$value2, _selectOptions$value3, _selectOptions$value4;
      return _createVNode("div", {
        "class": "".concat(colorInputPrefixCls.value, "-container")
      }, [((_selectOptions$value = selectOptions.value) === null || _selectOptions$value === void 0 ? void 0 : _selectOptions$value.length) > 1 ? _createVNode(Select, {
        "value": colorFormat.value,
        "bordered": false,
        "dropdownMatchSelectWidth": 68,
        "placement": "bottomRight",
        "onChange": handleFormatChange,
        "class": "".concat(props.prefixCls, "-format-select"),
        "size": "small",
        "options": selectOptions.value
      }, null) : !!((_selectOptions$value2 = selectOptions.value) !== null && _selectOptions$value2 !== void 0 && _selectOptions$value2.length) && _createVNode("div", {
        "class": "".concat(props.prefixCls, "-format-single")
      }, [(_selectOptions$value3 = selectOptions.value) === null || _selectOptions$value3 === void 0 ? void 0 : (_selectOptions$value4 = _selectOptions$value3[0]) === null || _selectOptions$value4 === void 0 ? void 0 : _selectOptions$value4.label]), _createVNode("div", {
        "class": colorInputPrefixCls.value
      }, [steppersNode.value]), _createVNode(ColorAlphaInput, {
        "prefixCls": props.prefixCls,
        "value": props.value,
        "onChange": props.onChange
      }, null)]);
    };
  }
});
export default ColorInput;