import { createVNode as _createVNode } from "vue";
import _extends from "@babel/runtime/helpers/esm/extends";
import { defineComponent, toRef } from 'vue';
import { panelPickerContextProps, panelPresetsContextProps, useProvidePanelPicker, useProvidePanelPresets } from './context';
import PanelPicker from './components/PanelPicker';
import Divider from '../divider';
import PanelPresets from './components/PanelPresets';
import { omit } from 'lodash';
export const colorPickerPanelProps = () => _extends(_extends(_extends({}, panelPickerContextProps()), omit(panelPresetsContextProps(), ['onChange'])), {
  onClear: Function,
  panelRender: Function
});
const ColorPickerPanel = defineComponent({
  name: 'ColorPickerPanel',
  props: colorPickerPanelProps(),
  setup(props) {
    // ===================== Context ======================
    useProvidePanelPicker({
      prefixCls: toRef(props, 'prefixCls'),
      value: toRef(props, 'value'),
      onChange: props.onChange,
      onClear: props.onClear,
      allowClear: toRef(props, 'allowClear'),
      disabledAlpha: toRef(props, 'disabledAlpha'),
      mode: toRef(props, 'mode'),
      onModeChange: props.onModeChange,
      modeOptions: toRef(props, 'modeOptions'),
      onChangeComplete: props.onChangeComplete,
      activeIndex: toRef(props, 'activeIndex'),
      onActive: props.onActive,
      format: toRef(props, 'format'),
      onFormatChange: props.onFormatChange,
      gradientDragging: toRef(props, 'gradientDragging'),
      onGradientDragging: props.onGradientDragging,
      disabledFormat: toRef(props, 'disabledAlpha')
    });
    useProvidePanelPresets({
      prefixCls: toRef(props, 'prefixCls'),
      value: toRef(props, 'value'),
      presets: toRef(props, 'presets'),
      onChange: props.onChange
    });
    // ====================== Render ======================
    return () => {
      const {
        prefixCls,
        presets,
        panelRender
      } = props;
      const colorPickerPanelPrefixCls = `${prefixCls}-inner`;
      const innerPanel = _createVNode("div", {
        "class": `${colorPickerPanelPrefixCls}-content`
      }, [_createVNode(PanelPicker, null, null), Array.isArray(presets) && _createVNode(Divider, null, null), _createVNode(PanelPresets, null, null)]);
      return _createVNode("div", {
        "class": colorPickerPanelPrefixCls
      }, [typeof panelRender === 'function' ? panelRender(innerPanel, {
        components: {
          Picker: PanelPicker,
          Presets: PanelPresets
        }
      }) : innerPanel]);
    };
  }
});
export default ColorPickerPanel;