import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import Page from "../../../components/Page";
import DayPicker from "../../../components/DayPicker";
import { useMutation, useQuery } from "@apollo/client";
import {
  EVENT_MUTATION,
  DELETE_EVENT_MUTATION,
  MODIFY_EVENT_MUTATION,
} from "../../../gql/eventMutation";
import Upload from "../../../components/upload/UploadAntDesign";
import { useToasts } from "react-toast-notifications";
import SelectField from "../../../components/SelectField";
import Modal from "../../../components/Modal";
import { TAG_QUERY, TagName } from "../../../gql/tagsQuery";
import { Dialog, Transition } from "@headlessui/react";
import { UserI } from "../../../types";
import { getUser } from "../../../utils/getUser";
import { UseQueryResult, useQuery as reactUseQuery } from "react-query";
import {
  ALLINITIATIVES_QUERY,
  InitiativeData,
} from "../../../gql/allInitiativesQuery";
import { IMAGE_MUTATION } from "../../../gql/imageMutation";
import StaffDropdown from "../../../components/StaffDropdown";
import "./styles.css";
import TimePicker from "../../../components/TimePicker";
import Button from "../../../components/Button";
import Breadcrumb from "../../../components/Breadcrumb";
import { EVENTS_QUERY, EventsData } from "../../../gql/eventsQuery";
import { HiOutlineExclamation, HiX } from "react-icons/hi";

const initialFormValues = {
  action: "",
  title: "",
  description: "",
  eventdate: null,
  eventtime: "",
  location: "",
  initiative: "",
  staffPresenter: [],
  guestPresenter: "",
  tags: [],
};

export interface selectedStaffI {
  id: number;
  name: string;
}

// const urlSchema = z.string().url({ message: "Please enter a valid URL" }).optional();

// const validateUrl = async (url: any) => {
//   try {
//     await urlSchema.parse(url);
//     return true;
//   } catch (error) {
//     return false;
//   }
// };

