import React, { Fragment } from "react";

// next
import { useRouter } from "next/router";

// react hook form
import { useForm, Controller } from "react-hook-form";

import { Transition, Dialog, Listbox } from "@headlessui/react";

// date helper
import { getDatesAfterCurrentDate, getTimestampAfterCurrentTime } from "helpers/date-time.helper";

// hooks
import useToast from "hooks/use-toast";

// components
import { PrimaryButton, SecondaryButton, Icon } from "components/ui";

// types
import type { IUserNotification } from "types";

type SnoozeModalProps = {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
  notification: IUserNotification | null;
  onSubmit: (notificationId: string, dateTime?: Date | undefined) => Promise<void>;
};

const dates = getDatesAfterCurrentDate();
const timeStamps = getTimestampAfterCurrentTime();

const defaultValues = {
  time: null,
  date: null,
};

export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
  const { isOpen, onClose, notification, onSuccess, onSubmit: handleSubmitSnooze } = props;

  const router = useRouter();
  const { workspaceSlug } = router.query;

  const { setToastAlert } = useToast();

  const {
    formState: { isSubmitting },
    reset,
    handleSubmit,
    control,
  } = useForm<any>({
    defaultValues,
  });

  const onSubmit = async (formData: any) => {
    if (!workspaceSlug || !notification) return;

    const dateTime = new Date(
      `${formData.date.toLocaleDateString()} ${formData.time.toLocaleTimeString()}`
    );

    await handleSubmitSnooze(notification.id, dateTime).then(() => {
      onClose();
      onSuccess();
      setToastAlert({
        title: "Notification snoozed",
        message: "Notification snoozed successfully",
        type: "success",
      });
    });
  };

  const handleClose = () => {
    onClose();
    const timeout = setTimeout(() => {
      reset();
      clearTimeout(timeout);
    }, 500);
  };

  return (
    <Transition.Root show={isOpen} as={React.Fragment}>
      <Dialog as="div" className="relative z-20" onClose={handleClose}>
        <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 bg-custom-backdrop bg-opacity-50 transition-opacity" />
        </Transition.Child>

        <div className="fixed inset-0 z-20 overflow-y-auto">
          <div className="flex items-center justify-center min-h-full p-4 text-center">
            <Transition.Child
              as={React.Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              enterTo="opacity-100 translate-y-0 sm:scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-80 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                <form onSubmit={handleSubmit(onSubmit)}>
                  <div className="flex justify-between items-center">
                    <Dialog.Title
                      as="h3"
                      className="text-lg font-medium leading-6 text-custom-text-100"
                    >
                      Customize Snooze Time
                    </Dialog.Title>

                    <div>
                      <button type="button">
                        <Icon iconName="close" className="w-5 h-5 text-custom-text-100" />
                      </button>
                    </div>
                  </div>

                  <div className="mt-5 flex gap-3">
                    <div className="flex-1">
                      <Controller
                        control={control}
                        name="time"
                        rules={{ required: "Please select a time" }}
                        render={({ field: { value, onChange } }) => (
                          <Listbox value={value} onChange={onChange}>
                            {({ open }) => (
                              <>
                                <div className="relative mt-2">
                                  <Listbox.Button className="relative w-full cursor-default rounded-md border border-custom-border-100 bg-custom-background-100 py-1.5 pl-3 pr-10 text-left text-custom-text-100 shadow-sm focus:outline-none sm:text-sm sm:leading-6">
                                    <span className="flex items-center">
                                      <span className="ml-3 block truncate">
                                        {value
                                          ? new Date(value)?.toLocaleTimeString([], {
                                              hour: "2-digit",
                                              minute: "2-digit",
                                            })
                                          : "Select Time"}
                                      </span>
                                    </span>
                                    <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
                                      <Icon
                                        iconName="expand_more"
                                        className="h-5 w-5 text-custom-text-100"
                                        aria-hidden="true"
                                      />
                                    </span>
                                  </Listbox.Button>

                                  <Transition
                                    show={open}
                                    as={Fragment}
                                    leave="transition ease-in duration-100"
                                    leaveFrom="opacity-100"
                                    leaveTo="opacity-0"
                                  >
                                    <Listbox.Options className="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-custom-background-100 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
                                      {timeStamps.map((time, index) => (
                                        <Listbox.Option
                                          key={`${time.label}-${index}`}
                                          className={({ active }) =>
                                            `relative cursor-default select-none py-2 pl-3 pr-9 ${
                                              active
                                                ? "bg-custom-primary-100/80 text-custom-text-100"
                                                : "text-custom-text-700"
                                            }`
                                          }
                                          value={time.value}
                                        >
                                          {({ selected, active }) => (
                                            <>
                                              <div className="flex items-center">
                                                <span
                                                  className={`ml-3 block truncate ${
                                                    selected ? "font-semibold" : "font-normal"
                                                  }`}
                                                >
                                                  {time.label}
                                                </span>
                                              </div>

                                              {selected ? (
                                                <span
                                                  className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
                                                    active
                                                      ? "text-custom-text-100"
                                                      : "text-custom-primary-100"
                                                  }`}
                                                >
                                                  <Icon
                                                    iconName="done"
                                                    className="h-5 w-5"
                                                    aria-hidden="true"
                                                  />
                                                </span>
                                              ) : null}
                                            </>
                                          )}
                                        </Listbox.Option>
                                      ))}
                                    </Listbox.Options>
                                  </Transition>
                                </div>
                              </>
                            )}
                          </Listbox>
                        )}
                      />
                    </div>
                    <div className="flex-1">
                      <Controller
                        name="date"
                        control={control}
                        rules={{ required: "Please select a date" }}
                        render={({ field: { value, onChange } }) => (
                          <Listbox value={value} onChange={onChange}>
                            {({ open }) => (
                              <>
                                <div className="relative mt-2">
                                  <Listbox.Button className="relative w-full cursor-default rounded-md border border-custom-border-100 bg-custom-background-100 py-1.5 pl-3 pr-10 text-left text-custom-text-100 shadow-sm focus:outline-none sm:text-sm sm:leading-6">
                                    <span className="flex items-center">
                                      <span className="ml-3 block truncate">
                                        {value
                                          ? new Date(value)?.toLocaleDateString([], {
                                              day: "numeric",
                                              month: "long",
                                              year: "numeric",
                                            })
                                          : "Select Date"}
                                      </span>
                                    </span>
                                    <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
                                      <Icon
                                        iconName="expand_more"
                                        className="h-5 w-5 text-custom-text-100"
                                        aria-hidden="true"
                                      />
                                    </span>
                                  </Listbox.Button>

                                  <Transition
                                    show={open}
                                    as={Fragment}
                                    leave="transition ease-in duration-100"
                                    leaveFrom="opacity-100"
                                    leaveTo="opacity-0"
                                  >
                                    <Listbox.Options className="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-custom-background-100 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
                                      {dates.map((date, index) => (
                                        <Listbox.Option
                                          key={`${date.label}-${index}`}
                                          className={({ active }) =>
                                            `relative cursor-default select-none py-2 pl-3 pr-9 ${
                                              active
                                                ? "bg-custom-primary-100/80 text-custom-text-100"
                                                : "text-custom-text-700"
                                            }`
                                          }
                                          value={date.value}
                                        >
                                          {({ selected, active }) => (
                                            <>
                                              <div className="flex items-center">
                                                <span
                                                  className={`ml-3 block truncate ${
                                                    selected ? "font-semibold" : "font-normal"
                                                  }`}
                                                >
                                                  {date.label}
                                                </span>
                                              </div>

                                              {selected ? (
                                                <span
                                                  className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
                                                    active
                                                      ? "text-custom-text-100"
                                                      : "text-custom-primary-100"
                                                  }`}
                                                >
                                                  <Icon
                                                    iconName="done"
                                                    className="h-5 w-5"
                                                    aria-hidden="true"
                                                  />
                                                </span>
                                              ) : null}
                                            </>
                                          )}
                                        </Listbox.Option>
                                      ))}
                                    </Listbox.Options>
                                  </Transition>
                                </div>
                              </>
                            )}
                          </Listbox>
                        )}
                      />
                    </div>
                  </div>

                  <div className="mt-5 flex items-center justify-between gap-2">
                    <div className="w-full flex items-center gap-2 justify-end">
                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                      <PrimaryButton type="submit" loading={isSubmitting}>
                        {isSubmitting ? "Submitting..." : "Submit"}
                      </PrimaryButton>
                    </div>
                  </div>
                </form>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition.Root>
  );
};