"use client"
import type { Children, Classname, DefaultHTMLStyleProps, ParallelModalSearchParams } from "@/core/types/common";

import { useEffect, useRef, type JSX } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useAppSelector } from "@/core/utils/hooks/useRedux";
import useHiddenUI from "@/app/(visualization)/project/@modals/(.)customization/_utils/hooks/useHiddenUI";

interface ParallelModalProps extends ParallelModalSearchParams, Children, Classname, DefaultHTMLStyleProps {
  onClose?: () => void;
  hideOnQuery?: string[];
  id?: string;
}

/**
 * The wrapper component of **parallel modal**.
 * This component handle parallel routes behavior on modal open/close.
 * It's initial setup, because it needs modifies for this specific project.
 */
export default function ParallelModalWrapper(props: Readonly<ParallelModalProps>): JSX.Element | null {
  const router = useRouter();
  const pathname = usePathname();
  const sp = useSearchParams();
  const content = useRef<HTMLDivElement>(null);
  const smoothIn = sp.get("smooth") === "true";
  const smoothOut = sp.get("close") === "smooth";
  const keepState = sp.get("keepState");
  const keepParams = sp.get("keepParams");

  const { hidden } = useHiddenUI();

  useEffect(() => {
    /** Smooth opening animated effect. Required **smooth** query in URL search params */
    if (smoothIn && content.current) {
      content.current.style.opacity = "100";
      content.current.style.transform = "translateX(0px)";
      const searchParams = new URLSearchParams(sp);
      searchParams.delete("smooth");
      router.replace(pathname + "?" + searchParams.toString(), { scroll: false });
    }
    // eslint-disable-next-line
  }, [pathname]);

  useEffect(() => {
    /** Smooth closing animated effect. Required **close** query equals to **smooth** in URL search params */
    if (smoothOut && content.current) {
      content.current.style.transform = "translateX(-100px)";
      content.current.style.opacity = "0";
      /**
       * The optional property which processing should be kept last parallel modal's route on closing or no.
       * The `keepParams` property contains passed actual query params on closing modal. Otherwise, you cannot get actual params.
       * Then returning to the last parallel route could be handled by getting `return_source` redirecting.
       * The `return` property could contain some additional value required to handle this process OR just boolean as string to detect when its function applied.
       * */
      const keptSearchParams = new URLSearchParams();
      if (keepState && keepParams) {
        keptSearchParams.set("return", keepState);
        const sourceSearchParams = new URLSearchParams(keepParams);
        sourceSearchParams.delete("close");
        keptSearchParams.set("return_source", `${pathname}?${sourceSearchParams.toString()}`);
      }
      // router.replace(props.origin, { scroll: false })
      setTimeout(() => router.replace(props.origin + (keepState ? `?${keptSearchParams.toString()}` : ""), { scroll: false }), 200);
    }
    // eslint-disable-next-line
  }, [sp]);

  if ((pathname === props.origin)
    || !props.modal
    || (decodeURIComponent(pathname) !== decodeURIComponent(props.modal))) {
    if (content.current) {
      content.current.style.opacity = "0";
      content.current.style.transform = "translateX(-100px)";
    }
    return null;
  }

  return (
    <div
      ref={content}
      id={props.id}
      className={`
        fixed rounded-[8px] bg-white transition-all duration-500 !z-[950] shadow-card ${hidden ? "!opacity-0" : ""}
        ${smoothIn ? "opacity-0 -translate-x-[100px]" : ""} ${(sp.get("filterBarOpened") === "true") ? "!rounded-r-none" : ""}
        ${props.className || ""}
        ${props.hideOnQuery
          ? sp.get(props.hideOnQuery[0]) === props.hideOnQuery[1]
            ? "!opacity-0 !-z-50"
            : ""
          : ""}
      `}
      style={{ width: props.width, height: props.height }}
      onClick={e => e.stopPropagation()}
    >
      <div className={"relative w-full h-full overflow-hidden"}>
        {props.children}
      </div>
    </div>
  );
}