'use client'

import React, {
  ForwardRefExoticComponent,
  LegacyRef,
  ChangeEventHandler,
  FocusEventHandler,
  ReactNode,
  InputHTMLAttributes,
  FC,
  ReactElement,
  ForwardedRef,
  forwardRef,
} from 'react'
import { createComponent, EventName } from '@lit/react'
import { PktDatepicker as PktEl } from '@oslokommune/punkt-elements'
import type { PktEventWithTarget } from '@/interfaces/IPktElements'

export interface IPktDatepicker extends InputHTMLAttributes<HTMLInputElement> {
  value?: string | string[]
  label?: string
  dateformat?: string
  multiple?: boolean
  maxlength?: number
  range?: boolean
  weeknumbers?: boolean
  withcontrols?: boolean
  fullwidth?: boolean
  excludedates?: string[]
  excludeweekdays?: string[]
  currentmonth?: string
  calendarOpen?: boolean
  requiredTag?: boolean
  requiredText?: string
  optionalTag?: boolean
  optionalText?: string
  tagText?: string
  useWrapper?: boolean
  helptext?: string | ReactNode | ReactNode[]
  helptextDropdown?: string | ReactNode | ReactNode[]
  helptextDropdownButton?: string
  hasError?: boolean
  errorMessage?: string | ReactNode | ReactNode[]
  strings?: any
  ref?: LegacyRef<HTMLInputElement>
  onChange?: ChangeEventHandler<HTMLInputElement>
  onInput?: ChangeEventHandler<HTMLInputElement>
  onBlur?: FocusEventHandler<HTMLInputElement>
  onFocus?: FocusEventHandler<HTMLInputElement>
  onValueChange?: (e: CustomEvent) => void
  onToggleHelpText?: (e: CustomEvent) => void
  dataTestid?: string
  skipForwardTestid?: boolean
}

export const LitComponent = createComponent({
  tagName: 'pkt-datepicker',
  elementClass: PktEl,
  react: React,
  displayName: 'PktDatepicker',
  events: {
    onChange: 'change' as EventName<PktEventWithTarget>,
    onBlur: 'blur' as EventName<FocusEvent>,
    onFocus: 'focus' as EventName<FocusEvent>,
    onValueChange: 'value-change' as EventName<CustomEvent>,
    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
  },
}) as ForwardRefExoticComponent<IPktDatepicker>

export const PktDatepicker: FC<IPktDatepicker> = forwardRef(
  ({ helptext, ...props }: IPktDatepicker, ref: ForwardedRef<HTMLInputElement>): ReactElement => {
    return (
      <LitComponent ref={ref} {...props}>
        <div className="pkt-contents" slot="helptext">
          {helptext}
        </div>
      </LitComponent>
    )
  },
)

PktDatepicker.displayName = 'PktDatepicker'