import Task from "@/components/task";

import ModalCalendar from "@/components/ModalCalendar";
import Button from "@/components/ui/Button";
import ModalWindow from "@/components/ui/Modal";
import { withTitle } from "@/constructors/Component";
import { UrlsTitle } from "@/enums/urls";
import { cn } from "@/utils/class-merge";
import { PlusIcon } from "@heroicons/react/20/solid";
import {
  BookmarkIcon,
  BookOpenIcon,
  CalendarDaysIcon,
  DocumentDuplicateIcon,
  FunnelIcon,
  InboxArrowDownIcon,
  MagnifyingGlassIcon,
  PencilIcon,
} from "@heroicons/react/24/outline";
import { FunctionComponent } from "preact";
import { useEffect, useMemo, useState } from "preact/hooks";
import { Nullable } from "primereact/ts-helpers";
import { SubmitHandler, useForm } from "react-hook-form";
import { ITask, ITaskForm } from "./profile_tasks.dto";
import classes from "./profile_tasks.module.scss";

const example_tasks: ITask[] = [
  {
    checked: false,
    date: new Date(),
    description: "test",
    id: 1,
    name: "test1",
    tags: ["Программирование", "Лабораторная работа"],
  },
  {
    checked: true,
    date: new Date(2025, 6, 2),
    description: "test2",
    id: 3,
    name: "test3",
    tags: ["Информатика", "Практическая работа"],
  },
  {
    checked: false,
    date: new Date(2025, 5, 1),
    description: "test3",
    id: 2,
    name: "test2",
    tags: ["Математика", "Домашнее задание"],
  },
];

