"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useModeColor;
var _vue = require("vue");
var _LocaleReceiver = require("../../locale-provider/LocaleReceiver");
var _en_US = _interopRequireDefault(require("../../locale/en_US"));
var _useMergedState = _interopRequireDefault(require("../../_util/hooks/useMergedState"));
require("../color");
var _util = require("../util");
function useModeColor(defaultValue, value, mode) {
  const [locale] = (0, _LocaleReceiver.useLocaleReceiver)('ColorPicker', _en_US.default.ColorPicker);
  // ======================== Base ========================
  // Color
  const [mergedColor, setMergedColor] = (0, _useMergedState.default)(defaultValue, {
    value
  });
  // Mode
  const modeState = (0, _vue.ref)('single');
  const getModeOptions = (0, _vue.computed)(() => {
    const modeValue = mode.value;
    const list = (Array.isArray(modeValue) ? modeValue : [modeValue]).filter(m => m);
    if (!list.length) {
      list.push('single');
    }
    const modes = new Set(list);
    const optionList = [];
    const pushOption = (modeType, localeTxt) => {
      if (modes.has(modeType)) {
        optionList.push({
          label: localeTxt,
          value: modeType
        });
      }
    };
    pushOption('single', locale.value.singleColor);
    pushOption('gradient', locale.value.gradientColor);
    return {
      modes,
      optionList
    };
  });
  // ======================== Post ========================
  // We need align `mode` with `color` state
  // >>>>> Color
  const cacheColor = (0, _vue.ref)(null);
  const setColor = nextColor => {
    cacheColor.value = nextColor;
    setMergedColor(nextColor);
  };
  const postColor = (0, _vue.computed)(() => {
    const colorObj = (0, _util.generateColor)(mergedColor.value || '');
    return colorObj.equals(cacheColor.value) ? cacheColor.value : colorObj;
  });
  // >>>>> Mode
  const postMode = (0, _vue.computed)(() => {
    var _a;
    const {
      modes,
      optionList
    } = getModeOptions.value;
    if (modes.has(modeState.value)) {
      return modeState.value;
    }
    return (_a = optionList[0]) === null || _a === void 0 ? void 0 : _a.value;
  });
  // ======================= Effect =======================
  // Dynamic update mode when color change
  (0, _vue.watchEffect)(() => {
    modeState.value = postColor.value.isGradient() ? 'gradient' : 'single';
  });
  return {
    postColor,
    setColor,
    postMode,
    setModeState: nextMode => {
      modeState.value = nextMode;
    },
    modeOptionList: (0, _vue.computed)(() => getModeOptions.value.optionList)
  };
}