myeasycms-v2/apps/web/app/[locale]/home/[account]/courses/locations/create-location-dialog.tsx

'use client';

import { useCallback, useState } from 'react';

import { useRouter } from 'next/navigation';

import { Plus } from 'lucide-react';
import { useTranslations } from 'next-intl';

import { createLocation } from '@kit/course-management/actions/course-actions';
import { Button } from '@kit/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@kit/ui/dialog';
import { Input } from '@kit/ui/input';
import { Label } from '@kit/ui/label';
import { useActionWithToast } from '@kit/ui/use-action-with-toast';

interface CreateLocationDialogProps {
  accountId: string;
}

export function CreateLocationDialog({ accountId }: CreateLocationDialogProps) {
  const t = useTranslations('courses');
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  const [room, setRoom] = useState('');
  const [capacity, setCapacity] = useState('');

  const { execute, isPending } = useActionWithToast(createLocation, {
    successMessage: 'Ort erstellt',
    errorMessage: 'Fehler beim Erstellen des Ortes',
    onSuccess: () => {
      setOpen(false);
      setName('');
      setAddress('');
      setRoom('');
      setCapacity('');
      router.refresh();
    },
  });

  const handleSubmit = useCallback(
    (e: React.FormEvent) => {
      e.preventDefault();
      if (!name.trim()) return;
      execute({
        accountId,
        name: name.trim(),
        address: address.trim() || undefined,
        room: room.trim() || undefined,
        capacity: capacity ? Number(capacity) : undefined,
      });
    },
    [execute, accountId, name, address, room, capacity],
  );

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger render={<Button size="sm" />}>
        <Plus className="mr-1 h-4 w-4" />
        Neuer Ort
      </DialogTrigger>
      <DialogContent>
        <form onSubmit={handleSubmit}>
          <DialogHeader>
            <DialogTitle>Neuer Ort</DialogTitle>
            <DialogDescription>
              Einen neuen Kurs- oder Veranstaltungsort hinzufuegen.
            </DialogDescription>
          </DialogHeader>
          <div className="mt-4 space-y-4">
            <div className="space-y-2">
              <Label htmlFor="loc-name">Name</Label>
              <Input
                id="loc-name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder={t('locations.namePlaceholder')}
                required
                minLength={1}
                maxLength={128}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="loc-address">Adresse (optional)</Label>
              <Input
                id="loc-address"
                value={address}
                onChange={(e) => setAddress(e.target.value)}
                placeholder={t('locations.addressPlaceholder')}
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="loc-room">Raum (optional)</Label>
                <Input
                  id="loc-room"
                  value={room}
                  onChange={(e) => setRoom(e.target.value)}
                  placeholder={t('locations.roomPlaceholder')}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="loc-capacity">Kapazitaet (optional)</Label>
                <Input
                  id="loc-capacity"
                  type="number"
                  min={1}
                  value={capacity}
                  onChange={(e) => setCapacity(e.target.value)}
                  placeholder="z. B. 30"
                />
              </div>
            </div>
          </div>
          <DialogFooter className="mt-4">
            <Button type="submit" disabled={isPending || !name.trim()}>
              {isPending ? 'Wird erstellt...' : 'Erstellen'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}