"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _vue = require("vue");
var _interface = require("./interface");
var _propsUtil = require("../_util/props-util");
var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
var _useMergedState = _interopRequireDefault(require("../_util/hooks/useMergedState"));
var _useModeColor = _interopRequireDefault(require("./hooks/useModeColor"));
var _util = require("./util");
var _color = require("./color");
var _FormItemContext = require("../form/FormItemContext");
var _statusUtils = require("../_util/statusUtils");
var _Compact = require("../space/Compact");
var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
var _classNames = _interopRequireDefault(require("../_util/classNames"));
var _popover = _interopRequireDefault(require("../popover"));
var _ColorPickerPanel = _interopRequireDefault(require("./ColorPickerPanel"));
var _ColorTrigger = _interopRequireDefault(require("./components/ColorTrigger"));
var _style = _interopRequireDefault(require("./style"));
var _type = require("../_util/type");
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 ColorPicker = (0, _vue.defineComponent)({
  name: 'AColorPicker',
  props: (0, _propsUtil.initDefaultProps)((0, _interface.colorPickerProps)(), {
    trigger: 'click',
    placement: 'bottomLeft',
    open: undefined,
    arrow: true
  }),
  setup(props, {
    slots
  }) {
    const {
      prefixCls,
      direction,
      disabled
    } = (0, _useConfigInject.default)('color-picker', props);
    const mergedDisabled = (0, _vue.computed)(() => {
      var _a;
      return (_a = props.disabled) !== null && _a !== void 0 ? _a : disabled.value;
    });
    const [popupOpen, setPopupOpen] = (0, _useMergedState.default)(false, {
      value: (0, _vue.toRef)(props, 'open'),
      postState: openData => !mergedDisabled.value && openData,
      onChange: props.onOpenChange
    });
    const [formatValue, setFormatValue] = (0, _useMergedState.default)(props.format, {
      value: (0, _vue.toRef)(props, 'format'),
      defaultValue: props.defaultFormat,
      onChange: props.onFormatChange
    });
    // ================== Value & Mode =================
    const {
      postColor: mergedColor,
      setColor,
      postMode: modeState,
      setModeState,
      modeOptionList: modeOptions
    } = (0, _useModeColor.default)(props.defaultValue, (0, _vue.toRef)(props, 'value'), (0, _vue.toRef)(props, 'mode'));
    const isAlphaColor = (0, _vue.computed)(() => (0, _util.getColorAlpha)(mergedColor.value) < 100);
    // ==================== Change =====================
    // To enhance user experience, we cache the gradient color when switch from gradient to single
    // If user not modify single color, we will use the cached gradient color.
    const cachedGradientColor = (0, _vue.ref)(null);
    const onInternalChangeComplete = color => {
      if (props.onChangeComplete) {
        let changeColor = (0, _util.generateColor)(color);
        if (props.disabledAlpha && isAlphaColor.value) {
          changeColor = (0, _util.genAlphaColor)(color);
        }
        props.onChangeComplete(changeColor);
      }
    };
    const onInternalChange = (data, changeFromPickerDrag) => {
      var _a, _b;
      let color = (0, _util.generateColor)(data);
      if (props.disabledAlpha && isAlphaColor.value) {
        color = (0, _util.genAlphaColor)(color);
      }
      setColor(color);
      cachedGradientColor.value = null;
      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, color, color.toCssString());
      (_b = props['onUpdate:value']) === null || _b === void 0 ? void 0 : _b.call(props, color);
      if (!changeFromPickerDrag) {
        onInternalChangeComplete(color);
      }
    };
    // =================== Gradient ====================
    const activeIndex = (0, _vue.ref)(0);
    const gradientDragging = (0, _vue.ref)(false);
    const onInternalModeChange = newMode => {
      setModeState(newMode);
      if (newMode === 'single' && mergedColor.value.isGradient()) {
        activeIndex.value = 0;
        onInternalChange(new _color.AggregationColor(mergedColor.value.getColors()[0].color));
        cachedGradientColor.value = mergedColor.value;
      } else if (newMode === 'gradient' && !mergedColor.value.isGradient()) {
        const baseColor = isAlphaColor.value ? (0, _util.genAlphaColor)(mergedColor.value) : mergedColor.value;
        onInternalChange(new _color.AggregationColor(cachedGradientColor.value || [{
          percent: 0,
          color: baseColor
        }, {
          percent: 100,
          color: baseColor
        }]));
      }
    };
    // ================== Form Status ==================
    const formItemInputContext = _FormItemContext.FormItemInputContext.useInject();
    const mergedStatus = (0, _vue.computed)(() => (0, _statusUtils.getMergedStatus)(formItemInputContext.status));
    // ==================== Compact ====================
    const {
      compactSize,
      compactItemClassnames
    } = (0, _Compact.useCompactItemContext)((0, _vue.toRef)(props, 'prefixCls'), direction);
    // ===================== Style =====================
    const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
    const mergedSize = (0, _useSize.default)(ctx => {
      var _a, _b;
      return (_b = (_a = props.size) !== null && _a !== void 0 ? _a : compactSize.value) !== null && _b !== void 0 ? _b : ctx;
    });
    return () => {
      var _a;
      const {
          mode,
          value,
          defaultValue,
          format,
          defaultFormat,
          allowClear = false,
          presets,
          trigger = 'click',
          open,
          disabled,
          placement = 'bottomLeft',
          arrow = true,
          panelRender,
          showText,
          style,
          className,
          size: customizeSize,
          rootClassName,
          prefixCls: customizePrefixCls,
          styles,
          disabledAlpha = false,
          onFormatChange,
          onChange,
          onClear,
          onOpenChange,
          onChangeComplete,
          getPopupContainer,
          autoAdjustOverflow = true,
          destroyTooltipOnHide,
          disabledFormat
        } = props,
        rest = __rest(props, ["mode", "value", "defaultValue", "format", "defaultFormat", "allowClear", "presets", "trigger", "open", "disabled", "placement", "arrow", "panelRender", "showText", "style", "className", "size", "rootClassName", "prefixCls", "styles", "disabledAlpha", "onFormatChange", "onChange", "onClear", "onOpenChange", "onChangeComplete", "getPopupContainer", "autoAdjustOverflow", "destroyTooltipOnHide", "disabledFormat"]);
      const rtlCls = {
        [`${prefixCls.value}-rtl`]: direction.value
      };
      const mergedRootCls = (0, _classNames.default)(props.rootClassName, rtlCls);
      const mergedCls = (0, _classNames.default)((0, _statusUtils.getStatusClassNames)(prefixCls.value, mergedStatus.value), {
        [`${prefixCls.value}-sm`]: mergedSize.value === 'small',
        [`${prefixCls.value}-lg`]: mergedSize.value === 'large'
      }, compactItemClassnames.value, mergedRootCls, className, hashId.value);
      const mergedPopupCls = (0, _classNames.default)(prefixCls.value, mergedRootCls);
      const popoverProps = {
        open: popupOpen.value,
        trigger,
        placement,
        arrow,
        getPopupContainer,
        autoAdjustOverflow,
        destroyTooltipOnHide
      };
      return wrapSSR((0, _vue.createVNode)(_popover.default, (0, _objectSpread2.default)({
        "style": styles === null || styles === void 0 ? void 0 : styles.popup,
        "overlayInnerStyle": styles === null || styles === void 0 ? void 0 : styles.popupOverlayInner,
        "onOpenChange": visible => {
          if (!visible || !mergedDisabled.value) {
            setPopupOpen(visible);
          }
        },
        "overlayClassName": mergedPopupCls,
        "class": rootClassName,
        "content": (0, _vue.createVNode)(_ColorPickerPanel.default, {
          "mode": modeState.value,
          "onModeChange": onInternalModeChange,
          "modeOptions": modeOptions.value,
          "prefixCls": prefixCls.value,
          "value": mergedColor.value,
          "allowClear": allowClear,
          "disabled": mergedDisabled.value,
          "disabledAlpha": disabledAlpha,
          "presets": presets,
          "panelRender": panelRender,
          "format": formatValue.value,
          "onFormatChange": setFormatValue,
          "onChange": onInternalChange,
          "onChangeComplete": onInternalChangeComplete,
          "onClear": onClear,
          "activeIndex": activeIndex.value,
          "onActive": nextVal => activeIndex.value = nextVal,
          "gradientDragging": gradientDragging.value,
          "onGradientDragging": dragging => gradientDragging.value = dragging,
          "disabledFormat": disabledFormat
        }, null)
      }, popoverProps), {
        default: () => [((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || (0, _vue.createVNode)(_ColorTrigger.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
          "activeIndex": popupOpen.value ? activeIndex.value : -1,
          "open": popupOpen.value,
          "className": mergedCls,
          "style": style,
          "prefixCls": prefixCls.value,
          "disabled": mergedDisabled.value,
          "showText": showText
        }, rest), {}, {
          "color": mergedColor.value
        }), null)]
      }));
    };
  }
});
var _default = exports.default = (0, _type.withInstall)(ColorPicker);