wedding-planner-frontend/app/ui/components/creation-dialog.tsx

/* Copyright (C) 2024 Manuel Bustillo*/

'use client';

import { createGuest } from '@/app/api/guests';
import { Group } 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 CreationDialog({ groups, onCreate }: { groups: Group[], onCreate?: () => void }) {
  const [visible, setVisible] = useState(false);

  const [name, setName] = useState('');
  const [group, setGroup] = useState(null);
  function submitGuest() {
    name && group && createGuest(name, group, () => {
      setVisible(false);
      setName('');
      setGroup(null);
      onCreate && onCreate();
    });
  }

  return (
    <>
      <button onClick={() => setVisible(true)} className={classNames('primary')}>Add new</button>

      <Dialog header="Add guest" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
        <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)}>Create</button>
        </div>
      </Dialog>
    </>
  );
}