"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.colorTriggerProps = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _vue = require("vue");
var _LocaleReceiver = require("../../locale/LocaleReceiver");
var _en_US = _interopRequireDefault(require("../../locale/en_US"));
var _classNames = _interopRequireDefault(require("../../_util/classNames"));
var _util = require("../util");
var _ColorClear = _interopRequireDefault(require("./ColorClear"));
var _vcColorPicker = require("../../vc-color-picker");
var _pickAttrs = _interopRequireDefault(require("../../_util/pickAttrs"));
var __rest = void 0 && (void 0).__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;
};
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
});
exports.colorTriggerProps = colorTriggerProps;
const ColorTrigger = (0, _vue.defineComponent)({
  name: 'ColorTrigger',
  props: colorTriggerProps(),
  setup(props, {
    expose
  }) {
    const colorTriggerPrefixCls = (0, _vue.computed)(() => `${props.prefixCls}-trigger`);
    const colorTextPrefixCls = (0, _vue.computed)(() => `${colorTriggerPrefixCls.value}-text`);
    const colorTextCellPrefixCls = (0, _vue.computed)(() => `${colorTextPrefixCls.value}-cell`);
    const divRef = (0, _vue.ref)();
    expose({
      divRef
    });
    const [locale] = (0, _LocaleReceiver.useLocaleReceiver)('ColorPicker', _en_US.default.ColorPicker);
    // ============================== Text ==============================
    const desc = (0, _vue.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 (0, _vue.createVNode)("span", {
            "key": index,
            "class": (0, _classNames.default)(colorTextCellPrefixCls.value, inactive && `${colorTextCellPrefixCls.value}-inactive`)
          }, [c.color.toRgbString(), (0, _vue.createTextVNode)(" "), c.percent, (0, _vue.createTextVNode)("%")]);
        });
      }
      const hexString = color.toHexString().toUpperCase();
      const alpha = (0, _util.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 = (0, _vue.computed)(() => props.color.cleared ? (0, _vue.createVNode)(_ColorClear.default, {
      "prefixCls": props.prefixCls
    }, null) : (0, _vue.createVNode)(_vcColorPicker.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 (0, _vue.createVNode)("div", (0, _objectSpread2.default)({
        "ref": divRef,
        "class": (0, _classNames.default)(colorTriggerPrefixCls.value, className, {
          [`${colorTriggerPrefixCls.value}-active`]: open,
          [`${colorTriggerPrefixCls.value}-disabled`]: disabled
        })
      }, (0, _pickAttrs.default)(rest)), [containerNode.value, showText && (0, _vue.createVNode)("div", {
        "class": colorTextPrefixCls.value
      }, [desc.value])]);
    };
  }
});
var _default = exports.default = ColorTrigger;