import React, { useState, useRef, useEffect, HTMLAttributes } from "react";

import "./Notification.css";

import { renderProps, onLoad, getCN, get_typeName, isDevaice, getDevaice } from "../utils";

import { IconLoading } from "../../svg_icons/IconLoading";

export interface INotification extends HTMLAttributes<HTMLDivElement> {
  maxWidth?: number;
  loading?: false | "success" | "error" | "loading";
  duration?: number;
  onClose?: boolean;
  onClosed?: () => void;
  device?: "desktop" | "mobile";
}

function Notification({
  children,
  maxWidth = window.innerWidth - 40,
  loading = false,
  duration = 3000,
  onClose,
  onClosed,
  device = getDevaice(),
  ...props
}: INotification) {
  const [is_active, setIs_active] = useState(false);
  const ref = useRef<HTMLInputElement | null>(null);
  const [width, setWidth] = useState(40);

  const callbackClose = () => {
    const timerClose = setTimeout(() => {
      onClosed && onClosed();
      clearTimeout(timerClose);
    }, 500)
  }

  useEffect(() => {
    if (loading == `success` || loading == `error`) {
      const timer = setTimeout(() => {
        setIs_active(false);
        callbackClose()
        clearTimeout(timer)
      }, 2500)
    }
    if (loading) return setWidth(40);
  }, [loading])

  useEffect(() => {
    if (onClose) {
      setIs_active(false);
      callbackClose()
    }
    if (duration) {
      setTimeout(() => {
        setIs_active(false);
        callbackClose()
      }, duration);
    }

    if (!onClose) setIs_active(true);
    if (ref.current) {
      if (ref.current.clientWidth >= maxWidth) {
        setWidth(maxWidth);
      } else setWidth(ref.current.clientWidth);
    }
  }, [ref && ref.current && ref.current.clientWidth, onClose]);

  return (
    <div {...renderProps(props)} className="MYUI-Notification">
      <div
        data-active={is_active}
        data-device={device}
        onClick={() => {
          setIs_active(false);
          callbackClose()
        }}
        style={{
          width: !!loading ? width : `auto`,
        }}
        className="MYUI-Notification__in"
      >
        {!loading && (
          <div style={{ whiteSpace: `nowrap` }} ref={ref}>
            {children}
          </div>
        )}
        {loading == `loading` && (
          <div className={getCN([`MYUI-Notification__loading`])} ref={ref}>
            <IconLoading width={36} height={36} />
          </div>
        )}
        {loading == `success` && (
          <div
            className={getCN([`MYUI-Notification__loading--success`])}
            ref={ref}
          >
            <svg
              className="MYUI-Notification__loading-in"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 52 52"
            >
              <circle
                className="MYUI-Notification__loading--circle"
                cx="26"
                cy="26"
                r="25"
                fill="none"
              />
              <path
                className="MYUI-Notification__loading--check"
                fill="none"
                d="M14.1 27.2l7.1 7.2 16.7-16.8"
              />
            </svg>
          </div>
        )}

        {loading == `error` && (
          <div
            className={getCN([`MYUI-Notification__loading--error`])}
            ref={ref}
          >
            <svg
              className="MYUI-Notification__loading-in"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 52 52"
            >
              <circle
                className="MYUI-Notification__loading--circle"
                cx="26"
                cy="26"
                r="25"
                fill="none"
              />
              <path
                className="MYUI-Notification__loading--check"
                fill="none"
                d="M 36 36 L 16.5 16.5 M 16.5 36 L 36 16.5"
              />
            </svg>
          </div>
        )}
      </div>
    </div>
  );
}

export default Notification;