"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
var _popover = _interopRequireDefault(require("../popover"));
var _util = require("./util");
var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
var _useMergedState5 = _interopRequireDefault(require("../_util/hooks/useMergedState"));
var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
var _ColorPickerPanel = _interopRequireDefault(require("./ColorPickerPanel"));
var _ColorTrigger = _interopRequireDefault(require("./components/ColorTrigger"));
var _useColorState3 = _interopRequireDefault(require("./hooks/useColorState"));
// import useConfigInject from '../config-provider/hooks/useConfigInject';

var DefaultColor = '#ffffff';
var colorPickerProps = function colorPickerProps() {
  return {
    value: {
      type: [String, Object],
      default: undefined
    },
    defaultValue: {
      type: [String, Object],
      default: DefaultColor
    },
    open: _vueTypes.default.looseBool,
    disabled: _vueTypes.default.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: _vueTypes.default.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: _vueTypes.default.oneOf(['small', 'middle', 'large']),
    destroyTooltipOnHide: _vueTypes.default.looseBool,
    panelRender: {
      type: Function,
      default: undefined
    }
  };
};
var ColorPicker = (0, _vue.defineComponent)({
  name: 'PfColorPicker',
  inheritAttrs: false,
  props: colorPickerProps(),
  setup: function setup(props, _ref) {
    var slots = _ref.slots,
      attrs = _ref.attrs,
      emit = _ref.emit;
    var _useConfigInject = (0, _useConfigInject2.default)('color-picker', props),
      prefixCls = _useConfigInject.prefixCls,
      getPopupContainer = _useConfigInject.getPopupContainer,
      direction = _useConfigInject.direction,
      size = _useConfigInject.size;
    var value = (0, _vue.computed)(function () {
      return props.value;
    });
    var _useColorState = (0, _useColorState3.default)(DefaultColor, {
        value: value,
        defaultValue: props.defaultValue
      }),
      _useColorState2 = (0, _slicedToArray2.default)(_useColorState, 2),
      colorValue = _useColorState2[0],
      setColorValue = _useColorState2[1];
    var open = (0, _vue.computed)(function () {
      return props.open;
    });
    var _useMergedState = (0, _useMergedState5.default)(false, {
        value: open,
        postState: function postState(openData) {
          return !props.disabled && openData;
        },
        onChange: props.onOpenChange
      }),
      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
      popupOpen = _useMergedState2[0],
      setPopupOpen = _useMergedState2[1];
    var format = (0, _vue.computed)(function () {
      return props.format;
    });
    var _useMergedState3 = (0, _useMergedState5.default)(props.format, {
        value: format,
        onChange: props.onFormatChange
      }),
      _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
      formatValue = _useMergedState4[0],
      setFormatValue = _useMergedState4[1];
    // ===================== Style =====================
    var mergedSize = (0, _vue.computed)(function () {
      return props.size || size.value;
    });
    var rtlCls = (0, _vue.computed)(function () {
      return (0, _defineProperty2.default)({}, "".concat(prefixCls.value, "-rtl"), direction.value);
    });
    var mergeCls = (0, _vue.computed)(function () {
      var _classNames;
      var mergeRootCls = (0, _classNames2.default)(props.rootClassName, rtlCls.value);
      return (0, _classNames2.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-sm"), mergedSize.value === 'small'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-lg"), mergedSize.value === 'large'), _classNames), mergeRootCls);
    });
    var mergePopupCls = (0, _vue.computed)(function () {
      return (0, _classNames2.default)(prefixCls.value, rtlCls.value);
    });
    var colorCleared = (0, _vue.shallowRef)(false);
    var popupAllowCloseRef = (0, _vue.shallowRef)(true);
    var handleChange = function handleChange(data, type, pickColor) {
      var color = (0, _util.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 = (0, _util.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', (0, _util.generateColor)(color));
    };
    var onFormatChange = function onFormatChange(format) {
      setFormatValue(format);
      emit('formatChange', format);
    };
    var popoverProps = (0, _vue.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 = (0, _vue.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 (0, _vue.createVNode)(_popover.default, (0, _objectSpread2.default)({
        "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": (0, _vue.createVNode)(_ColorPickerPanel.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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)) || (0, _vue.createVNode)(_ColorTrigger.default, {
            "open": popupOpen.value,
            "class": mergeCls.value,
            "style": attrs.style,
            "color": props.value ? (0, _util.generateColor)(props.value) : colorValue.value,
            "prefixCls": prefixCls.value,
            "disabled": props.disabled,
            "showText": props.showText,
            "colorCleared": colorCleared.value
          }, null)];
        }
      });
    };
  }
});
var _default2 = ColorPicker;
exports.default = _default2;