'use client'

import { createComponent, EventName } from '@lit/react'
import { PktHelptext as PktElHelptext } from '@oslokommune/punkt-elements'
// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
import React, { FC, forwardRef, ForwardRefExoticComponent, HTMLAttributes, LegacyRef, type ReactNode } from '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'