import type { InvitationMember } from "@/lib/db/types"
import type { GuestDictionary } from "@/lib/i18n/dictionaries"
import type { MealPreference } from "@/lib/validation/response"

const mealOptions: MealPreference[] = ["meat", "fish", "vegetarian", "vegan", "kids", "other"]

export function RsvpGuestFields({
  members,
  dictionary,
  disabled,
}: {
  members: InvitationMember[]
  dictionary: GuestDictionary
  disabled: boolean
}) {
  return (
    <section className="border-t border-wedding-line pt-10">
      {members.map((member, index) => (
        <fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-layout:grid-cols-3" disabled={disabled} key={member.id}>
          <legend className="sr-only">{member.name}</legend>
          <p className="wedding-section-label">0{index + 1}</p>
          <div><h3 className="font-wedding-display text-wedding-medium">{member.name}</h3><p className="mt-2 font-wedding-ui text-sm">{dictionary.form.attending}</p></div>
          <div className="grid gap-6 wedding-phone:grid-cols-2">
            <div className="flex gap-3"><label className="flex flex-1 cursor-pointer items-center justify-center border border-wedding-line p-3 font-wedding-display text-lg"><input className="sr-only" type="radio" name={`attending-${member.id}`} value="yes" defaultChecked={member.attending === true} required />{dictionary.form.yes}</label><label className="flex flex-1 cursor-pointer items-center justify-center border border-wedding-line p-3 font-wedding-display text-lg"><input className="sr-only" type="radio" name={`attending-${member.id}`} value="no" defaultChecked={member.attending === false} required />{dictionary.form.no}</label></div>
            <label className="font-wedding-ui text-sm"><span>{dictionary.form.mealPreference}</span><select name={`meal-${member.id}`} defaultValue={member.meal_preference ?? ""} className="mt-2 w-full border border-wedding-line bg-wedding-ivory p-3"><option value="">{dictionary.form.mealPlaceholder}</option>{mealOptions.map((meal) => <option key={meal} value={meal}>{dictionary.meals[meal]}</option>)}</select></label>
            <label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.dietaryRestrictions}</span><input name={`dietary-${member.id}`} defaultValue={member.dietary_restrictions ?? ""} placeholder={dictionary.form.noRestrictions} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
          </div>
        </fieldset>
      ))}
    </section>
  )
}