"use client"

import { useState } from "react"

import type { InvitationMember, ToastRequest } from "@/lib/db/types"
import type { GuestDictionary } from "@/lib/i18n/dictionaries"

export function RsvpToastFields({
  members,
  toastRequest,
  dictionary,
  disabled,
}: {
  members: InvitationMember[]
  toastRequest: ToastRequest | undefined
  dictionary: GuestDictionary
  disabled: boolean
}) {
  const [enabled, setEnabled] = useState(Boolean(toastRequest))

  return (
    <fieldset className="grid gap-6 border-b border-wedding-line py-10 max-w-3xl mx-auto" disabled={disabled}>
      <legend className="sr-only">{dictionary.interactions.toastTitle}</legend>
      <p className="wedding-section-label">03</p>
      <div><h3 className="font-wedding-display text-wedding-medium">{dictionary.interactions.toastTitle}</h3><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{dictionary.interactions.toastDescription}</p></div>
      <div>
        <label className="flex items-center gap-3 font-wedding-ui text-sm"><input type="checkbox" name="wantsToast" checked={enabled} onChange={(event) => setEnabled(event.target.checked)} />{dictionary.interactions.wantsToast}</label>
        <div className="mt-6 grid gap-6 wedding-md:grid-cols-2">
          <label className="font-wedding-ui text-sm"><span>{dictionary.interactions.speakerName}</span><input name="toastSpeakerName" disabled={!enabled} defaultValue={toastRequest?.speaker_name ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3 disabled:opacity-50" /></label>
          <label className="font-wedding-ui text-sm"><span>{dictionary.interactions.estimatedMinutes}</span><input name="toastEstimatedMinutes" type="number" min="1" disabled={!enabled} defaultValue={toastRequest?.estimated_minutes ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3 disabled:opacity-50" /></label>
        </div>
        <select name="toastMemberId" defaultValue={toastRequest?.member_id ?? ""} className="sr-only"><option value="" />{members.map((member) => <option key={member.id} value={member.id}>{member.name}</option>)}</select>
      </div>
    </fieldset>
  )
}