wedding-planner-frontend/app/ui/components/guest-form-dialog.tsx

/* Copyright (C) 2024 Manuel Bustillo*/

'use client';

import { createGuest, updateGuest } from '@/app/api/guests';
import { Group, Guest } from '@/app/lib/definitions';
import { classNames } from '@/app/ui/components/button';
import { Dialog } from 'primereact/dialog';
import { Dropdown } from 'primereact/dropdown';
import { FloatLabel } from 'primereact/floatlabel';
import { InputText } from 'primereact/inputtext';
import { useState } from 'react';

export default function GuestFormDialog({ groups, onCreate, onHide, guest, visible}: {
  groups: Group[],
  onCreate?: () => void,
  onHide: () => void,
  guest?: Guest,
  visible: boolean,
}) {

  const [name, setName] = useState(guest?.name || '');
  const [group, setGroup] = useState(guest?.groupId || null);

  function resetForm() {
    setName('');
    setGroup(null);
  }

  function submitGuest() {
    if (!(name && group)) {
      return
    }

    if (guest?.id !== undefined) {
      guest.name = name;
      guest.groupId = group;
      updateGuest(guest).then(() => {
        resetForm();
        onCreate && onCreate();
      });
    } else {
      createGuest(name, group, () => {
        resetForm();
        onCreate && onCreate();
      });
    }
  }

  return (
    <>

      <Dialog header="Add guest" visible={visible} style={{ width: '50vw' }} onHide={onHide}>
        <div className="card flex justify-evenly py-5">
          <FloatLabel>
            <InputText id="username" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
            <label htmlFor="username">Username</label>
          </FloatLabel>
          <FloatLabel>
            <Dropdown id="group" className='rounded-sm min-w-32' value={group} onChange={(e) => setGroup(e.target.value)} options={
              groups.map((group) => {
                return { label: group.name, value: group.id };
              })
            } />
            <label htmlFor="group">Group</label>
          </FloatLabel>
          <button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && group)}>
            {guest?.id !== undefined ? 'Update' : 'Create'}
          </button>
        </div>
      </Dialog>
    </>
  );
}