import {
  forwardRef,
  ReactNode,
  useCallback,
  useEffect,
  useMemo,
  useRef,
} from "react";
import { NotificationProps } from "./interface";
import { motion } from "framer-motion";
import { notificationStore } from "./notification-store";
import {
  applyContentStyle,
  applyContentWrapperStyle,
  applyNotification,
  applyNotificationAction,
  applyNotificationCloseBtn,
  // applyNotificationContentStyle,
  applyNotificationSlide,
  applyNotificationTitle,
} from "./style";
import CloseIcon from "@mui/icons-material/Close";
import ErrorCircleIcon from "@mui/icons-material/ErrorOutline";
import InfoCircleIcon from "@mui/icons-material/Info";
import SuccessCircleIcon from "@mui/icons-material/CheckCircleOutline";
import WarningCircleIcon from "@mui/icons-material/Warning";
import { globalColor } from "../colorBuilder";
import { applyBoxStyle } from "../DropDown/style";
import { useTheme } from "@mui/material";

export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
  (props, ref) => {
    const {
      type,
      action,
      // closable,
      showIcon = true,
      // duration,
      id = "",
      position = "topRight",
      icon,
      // content,
      title,
      onClose,
    } = props;
    const duration = 1200;
    const handlerId = useRef<number | undefined>();
const theme = useTheme()
    const delayClose = useCallback(() => {
      let timeId: number | undefined;
      if (duration) {
        timeId = window.setTimeout(() => {
          notificationStore.remove(id);
          onClose?.();
        }, duration);
      } else {
        timeId = window.setTimeout(() => {
          notificationStore.remove(id);
          onClose?.();
          handlerId.current = undefined;
        }, notificationStore.getConfig()?.duration ?? 3000);
      }
      handlerId.current = timeId;
    }, [duration, id, onClose]);

    useEffect(() => {
      delayClose();
      return () => {
        if (handlerId.current) {
          clearTimeout(handlerId.current);
          handlerId.current = undefined;
        }
      };
    }, [delayClose]);

    const normalIcon: ReactNode = useMemo(() => {
      if (showIcon) {
        if (icon) {
          return icon;
        } else {
          switch (type) {
            case "info":
              return <InfoCircleIcon sx={{ color: globalColor("blue-03") }} />;
            case "error":
              return <ErrorCircleIcon sx={{ color: globalColor("red-03") }} />;
            case "success":
              return (
                <SuccessCircleIcon sx={{ color: globalColor("green-03") }} />
              );
            case "warning":
              return (
                <WarningCircleIcon sx={{ color: globalColor("orange-03") }} />
              );
            case "normal":
            default:
              return <></>;
          }
        }
      } else {
        return <></>;
      }
    }, [showIcon, icon, type]);

    return (
      <motion.div
        ref={ref}
        css={[
          applyNotification(
            // closable
            true
          ),
          applyBoxStyle(props,theme),
        ]}
        layout
        initial="initial"
        animate="animate"
        exit="exit"
        variants={applyNotificationSlide(position)}
        onMouseEnter={() => {
          if (handlerId.current) {
            clearTimeout(handlerId.current);
            handlerId.current = undefined;
          }
        }}
        onMouseLeave={() => {
          delayClose();
        }}
      >
        <div css={applyContentWrapperStyle}>
          <div className="icon-container">{normalIcon}</div>
          <div css={applyContentStyle(showIcon)}>
            {title && <div css={applyNotificationTitle}>{title}</div>}
            {/* {content && (
              <div css={applyNotificationContentStyle}>{content}</div>
            )} */}
          </div>
        </div>
        {action && <div css={applyNotificationAction}>{action}</div>}
        {/* {closable && ( */}
        <div
          css={applyNotificationCloseBtn}
          onClick={() => {
            onClose?.();
          }}
        >
          <CloseIcon
            sx={{ fontSize: "14px" }}
            onClick={() => {
              onClose?.();
            }}
            color="error"
          />
        </div>
        {/* )} */}
      </motion.div>
    );
  }
);

Notification.displayName = "Notice";
