"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _context = require("../../context");
var _color = require("../../color");
var _useForceUpdate = require("../../../_util/hooks/useForceUpdate");
var _util = require("../../util");
var _segmented = _interopRequireDefault(require("../../../segmented"));
var _ColorClear = _interopRequireDefault(require("../ColorClear"));
var _GradientColorBar = _interopRequireDefault(require("./GradientColorBar"));
var _vcColorPicker = _interopRequireDefault(require("../../../vc-color-picker"));
var _ColorSlider = _interopRequireDefault(require("../ColorSlider"));
var _ColorInput = _interopRequireDefault(require("../ColorInput"));
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 components = {
  slider: _ColorSlider.default
};
const PanelPicker = (0, _vue.defineComponent)({
  name: 'PanelPicker',
  setup() {
    const panelPickerContext = (0, _context.useInjectPanelPicker)();
    const {
        mode,
        onModeChange,
        modeOptions,
        prefixCls,
        allowClear,
        value,
        disabledAlpha,
        onChange,
        onClear,
        onChangeComplete,
        activeIndex,
        gradientDragging
      } = panelPickerContext,
      injectProps = __rest(panelPickerContext, ["mode", "onModeChange", "modeOptions", "prefixCls", "allowClear", "value", "disabledAlpha", "onChange", "onClear", "onChangeComplete", "activeIndex", "gradientDragging"]);
    // ============================ Colors ============================
    const colors = (0, _vue.computed)(() => {
      if (!value.value.cleared) {
        return value.value.getColors();
      }
      return [{
        percent: 0,
        color: new _color.AggregationColor('')
      }, {
        percent: 100,
        color: new _color.AggregationColor('')
      }];
    });
    // ========================= Single Color =========================
    const isSingle = (0, _vue.computed)(() => !value.value.isGradient());
    const lockedColor = (0, _vue.ref)(value.value);
    (0, _vue.watchPostEffect)(() => {
      var _a;
      if (!isSingle.value) {
        lockedColor.value = (_a = colors.value[activeIndex.value]) === null || _a === void 0 ? void 0 : _a.color;
      }
    });
    const activeColor = (0, _vue.computed)(() => {
      var _a;
      if (isSingle.value) {
        return value.value;
      }
      if (gradientDragging.value) {
        return lockedColor.value;
      }
      return (_a = colors.value[activeIndex.value]) === null || _a === void 0 ? void 0 : _a.color;
    });
    // ========================= Picker Color =========================
    const pickerColor = (0, _vue.ref)(activeColor.value);
    const [forceSync, setForceSync] = (0, _useForceUpdate.useForceUpdate)();
    const mergedPickerColor = (0, _vue.computed)(() => {
      var _a;
      return ((_a = pickerColor.value) === null || _a === void 0 ? void 0 : _a.equals(activeColor.value)) ? activeColor.value : pickerColor.value;
    });
    (0, _vue.watch)([forceSync, () => {
      var _a;
      return (_a = activeColor.value) === null || _a === void 0 ? void 0 : _a.toHexString();
    }], () => {
      pickerColor.value = activeColor.value;
    }, {
      flush: 'post'
    });
    // ============================ Change ============================
    const fillColor = (nextColor, info) => {
      let submitColor = (0, _util.generateColor)(nextColor);
      if (value.value.cleared) {
        const rgb = submitColor.toRgb();
        if (!rgb.r && !rgb.g && !rgb.b && info) {
          const {
            type: infoType,
            value: infoValue = 0
          } = info;
          submitColor = new _color.AggregationColor({
            h: infoType === 'hue' ? infoValue : 0,
            s: 1,
            b: 1,
            a: infoType === 'alpha' ? infoValue / 100 : 1
          });
        } else {
          submitColor = (0, _util.genAlphaColor)(submitColor);
        }
      }
      if (mode.value === 'single') {
        return submitColor;
      }
      const nextColors = [...colors.value];
      nextColors[activeIndex.value] = (0, _extends2.default)((0, _extends2.default)({}, nextColors[activeIndex.value]), {
        color: submitColor
      });
      return new _color.AggregationColor(nextColors);
    };
    const onPickerChange = (colorValue, fromPicker, info) => {
      const nextColor = fillColor(colorValue, info);
      pickerColor.value = nextColor.isGradient() ? nextColor.getColors()[activeIndex.value].color : nextColor;
      onChange(nextColor, fromPicker);
    };
    const onInternalChangeComplete = (nextColor, info) => {
      onChangeComplete(fillColor(nextColor, info));
      setForceSync();
    };
    const onInputChange = colorValue => {
      onChange(fillColor(colorValue));
    };
    // ============================ Render ============================
    return () => {
      var _a, _b, _c, _d, _e, _f;
      let operationNode = null;
      const showMode = modeOptions.value.length > 1;
      if (allowClear.value || showMode) {
        operationNode = (0, _vue.createVNode)("div", {
          "class": `${prefixCls.value}-operation`
        }, [showMode && (0, _vue.createVNode)(_segmented.default, {
          "size": "small",
          "options": modeOptions.value,
          "value": mode.value,
          "onChange": onModeChange
        }, null), (0, _vue.createVNode)(_ColorClear.default, {
          "prefixCls": prefixCls.value,
          "value": value.value,
          "onChange": clearColor => {
            onChange(clearColor);
            onClear === null || onClear === void 0 ? void 0 : onClear();
          }
        }, null)]);
      }
      return (0, _vue.createVNode)(_vue.Fragment, null, [operationNode, (0, _vue.createVNode)(_GradientColorBar.default, {
        "prefixCls": prefixCls.value,
        "allowClear": allowClear.value,
        "disabled": (_a = injectProps.disabled) === null || _a === void 0 ? void 0 : _a.value,
        "mode": mode.value,
        "onModeChange": onModeChange,
        "modeOptions": modeOptions.value,
        "value": value.value,
        "onChange": onChange,
        "onChangeComplete": onChangeComplete,
        "format": (_b = injectProps.format) === null || _b === void 0 ? void 0 : _b.value,
        "onFormatChange": injectProps.onFormatChange,
        "activeIndex": activeIndex.value,
        "onActive": injectProps.onActive,
        "gradientDragging": gradientDragging.value,
        "onGradientDragging": injectProps.onGradientDragging,
        "onClear": onClear,
        "disabledFormat": (_c = injectProps.disabledFormat) === null || _c === void 0 ? void 0 : _c.value,
        "colors": colors.value
      }, null), (0, _vue.createVNode)(_vcColorPicker.default, {
        "prefixCls": prefixCls.value,
        "value": (_d = mergedPickerColor.value) === null || _d === void 0 ? void 0 : _d.toHsb(),
        "disabledAlpha": disabledAlpha.value,
        "onChange": (colorValue, info) => {
          onPickerChange(colorValue, true, info);
        },
        "onChangeComplete": (colorValue, info) => {
          onInternalChangeComplete(colorValue, info);
        },
        "components": components
      }, null), (0, _vue.createVNode)(_ColorInput.default, {
        "value": activeColor.value,
        "onChange": onInputChange,
        "prefixCls": prefixCls.value,
        "disabledAlpha": disabledAlpha.value,
        "format": (_e = injectProps.format) === null || _e === void 0 ? void 0 : _e.value,
        "onFormatChange": injectProps.onFormatChange,
        "disabledFormat": (_f = injectProps.disabledFormat) === null || _f === void 0 ? void 0 : _f.value
      }, null)]);
    };
  }
});
var _default = exports.default = PanelPicker;