import * as React from "react";
import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
import { useNetworkStatusLocalizations } from "./utils";

type Props = {
  children?: React.ReactNode;
  hidden?: boolean;
  online?: boolean;
  previousOnline?: boolean;
  dismiss: () => void;
};

const NOTIF_DURATION = 4500;

const styles: Record<any, React.CSSProperties> = {
  body: {
    position: "absolute",
    bottom: 0,
    width: 1920,
    height: 200,
    background:
      "linear-gradient(180deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,1) 49%, rgba(0,0,0,0.85) 100%)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
    color: "#fff",
    paddingBottom: 15,
  },
  title: {
    fontSize: 28,
    margin: 0,
    padding: 0,
  },
  subtitle: {
    fontSize: 20,
    margin: 0,
    padding: 0,
  },
};

export const NotificationView = (props: Props) => {
  const { children, hidden, dismiss, previousOnline, online } = props;

  const theme = useTheme<BaseThemePropertiesTV>();
  const storedLocalizations = useNetworkStatusLocalizations();

  const [open, setOpen] = React.useState<boolean | null>(null);

  const timeout = React.useRef<NodeJS.Timeout>();
  const wentOnline = !previousOnline && props.online;

  const onClose = () => {
    setOpen(false);
    dismiss();
  };

  const closeNotification = () => {
    clearTimeout(timeout.current as NodeJS.Timeout);

    timeout.current = setTimeout(() => {
      setOpen(false);
    }, NOTIF_DURATION);
  };

  const openNotification = () => {
    if (!open && !hidden) {
      setOpen(true);
    }
  };

  const handleNotificationChange = () => {
    if (open !== null) {
      openNotification();
    }

    closeNotification();
  };

  React.useEffect(() => {
    handleNotificationChange();
  }, [hidden, online]);

  const showOnlineMsg = wentOnline || online;

  const MSG = showOnlineMsg
    ? (theme?.online_notification_title ??
      storedLocalizations?.online_notification_title)
    : (theme?.offline_notification_title ??
      storedLocalizations?.offline_notification_title);

  const EXTRA_MSG = showOnlineMsg
    ? (theme?.online_notification_subtitle ??
      storedLocalizations?.online_notification_subtitle)
    : (theme?.offline_notification_subtitle ??
      storedLocalizations?.offline_notification_subtitle);

  return (
    <div onClick={onClose}>
      {children}
      {open ? (
        <div style={styles.body}>
          <div style={styles.title}>
            <h2>{MSG}</h2>
          </div>

          <h4 style={styles.subtitle}>{EXTRA_MSG}</h4>
        </div>
      ) : null}
    </div>
  );
};