import type { CSSProperties, ExtractPropTypes, VNodeTypes } from 'vue'
import { computed, defineComponent, ref } from 'vue'

import type { FocusEventHandler } from '../_util/EventInterface'
import classNames from '../_util/classNames'
import type { CustomSlotsType, VueNode } from '../_util/type'
import {
  booleanType,
  functionType,
  objectType,
  someType,
  stringType,
  withInstall,
} from '../_util/type'
import useConfigInject from '../config-provider/hooks/useConfigInject'
import { useInjectFormItemContext } from '../form/FormItemContext'
import type { TooltipPlacement } from '../tooltip/Tooltip'
import VcHandle from '../vc-slider/src/Handle'
import VcRange from '../vc-slider/src/Range'
import VcSlider from '../vc-slider/src/Slider'
import devWarning from '../vc-util/devWarning'
import SliderTooltip from './SliderTooltip'
// CSSINJS
import useStyle from './style'

export type SliderValue = number | [number, number]

export interface SliderMarks {
  [key: number]:
    | VueNode
    | {
        style: CSSProperties
        label: any
      }
}

interface HandleGeneratorInfo {
  value?: number
  dragging?: boolean
  index: number
}
export interface SliderRange {
  draggableTrack?: boolean
}
export type HandleGeneratorFn = (config: {
  tooltipPrefixCls?: string
  prefixCls?: string
  info: HandleGeneratorInfo
}) => VNodeTypes
type Value = [number, number] | number

const defaultTipFormatter = (value: number) => (typeof value === 'number' ? value.toString() : '')
export const sliderProps = () => ({
  id: String,
  prefixCls: String,
  tooltipPrefixCls: String,
  range: someType<boolean | SliderRange>([Boolean, Object]),
  reverse: booleanType(),
  min: Number,
  max: Number,
  step: someType<null | number>([Object, Number]),
  marks: objectType<SliderMarks>(),
  dots: booleanType(),
  value: someType<Value>([Array, Number]),
  defaultValue: someType<Value>([Array, Number]),
  included: booleanType(),
  disabled: booleanType(),
  vertical: booleanType(),
  tipFormatter: someType<((value?: number) => any) | null>(
    [Function, Object],
    () => defaultTipFormatter,
  ),
  tooltipOpen: booleanType(),
  /** @deprecated `tooltipVisible` is deprecated. Please use `tooltipOpen` instead. */
  tooltipVisible: booleanType(),
  tooltipPlacement: stringType<TooltipPlacement>(),
  getTooltipPopupContainer: functionType<(triggerNode: HTMLElement) => HTMLElement>(),
  autofocus: booleanType(),
  handleStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
  trackStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
  onChange: functionType<(value: Value) => void>(),
  onAfterChange: functionType<(value: Value) => void>(),
  onFocus: functionType<FocusEventHandler>(),
  onBlur: functionType<FocusEventHandler>(),
  'onUpdate:value': functionType<(value: Value) => void>(),
})

export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps>>>
export interface Visibles {
  [index: number]: boolean
}

