'use client'

import React, {
  ForwardRefExoticComponent,
  ReactNode,
  SelectHTMLAttributes,
  ChangeEventHandler,
  FocusEventHandler,
  FC,
  LegacyRef,
  forwardRef,
  MouseEventHandler,
} from 'react'
import { PktCombobox as PktElCombobox } from '@oslokommune/punkt-elements'
import type { IPktCombobox as IPktElCombobox } from '@oslokommune/punkt-elements'
import { createComponent, EventName } from '@lit/react'
import { PktEventWithTarget } from '@/interfaces/IPktElements'

type ExtendedCombobox = Omit<IPktElCombobox, 'helptext'> & SelectHTMLAttributes<HTMLSelectElement>

export interface IPktCombobox extends ExtendedCombobox {
  helptext?: string | ReactNode | ReactNode[]
  ref?: LegacyRef<HTMLSelectElement>
  onClick?: MouseEventHandler<HTMLSelectElement>
  onChange?: ChangeEventHandler<HTMLSelectElement>
  onInput?: ChangeEventHandler<HTMLSelectElement>
  onBlur?: FocusEventHandler<HTMLSelectElement>
  onFocus?: FocusEventHandler<HTMLSelectElement>
  onValueChange?: (e: CustomEvent) => void
  onToggleHelpText?: (e: CustomEvent) => void
}

export const LitComponent = createComponent({
  tagName: 'pkt-combobox',
  elementClass: PktElCombobox,
  react: React,
  displayName: 'PktCombobox',
  events: {
    onClick: 'click' as EventName<PktEventWithTarget>,
    onChange: 'change' as EventName<PktEventWithTarget>,
    onInput: 'input' as EventName<PktEventWithTarget>,
    onBlur: 'blur' as EventName<FocusEvent>,
    onFocus: 'focus' as EventName<FocusEvent>,
    onValueChange: 'valueChange' as EventName<CustomEvent>,
    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
  },
}) as ForwardRefExoticComponent<IPktCombobox>

// Note:
// helptext slot needs to be before children because of how React reactivity works.
// Please do not change this.
export const PktCombobox: FC<IPktCombobox> = forwardRef(({ children, helptext, ...props }: IPktCombobox, ref) => {
  return (
    <LitComponent {...props} ref={ref}>
      {helptext && (
        <div slot="helptext" className="pkt-contents">
          {helptext}
        </div>
      )}
      {children}
    </LitComponent>
  )
})

PktCombobox.displayName = 'PktCombobox'