export default function UpdateEventForm() {
  const [selectedDepartment, setSelectedDepartment] = useState("");
  const [filenames, setFileNames] = useState<string[]>([]);
  const [action, setAction] = useState("");
  const [isActionSelected, setIsActionSelected] = useState(false);
  const [staffPresenters, setStaffPresenters] = useState<selectedStaffI[]>([]);
  const [time, setTime] = useState("12:00");
  const user: UseQueryResult<UserI, any> = reactUseQuery("user", getUser);

  const { addToast } = useToasts();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false);
  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  const openRemoveModal = () => {
    setIsRemoveModalOpen(true);
  };

  const closeRemoveModal = () => {
    setIsRemoveModalOpen(false);
  };

  const handlePurposeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setAction(event.target.value);
    setIsActionSelected(event.target.value !== "Select an Action");
  };

  const { data: pastEvents } = useQuery<EventsData>(EVENTS_QUERY, {
    variables: { pastEvents: true, futureEvents: null },
  });

  const { data: allEvents } = useQuery<EventsData>(EVENTS_QUERY, {
    variables: { pastEvents: null, futureEvents: null },
  });

  const [eventSelected, setEventSelected] = useState(false);
  const [selectedEvent, setSelectedEvent] = useState("");

  const [pastEventSelected, setPastEventSelected] = useState(false);
  const [selectedPastEvent, setSelectedPastEvent] = useState(-1);

  const handleEventChange = (event: any) => {
    setEventSelected(true);
    setSelectedEvent(event.target.value);
  };

  const eventToRemove = allEvents?.allEvents.find(
    (Event) => Event.title === selectedEvent
  );

  const eventToModify = allEvents?.allEvents.find(
    (Event) => Event.id === selectedPastEvent
  );

  const isValidUrl = (url: string) => {
    return !url || /^https?:\/\/.*/i.test(url);
  };

  const [validationErrors, setValidationErrors] = useState({ slides: '', videoUrl: '' });

  const handleSlideChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setSlides(event.target.value);
    if (!isValidUrl(event.target.value)) {
      setValidationErrors(prev => ({ ...prev, slides: 'Please enter a valid URL for slides' }));
    } else {
      setValidationErrors(prev => ({ ...prev, slides: '' }));
    }
  };

  const handleVideoUrlChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setVideoUrl(event.target.value);
    if (!isValidUrl(event.target.value)) {
      setValidationErrors(prev => ({ ...prev, videoUrl: 'Please enter a valid URL for video' }));
    } else {
      setValidationErrors(prev => ({ ...prev, videoUrl: '' }));
    }
  };


  const urlValidation = (url: string) => /^https?:\/\/.*/i.test(url);

  const [slides, setSlides] = useState(eventToModify?.slides || "");
  const [videoUrl, setVideoUrl] = useState(eventToModify?.videoUrl || "");

  // const handleSlideChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
  //   setSlides(event.target.value);
  // };
  
  // const handleVideoUrlChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
  //   setVideoUrl(event.target.value);
  // };

  const [eventDate, setEventDate] = useState("");
  const originalDateString = eventToRemove?.date;
  useEffect(() => {
    if (originalDateString) {
      const date = new Date(originalDateString);

      const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
      const months = [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ];

      let hours = date.getUTCHours();
      const amOrPm = hours >= 12 ? "PM" : "AM";
      hours = hours % 12 || 12;

      const formattedDate = `${
        weekdays[date.getUTCDay()]
      }, ${date.getUTCDate()} ${months[date.getUTCMonth()]} ${date
        .getUTCFullYear()
        .toString()
        .slice(-2)} at ${hours}:${date
        .getUTCMinutes()
        .toString()
        .padStart(2, "0")} ${amOrPm}`;
      setEventDate(formattedDate);
    } else {
      console.log("Date is undefined.");
    }
  }, [originalDateString]);

  const getZodSchema = (action: string) => {
    switch (action) {
      case "Add an Event":
        return z.object({
          action: z
            .string()
            .nonempty("Select an action from the dropdown")
            .refine((value) => value !== "", {
              message: "Select an action from the dropdown",
            }),
          title: z.string().nonempty("Please enter an event name"),
          description: z.string().nonempty("Please enter an event description"),
          eventdate: z
            .date()
            .nullable()
            .refine((date: Date | null) => date !== null, {
              message: "Select an event date",
            }),
          location: z.string().nonempty("Please enter location of event"),
          initiative: z.string().nonempty("An initiative must be selected"),
          staffPresenter: z.array(z.number()),
          guestPresenter: z.string(),
          tags: z.string().array(),
        });
      case "Update Past Event":
        return z.object({
          action: z.string(),
          slides: z.string().refine(urlValidation, { message: "Please enter a valid URL for slides" }).optional(),
          videoUrl: z.string().refine(urlValidation, { message: "Please enter a valid URL for video" }).optional(),
        });
      default:
        return z.object({
          action: z.string(),
        });
    }
  };

  useEffect(() => {
    if (eventToModify) {
      setSlides(eventToModify.slides || "");
      setVideoUrl(eventToModify.videoUrl || "");
    }
  }, [eventToModify]);

  const formSchema = getZodSchema(action);

  const {
    register,
    handleSubmit,
    formState: { errors },
    control,
    reset,
  } = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      ...initialFormValues,
      department: selectedDepartment,
      // slides: eventToModify?.slides || "",
      // videoUrl: eventToModify?.videoUrl || "",
    },
  });
  const [newEvent] = useMutation(EVENT_MUTATION);
  const [moveImageFromTemp] = useMutation(IMAGE_MUTATION);
  const [deleteEvent] = useMutation(DELETE_EVENT_MUTATION);
  const [modifyEvent] = useMutation(MODIFY_EVENT_MUTATION);
  const onSubmit = async (data: any) => {
    try {
      if (data.action === "Add an Event") {
        var imageResponse;
        if (filenames.length) {
          imageResponse = await moveImageFromTemp({
            variables: {
              filenames: filenames,
              paths: filenames.map(
                (filename) => `events/${data.title}/${filename}`
              ),
            },
          });
        }
        const response = await newEvent({
          variables: {
            title: data.title,
            description: data.description,
            date: data.eventdate.toLocaleDateString("en-GB", {
              month: "2-digit",
              day: "2-digit",
              year: "numeric",
            }),
            eventTime: time,
            location: data.location,
            initiativeId: selectedInitiativeId,
            guestPresenters: data.guestPresenter,
            staffPresenters: staffPresenters.map((presenter) => presenter.id),
            tags: [...data.tags],
            banner: encodeURIComponent(
              imageResponse?.data?.uploadImageFile.filenames[0]
            ),
            user: `${user.data?.givenName} ${user.data?.surname}`,
          },
        });
        if (response.data) {
          addToast("Form submitted successfully", { appearance: "success" });
          reset(initialFormValues);
          setStaffPresenters([]);

          // Add a delay of 5 seconds before refreshing the page
          setTimeout(() => {
            window.location.reload();
          }, 2000);
        } else {
          console.error("Error submitting the form:", response.errors);
          addToast("An error occurred while submitting the form", {
            appearance: "error",
          });
        }
      } else if (data.action === "Remove an Event") {
        // Handle the DELETE request for removing an event
        deleteEvent({
          variables: {
            deleteEventId: eventToRemove?.id,
            user: `${user.data?.givenName} ${user.data?.surname}`,
          },
        })
          .then((response) => {
            console.log(response);
          })
          .catch((error) => {
            console.error("Error deleting event:", error);
          });

        addToast("Event removed successfully", { appearance: "success" });

        // Add a delay of 5 seconds before refreshing the page
        setTimeout(() => {
          window.location.reload();
        }, 2000);
      } else if (data.action === "Update Past Event") {
        // Handle the Update request for updating a past event

        // if (slides && !(await validateUrl(slides))) {
        //   addToast("Invalid URL for slides", { appearance: "error" });
        //   return;
        // }
    
        // if (videoUrl && !(await validateUrl(videoUrl))) {
        //   addToast("Invalid URL for video", { appearance: "error" });
        //   return;
        // }

        if (!isValidUrl(slides) || !isValidUrl(videoUrl)) {
          addToast("Invalid URL(s) provided", { appearance: "error" });
          return;
        }
        const variables = {
          eventId: selectedPastEvent,
          user: `${user.data?.givenName} ${user.data?.surname}`,
          slides: slides !== eventToModify?.slides ? slides : undefined,
          videoUrl: videoUrl !== eventToModify?.videoUrl ? videoUrl : undefined,
        };
      
        const response = await modifyEvent({ variables });
        if (response.data) {
          addToast("Event updated successfully", { appearance: "success" });
          reset(initialFormValues);
          // Add a delay of 5 seconds before refreshing the page
          setTimeout(() => {
            window.location.reload();
          }, 2000);
        } else {
          console.error("Error updating the event:", response.errors);
          addToast("An error occurred while updating the event", {
            appearance: "error",
          });
        }
      }
    } catch (error) {
      console.error("Error submitting the form:", error);
      addToast("An error occurred while submitting the form", {
        appearance: "error",
      });
    }
  };

  const [hasGuestPresenters, setHasGuestPresenters] = useState(false);
  const handleCheckboxChange = () => {
    // Toggle the state when the checkbox is clicked
    setHasGuestPresenters(!hasGuestPresenters);
  };

  const [hasEventBanner, setHasEventBanner] = useState(false);
  const handleBannerChange = () => {
    // Toggle the state when the checkbox is clicked
    setHasEventBanner(!hasEventBanner);
  };

  const [hasEventTags, setHasEventTags] = useState(false);
  const handleTagsChange = () => {
    // Toggle the state when the checkbox is clicked
    setHasEventTags(!hasEventTags);
  };

  const options = [
    {name: "Select an Action", id: -1},
    {name: "Add an Event", id: -1},
    {name: "Remove an Event", id: -1},
    {name: "Update Past Event", id: -1}
  ];

  const handlePastEventChange = (event: any) => {
    setSelectedPastEvent(Number(event.target.value));
    setPastEventSelected(true);
  };

  const { data: tagName } = useQuery<TagName>(TAG_QUERY);
  const { data: InitiativeData } =
    useQuery<InitiativeData>(ALLINITIATIVES_QUERY);
  const [selectedInitiativeId, setSelectedInitiativeId] = useState<number>();

  const pages = [
    { name: "Update an Event", link: "/update-event", current: true },
  ];


  return (
    <Page>
      {/* Hero Section */}
      <Breadcrumb data={pages} />
      <div className="grid place-items-center py-12">
        <div
          className="absolute inset-x-0 -top-40 -z-20 transform-gpu overflow-hidden blur-3xl sm:-top-80"
          aria-hidden="true"
        >
          <div
            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#bfdbfe] to-[#2563eb] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
            style={{
              clipPath:
                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
            }}
          />
        </div>
        {!action && (
          <>
            <div className="mx-auto max-w-2xl">
              <h1 className="text-4xl font-semibold tracking-tight text-text-primary sm:text-6xl animate__animated animate__slideInDown flex pl-4 justify-center">
                Manage Events
              </h1>
              <p className="mt-6 text-lg text-center leading-8 text-text-secondary">
                This page serves as a dedicated platform to efficiently manage
                events within the department. Seamlessly add, remove, or update
                and event. Please select an action to get started.
              </p>
            </div>
          </>
        )}
        {action === "Add an Event" && (
          <>
            <div className="mx-auto max-w-2xl">
              <h1 className="text-4xl font-semibold tracking-tight text-text-primary sm:text-6xl animate__animated animate__slideInDown flex pl-4 justify-center">
                Adding an Event
              </h1>
              <p className="mt-6 text-lg text-center leading-8 text-text-secondary">
                This page is designed to help you easily manage the process of
                adding new events to the site. You can effortlessly add events
                to the events page and ensure a smooth experience for your
                users.
              </p>
            </div>
          </>
        )}
        {action === "Remove an Event" && (
          <>
            <div className="mx-auto max-w-2xl">
              <h1 className="text-4xl font-semibold tracking-tight text-text-primary sm:text-6xl animate__animated animate__slideInDown flex pl-4 justify-center">
                Remove an Event
              </h1>
              <p className="mt-6 text-lg text-center leading-8 text-text-secondary">
                This page is designed to help you easily manage the process of
                removing events from the site.
              </p>
            </div>
          </>
        )}
        {action === "Update Past Event" && (
          <>
            <div className="mx-auto max-w-2xl">
              <h1 className="text-4xl font-semibold tracking-tight text-text-primary sm:text-6xl animate__animated animate__slideInDown flex pl-4 justify-center">
                Update Past Event
              </h1>
              <p className="mt-6 text-lg text-center leading-8 text-text-secondary">
                This page is designed to help you easily manage the process of
                adding updating past events within the site. You can
                effortlessly update past events; ensuring a smooth experience
                for your users.
              </p>
            </div>
          </>
        )}
        {action === "Select an Action" && (
          <>
            <div className="mx-auto max-w-2xl">
              <h1 className="text-4xl font-semibold tracking-tight text-text-primary sm:text-6xl animate__animated animate__slideInDown flex pl-4 justify-center">
                Manage Events
              </h1>
              <p className="mt-6 text-lg text-center leading-8 text-text-secondary">
                This page serves as a dedicated platform to efficiently manage
                events within the department. Seamlessly add, remove, or update
                and event. Please select an action to get started.
              </p>
            </div>
          </>
        )}

        <div className="py-12 w-9/12">
          <form
            className="bg-neutral shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
            onSubmit={handleSubmit(onSubmit)}
          >
            <div className="px-4 py-8 sm:p-8">
              <div>
                <SelectField
                  type="select"
                  label="Action"
                  name="action"
                  autoComplete="action-name"
                  options={options}
                  onChange={handlePurposeChange}
                  formSchema={{ control, errors }}
                />
                {/* Conditional rendering based on the selected purpose */}
                {action === "Add an Event" && (
                  <>
                    <div>
                      <SelectField
                        label="Name of Event"
                        name="title"
                        autoComplete="given-name"
                        type="text"
                        placeholder="Enter The Event Name"
                        formSchema={{ control, errors }}
                        options={[]}
                        onChange={onchange}
                        className="text-text-primary placeholder-text-primary"
                      />
                    </div>
                    <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8 border-t border-gray-900/10">
                      <label className="block text-sm font-medium leading-6 text-text-primary">
                        Description of Event{" "}
                        <span className="text-helpers-error-button">*</span>
                      </label>
                      <div className="w-full">
                        <textarea
                          id="description"
                          {...register("description")}
                          placeholder="Description of The Event"
                          rows={3}
                          className="block w-full rounded-md bg-neutral-dimmed border-0 py-1.5 text-text-primary placeholder-text-primary shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:max-w-md sm:text-sm sm:leading-6"
                          defaultValue={""}
                        />
                        {errors.description && (
                          <p className="error text-helpers-error-button mt-2">
                            {errors.description?.message}
                          </p>
                        )}
                      </div>
                    </div>

                    <div className="grid grid-cols-2 gap-x-6 gap-y-8 border-t border-gray-900/10 py-8">
                      <label className="block text-sm font-medium leading-6 text-text-primary">
                        Select Date of Event
                        <span className="text-helpers-error-button">*</span>
                      </label>
                      <DayPicker
                        register={register}
                        errors={errors}
                        formSchema={formSchema}
                        control={control}
                        name="eventdate"
                      />
                    </div>

                    <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8 border-t border-gray-900/10">
                      <label className="block text-sm font-medium leading-6 text-text-primary">
                        Time of Event{" "}
                        <span className="text-helpers-error-button">*</span>
                      </label>
                      <TimePicker
                        time={time}
                        changeTime={setTime}
                        register={register}
                        errors={errors}
                        formSchema={formSchema}
                        control={control}
                      />
                    </div>

                    <div className="border-t border-gray-900/10">
                      <SelectField
                        label="Location of Event"
                        name="location"
                        autoComplete="given-name"
                        type="text"
                        placeholder="Enter Location of The Event"
                        formSchema={{ control, errors }}
                        options={[]}
                        onChange={onchange}
                        className="text-text-primary placeholder-text-primary"
                      />
                    </div>

                    <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8 border-t border-gray-900/10">
                      <label className="block text-sm font-medium leading-6 text-text-primary">
                        Hosting Initiative{" "}
                        <span className="text-helpers-error-button">*</span>
                      </label>
                      <div className="w-full">
                        <select
                          id="initiative"
                          {...register("initiative")}
                          autoComplete="Hosting initiative"
                          className="block w-full rounded-md bg-neutral-dimmed border-0 py-1.5 text-text-primary placeholder-text-primary shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:max-w-md sm:text-sm sm:leading-6"
                          onChange={(e) => {
                            const selectedId =
                              InitiativeData?.allInitiatives.find(
                                (initiative) =>
                                  initiative.name === e.target.value
                              )?.id;
                            setSelectedInitiativeId(selectedId);
                          }}
                        >
                          <option disabled selected value="">
                            Select an Initiative
                          </option>
                          {InitiativeData?.allInitiatives.map(
                            (initiative: any) => (
                              <option
                                key={initiative.id}
                                value={initiative.name}
                              >
                                {initiative.name}
                              </option>
                            )
                          )}
                        </select>
                        {errors.initiative && (
                          <p className="error text-helpers-error-button mt-2">
                            {errors.initiative?.message}
                          </p>
                        )}
                      </div>
                    </div>

                    <div className="py-8 border-t border-gray-900/10">
                      <StaffDropdown
                        selectedStaff={staffPresenters}
                        setSelectedStaff={setStaffPresenters}
                        register={register}
                        errors={errors}
                        formSchema={formSchema}
                        control={control}
                      />
                    </div>
                    <div className="border-t border-gray-900/10 mb-8">
                      <div className="mt-8">
                        <label className="block text-sm font-medium leading-6 text-text-primary">
                          Are There Any Guest Presenters?
                          <input
                            type="checkbox"
                            className="ml-2 mb-1 rounded-md bg-neutral-dimmed border-1 shadow-sm ring-inset ring-gray-300 focus:ring-inset focus:ring-elements-secondary-dimmed"
                            onChange={handleCheckboxChange}
                            checked={hasGuestPresenters}
                          />
                        </label>
                      </div>

                      {hasGuestPresenters && (
                        <div>
                          <SelectField
                            label="Guest Presenters of Event"
                            name="guestPresenter"
                            autoComplete="given-name"
                            type="text"
                            placeholder="Enter The Guest Presenter Name"
                            formSchema={{ control, errors }}
                            options={[]}
                            onChange={onchange}
                            className="text-text-primary placeholder-text-primary block w-full rounded-md bg-neutral-dimmed border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:max-w-md sm:text-sm sm:leading-6"
                            required={false}
                          />
                        </div>
                      )}

                      {!hasGuestPresenters && (
                        <div className="mt-8">
                          <p className="text-sm text-text-tertiary">
                            If the checkbox is left unselected, no guest
                            presenters will be submitted.
                          </p>
                        </div>
                      )}
                    </div>

                    <div className="border-t border-gray-900/10 mb-8">
                      <div className="mt-8">
                        <label className="block text-sm font-medium leading-6 text-text-primary">
                          Are There Any Event Tags?
                          <input
                            type="checkbox"
                            className="ml-2 mb-1 rounded-md bg-neutral-dimmed border-1 shadow-sm ring-inset ring-gray-300 focus:ring-inset focus:ring-elements-secondary-dimmed"
                            onChange={handleTagsChange}
                            checked={hasEventTags}
                          />
                        </label>
                      </div>

                      {hasEventTags && (
                        <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8 ">
                          <div>
                            <label className="block text-sm font-medium leading-6 text-text-primary whitespace-nowrap">
                              Event Tag{" "}
                            </label>
                          </div>
                          <div className="w-full">
                            <select
                              id="eventTags"
                              multiple={true}
                              autoComplete="event-tags"
                              className="block w-full overflow-hidden rounded-md bg-neutral-dimmed border-0 py-1.5 text-text-primary placeholder-text-primary shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:max-w-md sm:text-sm sm:leading-6"
                              {...register("tags")}
                            >
                              <option disabled selected value="">
                                Select Tag Related to the Event
                              </option>
                              {tagName?.allTags.map((tag: any) => (
                                <option key={tag.id} value={tag.name}>
                                  {tag.name}
                                </option>
                              ))}
                            </select>
                            {errors.tags && (
                              <p className="error text-helpers-error-button mt-2">
                                {errors.tags?.message}
                              </p>
                            )}
                          </div>
                        </div>
                      )}

                      {!hasEventTags && (
                        <div className="mt-8">
                          <p className="text-sm text-text-tertiary">
                            If the checkbox is left unselected, no event tags
                            will be submitted.
                          </p>
                        </div>
                      )}
                    </div>

                    <div className="border-t border-gray-900/10">
                      <div className="mt-8">
                        <label className="block text-sm font-medium leading-6 text-text-primary">
                          Would You Like To Upload An Event Banner?
                          <input
                            type="checkbox"
                            className="ml-2 mb-1 rounded-md bg-neutral-dimmed border-1 shadow-sm ring-inset ring-gray-300 focus:ring-inset focus:ring-elements-secondary-dimmed"
                            onChange={handleBannerChange}
                            checked={hasEventBanner}
                          />
                        </label>
                      </div>

                      {hasEventBanner && (
                        <div>
                          <label className="mt-8 block text-sm font-medium leading-6 text-text-primary">
                            Event Banner{" "}
                          </label>
                          <div className="mt-2">
                            <Upload
                              imageType="photo"
                              filenames={filenames}
                              setFileNames={setFileNames}
                              control={control}
                              register={register}
                              errors={errors}
                              formSchema={formSchema}
                              name="file"
                              multiple={false}
                              component_choice="single"
                              showUploadList={false}
                            />
                          </div>
                        </div>
                      )}

                      {!hasEventBanner && (
                        <div className="mt-8">
                          <p className="text-sm text-text-tertiary">
                            If no event banner is uploaded, a default image will
                            be used.
                          </p>
                        </div>
                      )}
                    </div>
                  </>
                )}

                {action === "Remove an Event" && (
                  <>
                    <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8">
                      <div>
                        <label className="block text-sm font-medium leading-6 text-text-primary whitespace-nowrap">
                          Name of Past Event{" "}
                          <span className="text-helpers-error-button">*</span>
                        </label>
                      </div>
                      <div className="w-full">
                        <select
                          id="name"
                          name="name"
                          autoComplete="event"
                          className="block w-full rounded-md bg-neutral-dimmed border-0 py-1.5 text-text-primary placeholder-text-primary shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:max-w-md sm:text-sm sm:leading-6"
                          onChange={handleEventChange}
                        >
                          <option disabled selected value="">
                            Select Name of Event
                          </option>
                          {allEvents?.allEvents.map((event: any) => (
                            <option>{event.title}</option>
                          ))}
                        </select>
                      </div>
                    </div>

                    {eventSelected && (
                      <>
                        <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8 border-t border-gray-900/10">
                          <label className="block text-sm font-medium leading-6 text-text-primary">
                            Description of Event{" "}
                            <span className="text-helpers-error-button">*</span>
                          </label>
                          <div className="w-full">
                            <textarea
                              id="description"
                              placeholder=""
                              rows={4}
                              className="cursor-not-allowed block w-full rounded-md bg-neutral border-0 py-1.5 text-text-primary sm:max-w-md sm:text-sm sm:leading-6"
                              value={
                                eventToRemove ? eventToRemove.description : ""
                              }
                              disabled={true}
                            />
                          </div>
                        </div>
                        <div className="grid grid-cols-2 gap-x-6 gap-y-8 border-t border-gray-900/10 py-8">
                          <label className="block text-sm font-medium leading-6 text-text-primary">
                            Date of Event
                            <span className="text-helpers-error-button">*</span>
                          </label>
                          <div className="">
                            <input
                              id="description"
                              placeholder=""
                              className="cursor-not-allowed block w-full rounded-md bg-neutral border-0 py-1.5 text-text-primary sm:max-w-md sm:text-sm sm:leading-6"
                              value={eventDate}
                              disabled={true}
                            />
                          </div>
                        </div>
                      </>
                    )}
                  </>
                )}

                {action === "Update Past Event" && (
                  <>
                    <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8">
                      <div>
                        <label className="block text-sm font-medium leading-6 text-text-primary whitespace-nowrap">
                          Name of Past Event{" "}
                          <span className="text-helpers-error-button">*</span>
                        </label>
                      </div>
                      <div className="w-full">
                        <select
                          id="name"
                          {...register("title")}
                          autoComplete="pastEvent"
                          className="block w-full rounded-md bg-neutral-dimmed border-0 py-1.5 text-text-primary placeholder-text-primary shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:max-w-md sm:text-sm sm:leading-6"
                          onChange={handlePastEventChange}
                        >
                          <option disabled selected value="">
                            Select Name of Event
                          </option>
                          {pastEvents?.allEvents.map((event: any) => (
                            <option value={event.id}>{event.title}</option>
                          ))}
                        </select>
                        {errors.title && (
                          <p className="error text-helpers-error-button mt-2">
                            {errors.title?.message}
                          </p>
                        )}
                      </div>
                    </div>

                    {/* Conditionally render the Event Video Link and Event Presentation Slides fields */}
                    {pastEventSelected && (
                      <>
                        <div className="py-8 border-t border-gray-900/10">
                          <SelectField
                            label="Video Link"
                            name="videoUrl"
                            autoComplete="given-name"
                            type="text"
                            value={videoUrl}
                            placeholder="Enter The Event MS Stream Link "
                            formSchema={{ control, errors }}
                            options={[]}
                            onChange={handleVideoUrlChange}
                            errorMessage={validationErrors.slides}
                            className="text-text-primary placeholder-text-primary"
                            required={false}
                          />
                        </div>

                        <div className="col-span-full border-t border-gray-900/10 pt-8">
                          <SelectField
                            label="Event Presentation Slides"
                            name="slides"
                            autoComplete="given-name"
                            type="text"
                            value={slides}
                            placeholder="Enter The Link For The Presentation Slides"
                            formSchema={{ control, errors }}
                            options={[]}
                            onChange={handleSlideChange}
                            errorMessage={validationErrors.videoUrl}
                            className="text-text-primary placeholder-text-primary"
                            required={false}
                          />
                        </div>
                      </>
                    )}
                  </>
                )}
              </div>
            </div>
            <div className="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
              <Button
                type="text"
                label="Cancel"
                size="lg"
                className="text-text-primary"
                onClick={openModal}
                disabled={!isActionSelected}
              />
              {isModalOpen && (
                <Modal
                  closeModal={() => {
                    reset(initialFormValues);
                    window.location.reload();
                    closeModal();
                  }}
                  title="Warning"
                  description="Are you sure you want to cancel your changes?"
                  appearance="warning"
                  action="Continue"
                />
              )}

              {action === "Remove an Event" ? (
                <>
                  <Button
                    type="text"
                    label="Remove"
                    size="lg"
                    className="bg-elements-secondary-shadow hover:bg-elements-secondary-dimmed px-4 py-2 text-white"
                    onClick={openRemoveModal}
                    disabled={!isActionSelected}
                  />
                  {isRemoveModalOpen && (
                    <Transition.Root
                      show={isRemoveModalOpen}
                      as={React.Fragment}
                    >
                      {/* <Dialog
                          as="div"
                          className="fixed inset-0 z-10 overflow-y-auto"
                          onClose={closeRemoveModal}
                        > */}
                      <div className="fixed inset-0 z-10 overflow-y-auto flex items-center justify-center">
                        <Transition.Child
                          as={React.Fragment}
                          enter="ease-out duration-300"
                          enterFrom="opacity-0"
                          enterTo="opacity-100"
                          leave="ease-in duration-200"
                          leaveFrom="opacity-100"
                          leaveTo="opacity-0"
                        >
                          <div className="fixed inset-0 transition-opacity">
                            <div className="absolute inset-0 bg-gray-500 opacity-75" />
                          </div>
                        </Transition.Child>

                        <Transition.Child
                          as={React.Fragment}
                          enter="ease-out duration-300"
                          enterFrom="opacity-0 scale-95"
                          enterTo="opacity-100 scale-100"
                          leave="ease-in duration-200"
                          leaveFrom="opacity-100 scale-100"
                          leaveTo="opacity-0 scale-95"
                        >
                          <div className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform rounded-lg shadow-xl bg-neutral-dimmed-heavy sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                            <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                              <button
                                type="button"
                                className="rounded-md bg-neutral text-text-dimmed hover:text-text-tertiary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:elements-primary-main"
                                onClick={closeRemoveModal}
                              >
                                <span className="sr-only">Close</span>
                                <HiX className="w-6 h-6" aria-hidden="true" />
                              </button>
                            </div>
                            <div className="sm:flex sm:items-start">
                              <div className="bg-helpers-warning-dimmed mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10">
                                <HiOutlineExclamation
                                  className="text-helpers-warning-main w-6 h-6"
                                  aria-hidden="true"
                                />
                              </div>

                              <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                <h3 className="text-lg font-medium leading-6 text-text-primary">
                                  Warning
                                </h3>
                                <div className="mt-2">
                                  <p className="text-sm text-text-tertiary">
                                    Are you sure you want to remove an event?
                                  </p>
                                </div>
                              </div>
                            </div>
                            <div className="mt-5 sm:mt-4 flex sm:flex-row-reverse space-x-4">
                              <Button
                                type="primary"
                                size="md"
                                label="Remove"
                                className="ml-3 bg-helpers-warning-button hover:bg-helpers-warning-button-hover focus:ring-helpers-warning-button"
                                disabled={!isActionSelected}
                                buttonType="submit"
                              />
                              <button
                                type="button"
                                className="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium border rounded-md shadow-sm border-divider-main bg-neutral-dimmed-heavy hover:bg-neutral-dimmed text-text-secondary hover:text-text-tertiary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-elements-primary-main sm:mt-0 sm:w-auto sm:text-sm"
                                onClick={closeRemoveModal}
                              >
                                Cancel
                              </button>
                            </div>
                          </div>
                        </Transition.Child>
                      </div>
                      {/* </Dialog> */}
                    </Transition.Root>
                  )}
                </>
              ) : (
                <Button
                  type="primary"
                  size="md"
                  label="Save"
                  className="bg-elements-secondary-shadow hover:bg-elements-secondary-dimmed"
                  disabled={!isActionSelected}
                  buttonType="submit"
                />
              )}
            </div>
          </form>
        </div>
        <div
          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
          aria-hidden="true"
        >
          <div
            className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#bfdbfe] to-[#2563eb] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
            style={{
              clipPath:
                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
            }}
          />
        </div>
      </div>
    </Page>
  );
}