import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
import { computed, defineComponent, ref, createTextVNode as _createTextVNode, createVNode as _createVNode } from 'vue';
import { useLocaleReceiver } from '../../locale/LocaleReceiver';
import defaultLocale from '../../locale/en_US';
import classNames from '../../_util/classNames';
import { getColorAlpha } from '../util';
import ColorClear from './ColorClear';
import { ColorBlock } from '../../vc-color-picker';
import pickAttrs from '../../_util/pickAttrs';
export const colorTriggerProps = () => ({
  prefixCls: String,
  disabled: Boolean,
  format: String,
  color: Object,
  open: Boolean,
  showText: [Boolean, Function],
  className: String,
  style: Object,
  onClick: Function,
  onMouseEnter: Function,
  onMouseLeave: Function,
  activeIndex: Number
});
const ColorTrigger = defineComponent({
  name: 'ColorTrigger',
  props: colorTriggerProps(),
  setup(props, {
    expose
  }) {
    const colorTriggerPrefixCls = computed(() => `${props.prefixCls}-trigger`);
    const colorTextPrefixCls = computed(() => `${colorTriggerPrefixCls.value}-text`);
    const colorTextCellPrefixCls = computed(() => `${colorTextPrefixCls.value}-cell`);
    const divRef = ref();
    expose({
      divRef
    });
    const [locale] = useLocaleReceiver('ColorPicker', defaultLocale.ColorPicker);
    // ============================== Text ==============================
    const desc = computed(() => {
      const {
        showText,
        color,
        activeIndex,
        format
      } = props;
      if (!showText) {
        return '';
      }
      if (typeof showText === 'function') {
        return showText(color);
      }
      if (color.cleared) {
        return locale.value.transparent;
      }
      if (color.isGradient()) {
        return color.getColors().map((c, index) => {
          const inactive = activeIndex !== -1 && activeIndex !== index;
          return _createVNode("span", {
            "key": index,
            "class": classNames(colorTextCellPrefixCls.value, inactive && `${colorTextCellPrefixCls.value}-inactive`)
          }, [c.color.toRgbString(), _createTextVNode(" "), c.percent, _createTextVNode("%")]);
        });
      }
      const hexString = color.toHexString().toUpperCase();
      const alpha = getColorAlpha(color);
      switch (format) {
        case 'rgb':
          return color.toRgbString();
        case 'hsb':
          return color.toHsbString();
        default:
          return alpha < 100 ? `${hexString.slice(0, 7)},${alpha}%` : hexString;
      }
    });
    // ============================= Render =============================
    const containerNode = computed(() => props.color.cleared ? _createVNode(ColorClear, {
      "prefixCls": props.prefixCls
    }, null) : _createVNode(ColorBlock, {
      "prefixCls": props.prefixCls,
      "color": props.color.toCssString()
    }, null));
    return () => {
      const {
          color,
          prefixCls,
          open,
          disabled,
          format,
          className,
          showText,
          activeIndex
        } = props,
        rest = __rest(props, ["color", "prefixCls", "open", "disabled", "format", "className", "showText", "activeIndex"]);
      return _createVNode("div", _objectSpread({
        "ref": divRef,
        "class": classNames(colorTriggerPrefixCls.value, className, {
          [`${colorTriggerPrefixCls.value}-active`]: open,
          [`${colorTriggerPrefixCls.value}-disabled`]: disabled
        })
      }, pickAttrs(rest)), [containerNode.value, showText && _createVNode("div", {
        "class": colorTextPrefixCls.value
      }, [desc.value])]);
    };
  }
});
export default ColorTrigger;