'use client'

import React, { FC, ForwardRefExoticComponent, LegacyRef, ReactElement, forwardRef } from 'react'
import { PktElConstructor, PktElType, PktEventWithTarget } from '@/interfaces/IPktElements'
import { createComponent, EventName } from '@lit/react'
import { PktAccordionItem as PktElAccordionItem } from '@oslokommune/punkt-elements'
import { TPktAccordionSkin } from '@oslokommune/punkt-elements'

export interface IPktAccordionItem extends Omit<PktElType, 'onClick'> {
  compact?: boolean
  skin?: TPktAccordionSkin
  title?: string
  defaultOpen?: boolean
  isOpen?: boolean
  id?: string
  onClick?: (e: PktEventWithTarget) => void
  ref?: LegacyRef<HTMLElement>
}

const LitComponent: FC<IPktAccordionItem> = createComponent({
  tagName: 'pkt-accordion-item',
  elementClass: PktElAccordionItem as PktElConstructor<HTMLElement>,
  react: React,
  displayName: 'PktAccordionItem',
  events: {
    onClick: 'click' as EventName<PktEventWithTarget>,
  },
}) as ForwardRefExoticComponent<IPktAccordionItem>

export const PktAccordionItem: FC<IPktAccordionItem> = forwardRef(
  ({ children, ...props }: Omit<IPktAccordionItem, 'ref'>, ref): ReactElement => {
    return (
      <LitComponent ref={ref} {...props}>
        <div className="pkt-contents">{children}</div>
      </LitComponent>
    )
  },
)

PktAccordionItem.displayName = 'PktAccordionItem'