"use client";

import { Calendar } from "@/components/ui/calendar";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { format, formatDate, parse } from "date-fns";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
import { formSchemaData } from "@/lib/schema";

const steps = [
  {
    id: "Step 1",
    name: "General Information",
    fields: ["title", "email", "fullName", "department"],
  },
  {
    id: "Step 2",
    name: "Purpose, Date and Time",
    fields: ["dateOfEvent", "staringTime", "endingTime", "purpose"],
  },
  {
    id: "Step 3",
    name: "Additional Information",
    fields: ["doesHaveDryRun"],
  },
  {
    id: "Step 4",
    name: "Finallizing",
  },
];

export function CalendarPicker() {
  const [date, setDate] = useState<Date | undefined>(new Date());
  const [dialogBox, setDialogBox] = useState(false);

  const [currentFormPage, setCurrentFormPage] = useState(0);
  const [previousStep, setPreviousStep] = useState(0);

  type Inputs = z.infer<typeof formSchemaData>;
  const form = useForm<Inputs>({
    resolver: zodResolver(formSchemaData),
    defaultValues: {
      title: "",
      email: "",
      fullName: "",
      department: "",
      dateOfEvent: "",
      purpose: "",
      staringTime: "",
      endingTime: "",
      doesHaveDryRun: "",
      dryRunDate: "",
      dryRunStart: "",
      dryRunEnd: "",
    },
  });

  function onSubmit(values: any) {
    console.log(values);

  }

  const openDialogBox = (currentDate: Date | undefined) => {
    setDate(currentDate);
    const dateString = currentDate ? currentDate.toLocaleDateString() : ""; // Convert Date to string
    form.setValue("dateOfEvent", dateString); // Set the value of dateOfEvent field in the form
    setDialogBox(true);
  };

  type FieldName = keyof Inputs;

  const goToNextPage = async () => {
    const fields = steps[currentFormPage].fields;
    const output = await form.trigger(fields as FieldName[], {
      shouldFocus: true,
    });

    if (!output) return;

    if (currentFormPage < steps.length - 1) {
      setPreviousStep(currentFormPage);
      setCurrentFormPage((step) => step + 1);
    }

  };

  const goToPreviewsPage = () => {
    if (currentFormPage > 0) {
      setPreviousStep(currentFormPage);
      setCurrentFormPage((step) => step - 1);
    }
  };

  return (
    <div className="flex flex-col h-full gap-y-2">
      {dialogBox && (
        <Dialog>
          <DialogTrigger asChild>
            <Button color="primary-foreground">Add Schedule</Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[600px]">
            <Form {...form}>
              <form
                onSubmit={form.handleSubmit(onSubmit)}
                className="space-y-8"
              >
                {currentFormPage === 0 && (
                  <>
                    <DialogHeader>
                      <DialogTitle>General Information</DialogTitle>
                      <DialogDescription>
                        provides assistance in gathering general information,
                        including the name, email, department, and purpose of
                        the meeting
                      </DialogDescription>
                    </DialogHeader>
                    <FormField
                      control={form.control}
                      name="title"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Title</FormLabel>
                          <FormControl>
                            <Input placeholder="title of event" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="email"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Email</FormLabel>
                          <FormControl>
                            <Input placeholder="email" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="fullName"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Full Name</FormLabel>
                          <FormControl>
                            <Input placeholder="Full name" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="department"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Department</FormLabel>
                          <FormControl>
                            <Input placeholder="Department" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </>
                )}

                {currentFormPage === 1 && (
                  <>
                    <DialogHeader>
                      <DialogTitle>Purpose, Date and Time</DialogTitle>
                    </DialogHeader>
                    <FormField
                      control={form.control}
                      name="dateOfEvent"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Date of Event (DD/MM/YYY)</FormLabel>
                          <FormControl>
                            <Input disabled {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="staringTime"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Start</FormLabel>
                          <FormControl>
                            <Input type="time" placeholder="From" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="endingTime"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Start</FormLabel>
                          <FormControl>
                            <Input type="time" placeholder="End" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="purpose"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Purpose</FormLabel>
                          <Select
                            onValueChange={field.onChange}
                            defaultValue={field.value}
                          >
                            <FormControl>
                              <SelectTrigger>
                                <SelectValue placeholder="Select a purpose" />
                              </SelectTrigger>
                            </FormControl>
                            <SelectContent>
                              <SelectItem value="class">
                                Online Class
                              </SelectItem>
                              <SelectItem value="academicCulminatingClass">
                                Online Academic Culminating Classes
                              </SelectItem>
                              <SelectItem value="meeting">
                                Online Meeting
                              </SelectItem>
                              <SelectItem value="studentDevelopment">
                                Online Student Development
                              </SelectItem>
                              <SelectItem value="facultyDevelopment">
                                Online Faculty Development
                              </SelectItem>
                            </SelectContent>
                          </Select>

                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </>
                )}

                {currentFormPage === 2 && (
                  <>
                    <DialogHeader>
                      <DialogTitle>Purpose, Date and Time</DialogTitle>
                    </DialogHeader>
                    <FormField
                      control={form.control}
                      name="doesHaveDryRun"
                      render={({ field }) => (
                        <FormItem className="space-y-3">
                          <FormLabel>
                            (Optional) Preffered Meeting Date / Dry Run
                          </FormLabel>
                          <FormControl>
                            <RadioGroup
                              onValueChange={field.onChange}
                              defaultValue={field.value}
                              className="flex flex-col space-y-1"
                            >
                              <FormItem className="flex items-center space-x-3 space-y-0">
                                <FormControl>
                                  <RadioGroupItem value="none" />
                                </FormControl>
                                <FormLabel className="font-normal">
                                  None / No
                                </FormLabel>
                              </FormItem>
                              <FormItem className="flex items-center space-x-3 space-y-0">
                                <FormControl>
                                  <RadioGroupItem value="yes" />
                                </FormControl>
                                <FormLabel className="font-normal">
                                  Yes
                                </FormLabel>
                              </FormItem>
                            </RadioGroup>
                          </FormControl>

                          {field.value === "yes" && (
                            <FormItem>
                              <div className="flex flex-col gap-2 pt-2">
                                <Label>(Dry Run) Time of Event</Label>
                                <div className="flex flex-row gap-2">
                                  <FormField
                                    control={form.control}
                                    name="dryRunDate"
                                    render={({ field }) => (
                                      <FormItem>
                                        <FormLabel>Date</FormLabel>
                                        <FormControl>
                                          <Input
                                            type="date"
                                            placeholder="Date"
                                            {...field}
                                          />
                                        </FormControl>
                                        <FormMessage />
                                      </FormItem>
                                    )}
                                  />
                                  <FormField
                                    control={form.control}
                                    name="dryRunStart"
                                    render={({ field }) => (
                                      <FormItem>
                                        <FormLabel>Start</FormLabel>
                                        <FormControl>
                                          <Input
                                            type="time"
                                            placeholder="Start"
                                            {...field}
                                          />
                                        </FormControl>
                                        <FormMessage />
                                      </FormItem>
                                    )}
                                  />
                                  <FormField
                                    control={form.control}
                                    name="dryRunEnd"
                                    render={({ field }) => (
                                      <FormItem>
                                        <FormLabel>End</FormLabel>
                                        <FormControl>
                                          <Input
                                            type="time"
                                            placeholder="End"
                                            {...field}
                                          />
                                        </FormControl>
                                        <FormMessage />
                                      </FormItem>
                                    )}
                                  />
                                </div>
                              </div>
                            </FormItem>
                          )}

                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </>
                )}

                {currentFormPage === 3 && (
                  <>
                    <DialogHeader>
                      <DialogTitle>Finalize</DialogTitle>
                    </DialogHeader>
                  </>
                )}

                <DialogFooter>
                  <Button variant="default" onClick={goToPreviewsPage}>
                    Back
                  </Button>
                  {currentFormPage === 3 ? (
                    <Button type="submit">Submit</Button>
                  ) : (
                    <Button variant="default" onClick={goToNextPage}>
                      Next
                    </Button>
                  )}
                </DialogFooter>
              </form>
            </Form>
          </DialogContent>
        </Dialog>
      )}

      <Calendar
        mode="single"
        selected={date}
        onSelect={openDialogBox} // Pass selected date to a function
        className="shadow border rounded-md h-full w-full flex"
        classNames={{
          months:
            "flex w-full flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 flex-1",
          month: "space-y-4 w-full flex flex-col",
          table: "w-full h-full border-collapse space-y-1",
          head_row: "",
          row: "w-full mt-2",
        }}
      />
    </div>
  );
}