add-event-form.tsx

'use client';

import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Separator } from '@/components/ui/separator';
import { DatePickerWithRange } from '@/components/ui/ranged-date-picker';
import { Checkbox } from '@/components/ui/checkbox';
import { useState } from 'react';
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { useFormState } from 'react-dom';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { SubmitButton } from '@/app/ui/form-submit-button';
import { addEvent } from '@/app/lib/actions';
import { AddEventFormSchema } from '@/app/lib/definitions';
import { Link } from 'lucide-react';

// Make either time required or allDay required
export default function AddEventForm() {
  const [state, action] = useFormState(addEvent, undefined);
  const [isChecked, setIsChecked] = useState(false);

  const form = useForm<z.infer<typeof AddEventFormSchema>>({
    resolver: zodResolver(AddEventFormSchema),
    defaultValues: {
      title: '',
      description: '',
      dates: "",
      startTime: '',
      endTime: '',
      checkbox: false,
    },
  });

  
  return (
    <Form {...form}>
      <form action={action} >
        <DialogHeader>
          <DialogTitle className="text-2xl">Create event</DialogTitle>
        </DialogHeader>

        <div className="grid gap-4 pt-2">
          <FormField
            control={form.control}
            name="title"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Title</FormLabel>
                <FormControl>
                  <Input placeholder="Event name" type="text" {...field} />
                </FormControl>
                {state?.errors?.title && (
                  <p className="text-sm text-red-500">{state.errors.title}</p>
                )}
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="description"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Description</FormLabel>
                <FormControl>
                  <Textarea
                    id="description"
                    className="col-span-3"
                    {...field}
                  />
                </FormControl>
                {state?.errors?.description && (
                  <p className="text-sm text-red-500">
                    {state.errors.description}
                  </p>
                )}
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

        <FormField
          control={form.control}
          name="dates"
          render={({ field }) => (
            <FormItem className="flex flex-col pt-3">
              <FormLabel>Start - End</FormLabel>
              <DatePickerWithRange></DatePickerWithRange>
              <FormMessage />
            </FormItem>
          )}
        />

        <div className="grid gap-4 pt-2">
          <div className="flex flex-col items-start gap-2">
            <div className="flex gap-4">
              <FormField
                control={form.control}
                name="startTime"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Start time</FormLabel>
                    <FormControl>
                      <Input
                        type="time"
                        className="mt-1 w-auto"
                        name="startTime"
                        disabled={isChecked}
                      ></Input>
                    </FormControl>
                    {state?.errors?.startTime && (
                      <p className="text-sm text-red-500">
                        {state.errors.startTime}
                      </p>
                    )}
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="endTime"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>End time</FormLabel>
                    <FormControl>
                      <Input
                        type="time"
                        className="mt-1 w-auto"
                        name="endTime"
                        disabled={isChecked}
                      ></Input>
                    </FormControl>
                    {state?.errors?.endTime && (
                      <p className="text-sm text-red-500">
                        {state.errors.endTime}
                      </p>
                    )}
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <FormField
              control={form.control}
              name="checkbox"
              render={({ field }) => (
                <FormItem className="mt-2 flex flex-row items-start space-x-2 space-y-0">
                  <FormControl>
                    <Checkbox
                      onCheckedChange={() => 
                        setIsChecked(!isChecked)
                      }
                    />
                  </FormControl>
                  <div className="space-y-1 leading-none">
                    <FormLabel>All Day</FormLabel>
                  </div>
                </FormItem>
              )}
            />
          </div>
        </div>

        <SubmitButton>Submit</SubmitButton>
      </form>
    </Form>
  );
}