/* eslint-disable react-hooks/exhaustive-deps */

"use client";

import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import Image from "next/image";
import * as React from "react";
import { useEffect } from "react";

// icons
import errorIcon from "@/assets/svg/icons/error.svg";
import successIcon from "@/assets/svg/icons/success.svg";
import warningIcon from "@/assets/svg/icons/warning.svg";
// utils
import { cn } from "@/libs/utils";
import { useModalStore } from "@/store/modal-store/use-modal-store";

import type { ButtonProps } from "../button/button";
import { Button } from "../button/button";
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
} from "../dialog/dialog";
import styles from "./modal.module.css";

const ModalRoot = Dialog;
const ModalTrigger = DialogTrigger;
const ModalPortal = DialogPortal;
const ModalClose = DialogClose;
const ModalOverlay = DialogOverlay;
ModalOverlay.displayName = "ModalOverlay";

const ModalHeader = DialogHeader;
ModalHeader.displayName = "ModalHeader";

const ModalTitle = DialogTitle;
ModalTitle.displayName = "ModalTitle";

const ModalFooter = DialogFooter;
ModalFooter.displayName = "ModalFooter";

const ModalDescription = DialogDescription;
ModalDescription.displayName = "ModalDescription";

const ModalContentTypeIcons = {
  success: successIcon,
  warning: warningIcon,
  error: errorIcon,
};

interface ModalContentProps
  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
  title?: string;
  description?: string;
  closable?: boolean;
  size?:
    | "sm"
    | "md"
    | "lg"
    | "xl"
    | "2xl"
    | "3xl"
    | "4xl"
    | "5xl"
    | "6xl"
    | "7xl"
    | "full";
  onOkText?: string;
  onCancelText?: string;
  variant?: undefined | "success" | "warning" | "error";
  okVariant?: ButtonProps["variant"];
  cancelVariant?: ButtonProps["variant"];
  header?: React.ReactNode;
  footer?: React.ReactNode;
  onClose?: () => void;
  onOk?: () => void;
  onCancel?: () => void;
  shouldCloseOnOverlayClick?: boolean;
}

const ModalContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  ModalContentProps
>(
  (
    {
      className,
      title,
      description,
      children,
      closable = true,
      size = "sm",
      onOkText,
      onCancelText,
      variant,
      okVariant = "primary",
      cancelVariant = "outline",
      header,
      footer,
      onOk,
      onCancel,
      onClose,
      shouldCloseOnOverlayClick = true,
      ...props
    },
    ref,
  ) => (
    <ModalPortal>
      <ModalOverlay
        onClick={() => {
          if (onClose && shouldCloseOnOverlayClick) {
            onClose();
          }
          return false;
        }}
      />
      <DialogPrimitive.Content
        ref={ref}
        className={cn(
          // This styles came from shadcn
          "fixed left-[50%] top-[50%] z-[51] w-full translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full dark:border-gray-800 dark:bg-gray-950",
          className,
          // Your custom tailwindcss styles
          styles["Modal-content"],
          size === "sm" && "max-w-sm",
          size === "md" && "max-w-md",
          size === "lg" && "max-w-lg",
          size === "xl" && "max-w-xl",
          size === "2xl" && "max-w-2xl",
          size === "3xl" && "max-w-3xl",
          size === "4xl" && "max-w-4xl",
          size === "5xl" && "max-w-5xl",
          size === "6xl" && "max-w-6xl",
          size === "7xl" && "max-w-7xl",
          size === "full" &&
            "max-h-full h-full overflow-auto max-w-full !rounded-none",
        )}
        {...props}
      >
        {/* Modal Head Tool Area - This field includes customized icon and close button */}
        {variant && (
          <div className="flex items-start justify-between">
            <Image
              src={ModalContentTypeIcons[variant]}
              width={48}
              height={48}
              alt={`${variant} icon`}
            />
            {/* @todo close button's visibility'll be dynamic */}
            {closable && (
              <DialogPrimitive.Close
                onClick={onClose}
                className="h-fit rounded-sm opacity-70 ring-1 ring-gray-100 ring-offset-4 ring-offset-white transition-opacity data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none dark:ring-offset-gray-950 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400 dark:focus:ring-gray-300"
              >
                <X className="size-5" />
              </DialogPrimitive.Close>
            )}
          </div>
        )}
        {/* Header area */}
        {header || (
          <ModalHeader>
            {title && <ModalTitle>{title}</ModalTitle>}
            {description && <ModalDescription>{description}</ModalDescription>}
          </ModalHeader>
        )}
        {children}
        {/* Footer area */}
        {footer || (
          <ModalFooter className="flex justify-between pt-4">
            {/* @todo Add translation here */}
            {onCancel && (
              <Button
                variant={cancelVariant}
                className="w-full"
                onClick={onCancel}
              >
                {onCancelText || "Vazgeç"}
              </Button>
            )}
            {/* @todo Add translation here */}
            <Button variant={okVariant} className="w-full" onClick={onOk}>
              {onOkText || "Onayla"}
            </Button>
          </ModalFooter>
        )}
        {/* Close Button - If there is no icon this'll set on here */}
        {!variant && closable && (
          <DialogPrimitive.Close
            onClick={onClose}
            className="absolute right-6 top-6 rounded-sm opacity-70 ring-1 ring-gray-100 ring-offset-4 ring-offset-white transition-opacity data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none dark:ring-offset-gray-950 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400 dark:focus:ring-gray-300"
          >
            <X className="size-5" />
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </ModalPortal>
  ),
);
ModalContent.displayName = DialogPrimitive.Content.displayName;

export interface ModalProps extends ModalContentProps {
  open: boolean;
  urlHash?: string;
}

function Modal({ open, urlHash, ...props }: ModalProps) {
  const { openModal } = useModalStore();

  useEffect(() => {
    if (open && urlHash) {
      const modalSlug = `#${urlHash}-modal`;
      openModal(modalSlug, props.onClose);
    }
  }, [open, urlHash]);

  return (
    <ModalRoot modal open={open}>
      <ModalContent {...props} />
    </ModalRoot>
  );
}

export {
  Modal,
  ModalClose,
  ModalContent,
  ModalDescription,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  ModalPortal,
  ModalTitle,
  ModalTrigger,
};