const ProfileTasks: FunctionComponent = () => {
  const [openModal, setIsOpen] = useState(false); // Открыта модалка
  const [openModalCalendar, setOpenModalCalendar] = useState(false); // Открыта модалка календаря
  const [isEdit, setIsEdit] = useState(false); // Открыта задача
  const [isEditModal, setIsEditModal] = useState(false); // Включено редактирование задачи
  const [isCreating, setIsCreating] = useState(false); // Включено создание задачи
  const [editContent, setEditContent] = useState<ITask | null>(null); // Содержимое редактируемой задачи
  const [calendarDate, setCalendarDate] = useState<Nullable<Date>>(); // Выбранная в календаре дата
  const getDate = useMemo(() => {
    const date = new Date();
    const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
    return formatter.format(date);
  }, []);
  const init_tasks: ITask[] = localStorage.getItem("tasks")
    ? JSON.parse(localStorage.getItem("tasks") as string)
    : example_tasks;
  init_tasks.forEach((task) => {
    task.date = new Date(task.date);
  });
  const [tasks, setTasks] = useState<ITask[]>(init_tasks);
  useEffect(() => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
  }, [tasks]);

  const {
    handleSubmit,
    register,
    reset,
    setError,
    formState: { errors },
  } = useForm<ITaskForm>({
    defaultValues: {
      tags: [],
    },
  });
  const saveTask: SubmitHandler<ITaskForm> = (data) => {
    if (!calendarDate) {
      setError("date", { message: "Выберите дату" });
      return;
    }
    const eTask: ITask = { ...data, date: calendarDate };
    if (isCreating) setTasks([...tasks, eTask]);
    else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
    if (isCreating) setIsOpen(false);
  };
  useEffect(() => {
    if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
    else reset();
  }, [editContent]);
  useEffect(() => {
    reset({
      name: "",
      description: "",
      date: "",
      tags: ["Тег1", "Тег2"],
      checked: false,
    });
  }, [isCreating]);
  return (
    <div class={classes.container}>
      <ModalCalendar
        isOpen={openModalCalendar}
        setIsOpen={setOpenModalCalendar}
        onClose={() => {
          if (isEdit && !isEditModal) setCalendarDate(null);
        }}
        onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
        value={calendarDate!}
      />
      <ModalWindow
        isOpen={openModal}
        setIsOpen={setIsOpen}
        onClose={() => {
          setIsEdit(false);
          setEditContent(null);
          setIsCreating(false);
          setIsEditModal(false);
          setCalendarDate(null);
        }}
      >
        {isEdit && editContent && (
          <form
            class="flex h-full w-full flex-col items-start justify-between"
            onSubmit={(e) => {
              e.preventDefault();
              if (isEditModal) handleSubmit(saveTask)();
              else setIsEditModal(!isEditModal);
            }}
          >
            <div class="flex w-full flex-row items-start justify-between">
              <div class="flex flex-1 flex-col gap-1 pe-2">
                <input
                  class="w-full text-2xl outline-0"
                  disabled={!isEditModal}
                  placeholder="Название"
                  {...register("name", {
                    required: "Заполните название",
                    maxLength: { value: 20, message: "Максимум 20 символов в названии" },
                  })}
                />
                <textarea
                  class="h-[5rem] w-full resize-none outline-0"
                  disabled={!isEditModal}
                  placeholder={isEditModal ? "Описание" : ""}
                  {...register("description", {
                    maxLength: { value: 200, message: "Максимум 200 символов в описании" },
                  })}
                />
                <input
                  type="datetime-local"
                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
                  hidden
                  {...register("date")}
                />
                <input type="checkbox" hidden {...register("checked")} />
              </div>
              <div
                className="flex cursor-pointer flex-col items-center gap-3"
                onClick={() => {
                  if (isEditModal) {
                    handleSubmit(saveTask)();
                    setIsEditModal(!isEditModal);
                  } else setIsEditModal(!isEditModal);
                }}
              >
                {isEditModal ? (
                  <>
                    <InboxArrowDownIcon class="size-6" />
                    <p class="text-[0.7rem]">Сохранить</p>
                  </>
                ) : (
                  <>
                    {" "}
                    <PencilIcon class="size-6" />
                    <p class="text-[0.7rem]">Редактировать</p>
                  </>
                )}
              </div>
            </div>
            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
            {errors.description && <p class="text-red-500">{errors.description.message}</p>}
            <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
              <div
                class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
                  "cursor-pointer": isEditModal,
                })}
                onClick={() => {
                  if (!isEditModal) return;
                  setOpenModalCalendar(true);
                  setCalendarDate(editContent.date);
                }}
              >
                <CalendarDaysIcon class="size-10" />
                <p>
                  {Intl.DateTimeFormat("ru-RU", {
                    day: "2-digit",
                    month: "2-digit",
                    year: "numeric",
                    hour: "2-digit",
                    minute: "2-digit",
                  }).format(calendarDate!)}
                </p>
              </div>
              <div class="flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2">
                <p class="flex flex-row gap-2">
                  <BookOpenIcon class="size-5" />
                  {editContent.tags[0]}
                </p>
                <p class="flex flex-row gap-2">
                  <DocumentDuplicateIcon class="size-5" />
                  {editContent.tags[1]}
                </p>
              </div>
            </div>
          </form>
        )}
        {isCreating && (
          <form
            class="flex h-full w-full flex-col items-start justify-between"
            onSubmit={(e) => {
              e.preventDefault();
              handleSubmit((data) => saveTask({ ...data, id: tasks.length + 1 }))();
            }}
          >
            <div class="flex w-full flex-1 flex-row items-start justify-between">
              <div class="me-4 flex h-full flex-1 flex-col gap-1">
                <input
                  class="text-2xl outline-0"
                  maxLength={20}
                  placeholder="Название"
                  {...register("name", { required: "Заполните название" })}
                />
                <textarea
                  class="mb-10 w-full flex-1 resize-none outline-0"
                  placeholder="Описание"
                  maxLength={200}
                  {...register("description")}
                />
                <input
                  type="datetime-local"
                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
                  hidden
                  {...register("date")}
                />
                <input type="checkbox" checked={false} hidden {...register("checked")} />
              </div>
              <div class="flex flex-row gap-3 self-start">
                <CalendarDaysIcon
                  class="size-10 cursor-pointer"
                  onClick={() => {
                    setOpenModalCalendar(true);
                    setCalendarDate(calendarDate ?? new Date());
                  }}
                />
                <BookmarkIcon class="ms-4 size-10 cursor-pointer" />
              </div>
            </div>
            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
            {errors.date && <p class="text-red-500">{errors.date.message}</p>}
            <div className="mb-8 flex h-16 flex-col items-center gap-6 self-center md:mb-0 md:flex-row md:self-start">
              <Button
                className="text-sm"
                onClick={() => {
                  setIsOpen(false);
                }}
              >
                Отмена
              </Button>
              <Button color="red" type="submit">
                Добавить задачу
              </Button>
            </div>
          </form>
        )}
      </ModalWindow>
      {tasks.length > 0 ? (
        <>
          <div class={classes.header}>Сегодня: {getDate}</div>
          <div class={classes.tasks_container}>
            {tasks
              .sort((a, b) => b.date.getTime() - a.date.getTime())
              .map((task) => (
                <Task
                  name={task.name}
                  key={task.id}
                  checked={task.checked}
                  onClick={() => {
                    setIsOpen(true);
                    setIsEdit(true);
                    setEditContent(task);
                    setCalendarDate(task.date);
                  }}
                  onMarkClick={() => {
                    setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
                  }}
                />
              ))}
          </div>
          <div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
            <div
              class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]"
              onClick={() => {
                setIsCreating(true);
                setIsOpen(true);
              }}
            >
              <PlusIcon />
            </div>
            <div class="absolute left-0 my-auto hidden flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100 md:flex">
              <div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
                <MagnifyingGlassIcon class="size-12" />
              </div>
              <div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
                <FunnelIcon class="size-12" />
              </div>
            </div>
          </div>
        </>
      ) : (
        <>
          <div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</div>
          <div class="fixed right-[22rem] bottom-4 hidden flex-row items-center justify-start overflow-x-hidden py-2 md:flex">
            <div
              class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out hover:bg-[rgb(251,194,199,0.7)]"
              onClick={() => {
                setIsCreating(true);
                setIsOpen(true);
              }}
            >
              <PlusIcon />
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export default withTitle(UrlsTitle.TASKS, ProfileTasks);