'use client'

import classNames from 'classnames'
import { forwardRef, HTMLAttributes, ReactNode, useState } from 'react'

import { PktIcon } from '../icon/Icon'

const defaultDropdownButton = "Les mer <span class='pkt-sr-only'>om feltet</span>"

export interface IPktHelptextProps extends HTMLAttributes<HTMLDivElement> {
  helptext?: string | ReactNode
  helptextDropdown?: string | ReactNode
  helptextDropdownButton?: string
  forId?: string
  onToggleHelpText?: (isOpen: boolean) => void
}

const renderContent = (content: string | ReactNode | undefined): ReactNode => {
  if (content === undefined || content === null || content === '') return null
  if (typeof content === 'string') {
    return <span dangerouslySetInnerHTML={{ __html: content }} />
  }
  return content
}

export const PktHelptext = forwardRef<HTMLDivElement, IPktHelptextProps>(function PktHelptext(
  {
    helptext,
    helptextDropdown,
    helptextDropdownButton,
    forId,
    onToggleHelpText,
    className,
    children,
    ...rest
  },
  ref,
) {
  const [isOpen, setIsOpen] = useState(false)

  const toggle = () => {
    const next = !isOpen
    setIsOpen(next)
    onToggleHelpText?.(next)
  }

  const hasContent = Boolean(helptext || helptextDropdown || children)

  const containerClasses = classNames(
    'pkt-inputwrapper__helptext-container',
    hasContent && 'pkt-inputwrapper__has-helptext',
    className,
  )

  return (
    <div {...rest} ref={ref} className={containerClasses}>
      <div className="pkt-inputwrapper__helptext" id={forId ? `${forId}-helptext` : undefined}>
        {children && <div className="pkt-contents">{children}</div>}
        {renderContent(helptext)}
      </div>
      {helptextDropdown && (
        <div className="pkt-inputwrapper__helptext-expandable">
          <button
            type="button"
            className="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
            onClick={toggle}
          >
            <PktIcon
              className="pkt-btn__icon"
              name={isOpen ? 'chevron-thin-up' : 'chevron-thin-down'}
            />
            <span
              className="pkt-btn__text"
              dangerouslySetInnerHTML={{
                __html: helptextDropdownButton ?? defaultDropdownButton,
              }}
            />
          </button>
          <div
            className={classNames(
              'pkt-inputwrapper__helptext',
              isOpen
                ? 'pkt-inputwrapper__helptext-expandable-open'
                : 'pkt-inputwrapper__helptext-expandable-closed',
            )}
          >
            {renderContent(helptextDropdown)}
          </div>
        </div>
      )}
    </div>
  )
})

PktHelptext.displayName = 'PktHelptext'