import { defineComponent, h, onUpdated, PropType, ref, watch } from 'vue'

import { useIsVisible } from '../../composables'

export interface Element {
  value: number | string
  label: number | string
}

const CTimePickerRollCol = defineComponent({
  name: 'CTimePickerRollCol',
  props: {
    elements: {
      type: Array as PropType<Element[]>,
      required: true,
    },
    selected: {
      type: [Number, String],
    },
  },
  emits: ['click'],
  setup(props, { emit }) {
    const init = ref(true)
    const colRef = ref<HTMLElement>()
    const isVisible = useIsVisible(colRef)

    const scrollToSelectedElement = () => {
      const nodeEl = colRef.value?.querySelector('.selected')
      if (isVisible.value && nodeEl && nodeEl instanceof HTMLElement) {
        colRef.value?.scrollTo({
          top: nodeEl.offsetTop,
          behavior: init.value ? 'auto' : 'smooth',
        })
      }
    }

    watch(isVisible, () => {
      scrollToSelectedElement()

      if (isVisible.value) {
        init.value = false
      }
    })

    onUpdated(() => {
      scrollToSelectedElement()
    })

    const handleKeyDown = (event: KeyboardEvent, value: number | string) => {
      if (event.code === 'Space' || event.key === 'Enter') {
        event.preventDefault()
        emit('click', value)
      }
    }

    return () =>
      h(
        'div',
        { class: 'time-picker-roll-col', ref: colRef },
        props.elements.map((element) => {
          return h(
            'div',
            {
              class: [
                'time-picker-roll-cell',
                {
                  selected: element.value === props.selected,
                },
              ],
              onClick: () => emit('click', element.value),
              onKeydown: (event: KeyboardEvent) => handleKeyDown(event, element.value),
              role: 'button',
              tabindex: 0,
            },
            element.label
          )
        })
      )
  },
})
export { CTimePickerRollCol }