import { createVNode as _createVNode } from "vue";
//@ts-nocheck
import { computed } from 'vue';
import { defineComponent, ref, onMounted, onBeforeUnmount, getCurrentInstance } from "vue";
import addEventListener from '../_util/Dom/addEventListener';
import Tooltip from "../tooltip";
export default defineComponent({
  props: {
    prefixCls: String,
    value: Number,
    disabled: Boolean,
    min: Number,
    max: Number,
    formatTooltip: Function,
    tooltip: Boolean,
    onMousedown: Function,
    onMouseup: Function
  },

  setup(props, {
    attrs,
    emit,
    expose
  }) {
    const {
      proxy: self
    } = getCurrentInstance();
    const handleRef = ref();
    const focused = ref(false);
    const ratio = computed(() => (props.value - props.min) / (props.max - props.min)); //expose({
    //  focus() {
    //    handleRef.value.focus()
    //  },
    //  blur() {
    //    handleRef.value.blur(   )
    //  }
    //})
    // ====================== onMouseup ======================

    let onMouseUpListener;
    onMounted(() => {
      onMouseUpListener = addEventListener(document, 'mouseup', onMouseup);
    });
    onBeforeUnmount(() => {
      onMouseUpListener.remove();
    });

    function onBlur() {
      focused.value = false;
    }

    function onFocus() {
      focused.value = true;
    }

    function onMousedown(e) {
      var _props$onMousedown;

      focused.value = true;
      handleRef.value.focus();
      (_props$onMousedown = props.onMousedown) === null || _props$onMousedown === void 0 ? void 0 : _props$onMousedown.call(props, e);
    }

    function onMouseup(e) {
      var _props$onMouseup;

      (_props$onMouseup = props.onMouseup) === null || _props$onMouseup === void 0 ? void 0 : _props$onMouseup.call(props, e);
    }

    return () => {
      const {
        prefixCls,
        value,
        formatTooltip,
        tooltip
      } = props;
      const ariaProps = {
        'aria-valuemin': props.min,
        'aria-valuemax': props.max,
        'aria-valuenow': props.value,
        'aria-disabled': !!props.disabled
      };
      const handleProps = {
        ref: handleRef,
        class: [`${prefixCls}_handle`, {
          [`${prefixCls}_handle-focused`]: focused.value
        }],
        style: `left: ${ratio.value * 100}%`,
        role: 'slider',
        tabindex: 0,
        ...ariaProps,
        onBlur,
        onFocus,
        onMousedown,
        onMouseup
      };
      return _createVNode(Tooltip, {
        "title": (formatTooltip === null || formatTooltip === void 0 ? void 0 : formatTooltip(value)) || value,
        "visible": tooltip,
        "placement": "top",
        "trigger": 'hover focus',
        "popupClass": `${prefixCls}-tooltip`
      }, {
        default: () => [_createVNode("div", handleProps, null)]
      });
    };
  }

});