const Slider = defineComponent({
  compatConfig: { MODE: 3 },
  name: 'ASlider',
  inheritAttrs: false,
  props: sliderProps(),
  // emits: ['update:value', 'change', 'afterChange', 'blur'],
  slots: Object as CustomSlotsType<{
    mark?: any
    default?: any
  }>,
  setup(props, { attrs, slots, emit, expose }) {
    // Warning for deprecated usage
    if (process.env.NODE_ENV !== 'production') {
      ;[['tooltipVisible', 'tooltipOpen']].forEach(([deprecatedName, newName]) => {
        devWarning(
          props.tooltipVisible === undefined,
          'Slider',
          `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`,
        )
      })
    }
    const { prefixCls, rootPrefixCls, direction, getPopupContainer, configProvider } =
      useConfigInject('slider', props)

    // style
    const [wrapSSR, hashId] = useStyle(prefixCls)

    const formItemContext = useInjectFormItemContext()
    const sliderRef = ref()
    const visibles = ref<Visibles>({})
    const toggleTooltipOpen = (index: number, visible: boolean) => {
      visibles.value[index] = visible
    }
    const tooltipPlacement = computed(() => {
      if (props.tooltipPlacement) {
        return props.tooltipPlacement
      }
      if (!props.vertical) {
        return 'top'
      }
      return direction.value === 'rtl' ? 'left' : 'right'
    })

    const focus = () => {
      sliderRef.value?.focus()
    }
    const blur = () => {
      sliderRef.value?.blur()
    }
    const handleChange = (val: SliderValue) => {
      emit('update:value', val)
      emit('change', val)
      formItemContext.onFieldChange()
    }
    const handleBlur = (e: FocusEvent) => {
      emit('blur', e)
    }
    expose({
      focus,
      blur,
    })
    const handleWithTooltip: HandleGeneratorFn = ({
      tooltipPrefixCls,
      info: { value, dragging, index, ...restProps },
    }) => {
      const { tipFormatter, tooltipOpen = props.tooltipVisible, getTooltipPopupContainer } = props
      const isTipFormatter = tipFormatter ? visibles.value[index] || dragging : false
      const open = tooltipOpen || (tooltipOpen === undefined && isTipFormatter)
      return (
        <SliderTooltip
          prefixCls={tooltipPrefixCls}
          title={tipFormatter ? tipFormatter(value) : ''}
          open={open}
          placement={tooltipPlacement.value}
          transitionName={`${rootPrefixCls.value}-zoom-down`}
          key={index}
          overlayClassName={`${prefixCls.value}-tooltip`}
          getPopupContainer={getTooltipPopupContainer || getPopupContainer?.value}
        >
          <VcHandle
            {...restProps}
            value={value}
            onMouseenter={() => toggleTooltipOpen(index, true)}
            onMouseleave={() => toggleTooltipOpen(index, false)}
          />
        </SliderTooltip>
      )
    }
    return () => {
      const {
        tooltipPrefixCls: customizeTooltipPrefixCls,
        range,
        id = formItemContext.id.value,
        ...restProps
      } = props
      const tooltipPrefixCls = configProvider.getPrefixCls('tooltip', customizeTooltipPrefixCls)
      const cls = classNames(
        attrs.class,
        {
          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
        },
        hashId.value,
      )

      // make reverse default on rtl direction
      if (direction.value === 'rtl' && !restProps.vertical) {
        restProps.reverse = !restProps.reverse
      }

      // extrack draggableTrack from range={{ ... }}
      let draggableTrack: boolean | undefined
      if (typeof range === 'object') {
        draggableTrack = range.draggableTrack
      }

      if (range) {
        return wrapSSR(
          <VcRange
            {...attrs}
            {...restProps}
            step={restProps.step!}
            draggableTrack={draggableTrack}
            class={cls}
            ref={sliderRef}
            handle={(info: HandleGeneratorInfo) =>
              handleWithTooltip({
                tooltipPrefixCls,
                prefixCls: prefixCls.value,
                info,
              })
            }
            prefixCls={prefixCls.value}
            onChange={handleChange}
            onBlur={handleBlur}
            v-slots={{ mark: slots.mark }}
          />,
        )
      }
      return wrapSSR(
        <VcSlider
          {...attrs}
          {...restProps}
          id={id}
          step={restProps.step!}
          class={cls}
          ref={sliderRef}
          handle={(info: HandleGeneratorInfo) =>
            handleWithTooltip({
              tooltipPrefixCls,
              prefixCls: prefixCls.value,
              info,
            })
          }
          prefixCls={prefixCls.value}
          onChange={handleChange}
          onBlur={handleBlur}
          v-slots={{ mark: slots.mark }}
        />,
      )
    }
  },
})

export default withInstall(Slider)
