"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.colorPickerPanelProps = void 0;
var _vue = require("vue");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _context = require("./context");
var _PanelPicker = _interopRequireDefault(require("./components/PanelPicker"));
var _divider = _interopRequireDefault(require("../divider"));
var _PanelPresets = _interopRequireDefault(require("./components/PanelPresets"));
var _lodash = require("lodash");
const colorPickerPanelProps = () => (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, (0, _context.panelPickerContextProps)()), (0, _lodash.omit)((0, _context.panelPresetsContextProps)(), ['onChange'])), {
  onClear: Function,
  panelRender: Function
});
exports.colorPickerPanelProps = colorPickerPanelProps;
const ColorPickerPanel = (0, _vue.defineComponent)({
  name: 'ColorPickerPanel',
  props: colorPickerPanelProps(),
  setup(props) {
    // ===================== Context ======================
    (0, _context.useProvidePanelPicker)({
      prefixCls: (0, _vue.toRef)(props, 'prefixCls'),
      value: (0, _vue.toRef)(props, 'value'),
      onChange: props.onChange,
      onClear: props.onClear,
      allowClear: (0, _vue.toRef)(props, 'allowClear'),
      disabledAlpha: (0, _vue.toRef)(props, 'disabledAlpha'),
      mode: (0, _vue.toRef)(props, 'mode'),
      onModeChange: props.onModeChange,
      modeOptions: (0, _vue.toRef)(props, 'modeOptions'),
      onChangeComplete: props.onChangeComplete,
      activeIndex: (0, _vue.toRef)(props, 'activeIndex'),
      onActive: props.onActive,
      format: (0, _vue.toRef)(props, 'format'),
      onFormatChange: props.onFormatChange,
      gradientDragging: (0, _vue.toRef)(props, 'gradientDragging'),
      onGradientDragging: props.onGradientDragging,
      disabledFormat: (0, _vue.toRef)(props, 'disabledAlpha')
    });
    (0, _context.useProvidePanelPresets)({
      prefixCls: (0, _vue.toRef)(props, 'prefixCls'),
      value: (0, _vue.toRef)(props, 'value'),
      presets: (0, _vue.toRef)(props, 'presets'),
      onChange: props.onChange
    });
    // ====================== Render ======================
    return () => {
      const {
        prefixCls,
        presets,
        panelRender
      } = props;
      const colorPickerPanelPrefixCls = `${prefixCls}-inner`;
      const innerPanel = (0, _vue.createVNode)("div", {
        "class": `${colorPickerPanelPrefixCls}-content`
      }, [(0, _vue.createVNode)(_PanelPicker.default, null, null), Array.isArray(presets) && (0, _vue.createVNode)(_divider.default, null, null), (0, _vue.createVNode)(_PanelPresets.default, null, null)]);
      return (0, _vue.createVNode)("div", {
        "class": colorPickerPanelPrefixCls
      }, [typeof panelRender === 'function' ? panelRender(innerPanel, {
        components: {
          Picker: _PanelPicker.default,
          Presets: _PanelPresets.default
        }
      }) : innerPanel]);
    };
  }
});
var _default = exports.default = ColorPickerPanel;