import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
import _extends from "@babel/runtime/helpers/esm/extends";
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, watch, watchPostEffect } from 'vue';
import { useInjectPanelPicker } from '../../context';
import { AggregationColor } from '../../color';
import { useForceUpdate } from '../../../_util/hooks/useForceUpdate';
import { genAlphaColor, generateColor } from '../../util';
import Segmented from '../../../segmented';
import ColorClear from '../ColorClear';
import GradientColorBar from './GradientColorBar';
import VcColorPicker from '../../../vc-color-picker';
import ColorSlider from '../ColorSlider';
import ColorInput from '../ColorInput';
const components = {
  slider: ColorSlider
};
const PanelPicker = defineComponent({
  name: 'PanelPicker',
  setup() {
    const panelPickerContext = 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 = computed(() => {
      if (!value.value.cleared) {
        return value.value.getColors();
      }
      return [{
        percent: 0,
        color: new AggregationColor('')
      }, {
        percent: 100,
        color: new AggregationColor('')
      }];
    });
    // ========================= Single Color =========================
    const isSingle = computed(() => !value.value.isGradient());
    const lockedColor = ref(value.value);
    watchPostEffect(() => {
      var _a;
      if (!isSingle.value) {
        lockedColor.value = (_a = colors.value[activeIndex.value]) === null || _a === void 0 ? void 0 : _a.color;
      }
    });
    const activeColor = 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 = ref(activeColor.value);
    const [forceSync, setForceSync] = useForceUpdate();
    const mergedPickerColor = computed(() => {
      var _a;
      return ((_a = pickerColor.value) === null || _a === void 0 ? void 0 : _a.equals(activeColor.value)) ? activeColor.value : pickerColor.value;
    });
    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 = 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 AggregationColor({
            h: infoType === 'hue' ? infoValue : 0,
            s: 1,
            b: 1,
            a: infoType === 'alpha' ? infoValue / 100 : 1
          });
        } else {
          submitColor = genAlphaColor(submitColor);
        }
      }
      if (mode.value === 'single') {
        return submitColor;
      }
      const nextColors = [...colors.value];
      nextColors[activeIndex.value] = _extends(_extends({}, nextColors[activeIndex.value]), {
        color: submitColor
      });
      return new 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 = _createVNode("div", {
          "class": `${prefixCls.value}-operation`
        }, [showMode && _createVNode(Segmented, {
          "size": "small",
          "options": modeOptions.value,
          "value": mode.value,
          "onChange": onModeChange
        }, null), _createVNode(ColorClear, {
          "prefixCls": prefixCls.value,
          "value": value.value,
          "onChange": clearColor => {
            onChange(clearColor);
            onClear === null || onClear === void 0 ? void 0 : onClear();
          }
        }, null)]);
      }
      return _createVNode(_Fragment, null, [operationNode, _createVNode(GradientColorBar, {
        "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), _createVNode(VcColorPicker, {
        "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), _createVNode(ColorInput, {
        "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)]);
    };
  }
});
export default PanelPicker;