import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { createVNode as _createVNode } from "vue";
import { computed, defineComponent, shallowRef } from 'vue';
// import useConfigInject from '../config-provider/hooks/useConfigInject';
import useConfigInject from '../_util/hooks/useConfigInject';
import Popover from '../popover';
import { generateColor } from './util';
import PropTypes from '../_util/vue-types';
import useMergedState from '../_util/hooks/useMergedState';
import classNames from '../_util/classNames';
import ColorPickerPanel from './ColorPickerPanel';
import ColorTrigger from './components/ColorTrigger';
import useColorState from './hooks/useColorState';
var DefaultColor = '#ffffff';
var colorPickerProps = function colorPickerProps() {
  return {
    value: {
      type: [String, Object],
      default: undefined
    },
    defaultValue: {
      type: [String, Object],
      default: DefaultColor
    },
    open: PropTypes.looseBool,
    disabled: PropTypes.looseBool,
    placement: {
      type: String,
      default: 'bottomLeft'
    },
    trigger: {
      type: String,
      default: 'click'
    },
    format: {
      type: String,
      default: 'hex'
    },
    formatOptions: {
      type: Array,
      default: undefined
    },
    allowClear: {
      type: Boolean,
      default: false
    },
    presets: {
      type: Array,
      default: undefined
    },
    arrow: {
      type: [Boolean, Object],
      default: true
    },
    styles: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    rootClassName: PropTypes.string,
    onOpenChange: {
      type: Function,
      default: function _default() {}
    },
    onFormatChange: {
      type: Function,
      default: function _default() {}
    },
    onChange: {
      type: Function,
      default: function _default() {}
    },
    getPopupContainer: {
      type: Function,
      default: undefined
    },
    autoAdjustOverflow: {
      type: Boolean,
      default: true
    },
    onChangeComplete: {
      type: Function,
      default: function _default() {}
    },
    showText: {
      type: [Boolean, Function],
      default: false
    },
    size: PropTypes.oneOf(['small', 'middle', 'large']),
    destroyTooltipOnHide: PropTypes.looseBool,
    panelRender: {
      type: Function,
      default: undefined
    }
  };
};
var ColorPicker = defineComponent({
  name: 'PfColorPicker',
  inheritAttrs: false,
  props: colorPickerProps(),
  setup: function setup(props, _ref) {
    var slots = _ref.slots,
      attrs = _ref.attrs,
      emit = _ref.emit;
    var _useConfigInject = useConfigInject('color-picker', props),
      prefixCls = _useConfigInject.prefixCls,
      getPopupContainer = _useConfigInject.getPopupContainer,
      direction = _useConfigInject.direction,
      size = _useConfigInject.size;
    var value = computed(function () {
      return props.value;
    });
    var _useColorState = useColorState(DefaultColor, {
        value: value,
        defaultValue: props.defaultValue
      }),
      _useColorState2 = _slicedToArray(_useColorState, 2),
      colorValue = _useColorState2[0],
      setColorValue = _useColorState2[1];
    var open = computed(function () {
      return props.open;
    });
    var _useMergedState = useMergedState(false, {
        value: open,
        postState: function postState(openData) {
          return !props.disabled && openData;
        },
        onChange: props.onOpenChange
      }),
      _useMergedState2 = _slicedToArray(_useMergedState, 2),
      popupOpen = _useMergedState2[0],
      setPopupOpen = _useMergedState2[1];
    var format = computed(function () {
      return props.format;
    });
    var _useMergedState3 = useMergedState(props.format, {
        value: format,
        onChange: props.onFormatChange
      }),
      _useMergedState4 = _slicedToArray(_useMergedState3, 2),
      formatValue = _useMergedState4[0],
      setFormatValue = _useMergedState4[1];
    // ===================== Style =====================
    var mergedSize = computed(function () {
      return props.size || size.value;
    });
    var rtlCls = computed(function () {
      return _defineProperty({}, "".concat(prefixCls.value, "-rtl"), direction.value);
    });
    var mergeCls = computed(function () {
      var _classNames;
      var mergeRootCls = classNames(props.rootClassName, rtlCls.value);
      return classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-sm"), mergedSize.value === 'small'), _defineProperty(_classNames, "".concat(prefixCls.value, "-lg"), mergedSize.value === 'large'), _classNames), mergeRootCls);
    });
    var mergePopupCls = computed(function () {
      return classNames(prefixCls.value, rtlCls.value);
    });
    var colorCleared = shallowRef(false);
    var popupAllowCloseRef = shallowRef(true);
    var handleChange = function handleChange(data, type, pickColor) {
      var color = generateColor(data);
      var isNull = value.value === null || !value.value && props.defaultValue === null;
      if (colorCleared.value || isNull) {
        colorCleared.value = false;
        var hsba = color.toHsb();
        // ignore alpha slider
        if (colorValue.value.toHsb().a === 0 && type !== 'alpha') {
          hsba.a = 1;
          color = generateColor(hsba);
        }
      }
      if (pickColor) {
        popupAllowCloseRef.value = false;
      }
      setColorValue(color);
      emit('update:value', color, color.toHexString());
      emit('change', color, color.toHexString());
    };
    var handleClear = function handleClear() {
      colorCleared.value = true;
      emit('clear');
    };
    var handleChangeComplete = function handleChangeComplete(color) {
      popupAllowCloseRef.value = true;
      emit('changeComplete', generateColor(color));
    };
    var onFormatChange = function onFormatChange(format) {
      setFormatValue(format);
      emit('formatChange', format);
    };
    var popoverProps = computed(function () {
      return {
        visible: popupOpen.value,
        trigger: props.trigger,
        placement: props.placement,
        arrow: props.arrow,
        rootClassName: props.rootClassName,
        getPopupContainer: getPopupContainer.value,
        autoAdjustOverflow: props.autoAdjustOverflow,
        destroyTooltipOnHide: props.destroyTooltipOnHide
      };
    });
    var colorBaseProps = computed(function () {
      return {
        prefixCls: prefixCls.value,
        color: colorValue.value,
        allowClear: props.allowClear,
        colorCleared: colorCleared.value,
        disabled: props.disabled,
        presets: props.presets,
        format: formatValue.value,
        formatOptions: props.formatOptions,
        panelRender: props.panelRender,
        onFormatChange: onFormatChange,
        onChangeComplete: handleChangeComplete
      };
    });
    return function () {
      var _props$styles, _props$styles2, _slots$children;
      return _createVNode(Popover, _objectSpread({
        "style": (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.popup,
        "overlayInnerStyle": (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.popupOverlayInner,
        "onVisibleChange": function onVisibleChange(visible) {
          if (popupAllowCloseRef.value) {
            setPopupOpen(visible);
          }
        },
        "content": _createVNode(ColorPickerPanel, _objectSpread(_objectSpread({}, colorBaseProps.value), {}, {
          "onChange": handleChange,
          "onClear": handleClear
        }), null),
        "overlayClassName": mergePopupCls.value
      }, popoverProps.value), {
        default: function _default() {
          return [((_slots$children = slots.children) === null || _slots$children === void 0 ? void 0 : _slots$children.call(slots)) || _createVNode(ColorTrigger, {
            "open": popupOpen.value,
            "class": mergeCls.value,
            "style": attrs.style,
            "color": props.value ? generateColor(props.value) : colorValue.value,
            "prefixCls": prefixCls.value,
            "disabled": props.disabled,
            "showText": props.showText,
            "colorCleared": colorCleared.value
          }, null)];
        }
      });
    };
  }
});
export default ColorPicker;