import type { Ref } from 'vue'
import { watch } from 'vue'

import useState from '../../_util/hooks/useState'
import type { Key } from '../../_util/type'
import { useBaseProps } from '../../vc-select'
import { useInjectCascader } from '../context'

/**
 * Control the active open options path.
 */
export default (): [Ref<Key[]>, (activeValueCells: Key[]) => void] => {
  const baseProps = useBaseProps()
  const { values } = useInjectCascader()

  // Record current dropdown active options
  // This also control the open status
  const [activeValueCells, setActiveValueCells] = useState<Key[]>([])

  watch(
    () => baseProps.open,
    () => {
      if (baseProps.open && !baseProps.multiple) {
        const firstValueCells = values.value[0]
        setActiveValueCells(firstValueCells || [])
      }
    },
    { immediate: true },
  )

  return [activeValueCells, setActiveValueCells]
}
