import PropTypes from '../../_util/vue-types'
import BaseMixin from '../../_util/BaseMixin'
import Tooltip from '../../vc-tooltip'
import { getOptionProps } from '../../_util/props-util'
import Handle from './Handle'

export default function createSliderWithTooltip (Component) {
  return {
    mixins: [BaseMixin, Component],
    props: {
      ...Component.props,
      tipFormatter: PropTypes.func.def((value) => { return value }),
      handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
      tipProps: PropTypes.object.def({}),
    },
    data () {
      return {
        visibles: {},
      }
    },
    methods: {
      handleTooltipVisibleChange (index, visible) {
        this.setState((prevState) => {
          return {
            visibles: {
              ...prevState.visibles,
              [index]: visible,
            },
          }
        })
      },
      handleWithTooltip ({ value, dragging, index, disabled, ...restProps }) {
        const {
          tipFormatter,
          tipProps,
          handleStyle,
        } = this.$props

        const {
          prefixCls = 'rc-slider-tooltip',
          overlay = tipFormatter(value),
          placement = 'top',
          visible = false,
          ...restTooltipProps
        } = tipProps

        let handleStyleWithIndex
        if (Array.isArray(handleStyle)) {
          handleStyleWithIndex = handleStyle[index] || handleStyle[0]
        } else {
          handleStyleWithIndex = handleStyle
        }

        const tooltipProps = {
          props: {
            ...restTooltipProps,
            prefixCls,
            overlay,
            placement,
            visible: (!disabled && (this.visibles[index] || dragging)) || visible,
          },
          key: index,
        }
        const handleProps = {
          props: {
            value,
            ...restProps,
          },
          on: {
            mouseenter: () => this.handleTooltipVisibleChange(index, true),
            mouseleave: () => this.handleTooltipVisibleChange(index, false),
          },
          style: {
            ...handleStyleWithIndex,
          },
        }

        return (
          <Tooltip
            {...tooltipProps}
          >

            <Handle
              {...handleProps}
            />
          </Tooltip>
        )
      },
    },
    render () {
      const componentProps = {
        props: {
          ...getOptionProps(this),
          handle: this.handleWithTooltip,
        },
      }
      return <Component {...componentProps}/>
    },
  }
}