'use client'

import React, { ForwardRefExoticComponent, ReactNode, LegacyRef, FC, forwardRef, HTMLAttributes } from 'react'
import { PktHelptext as PktElHelptext } from '@oslokommune/punkt-elements'
import { createComponent, EventName } from '@lit/react'

export interface IPktHelptextProps extends HTMLAttributes<HTMLDivElement> {
  helptext?: string | ReactNode | ReactNode[]
  helptextDropdown?: string | ReactNode | ReactNode[]
  helptextDropdownButton?: string
  forId?: string
  ref?: LegacyRef<HTMLDivElement>
  onToggleHelpText?: (e: CustomEvent) => void
}

export const LitComponent = createComponent({
  tagName: 'pkt-helptext',
  elementClass: PktElHelptext,
  react: React,
  displayName: 'PktHelptext',
  events: {
    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
  },
}) as ForwardRefExoticComponent<IPktHelptextProps>

export const PktHelptext: FC<IPktHelptextProps> = forwardRef(
  ({ children, ...props }, ref: LegacyRef<HTMLDivElement>) => {
    return (
      <LitComponent {...props} ref={ref}>
        <div className="pkt-contents">{children}</div>
      </LitComponent>
    )
  },
)

PktHelptext.displayName = 'PktHelptext'