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

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

const DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE = 4500; // ms

const styles: Record<any, React.CSSProperties> = {
  body: {
    position: "absolute",
    top: 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",
    paddingTop: 15,
  },
  title: {
    fontSize: 28,
    margin: 0,
    padding: 0,
  },
  subtitle: {
    fontSize: 20,
    margin: 0,
    padding: 0,
  },
};

let timer: NodeJS.Timeout;

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

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

  const [shown, setShown] = React.useState<boolean>(false);

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

  React.useEffect(() => {
    if (previousOnline && online) {
      return;
    }

    if (!previousOnline && !online) {
      return;
    }

    if (previousOnline && !online) {
      // went to offline
      clearTimeout(timer);
      setShown(true);
    }

    if (!previousOnline && online) {
      // back to online
      setShown(true);

      timer = setTimeout(() => {
        setShown(false);
      }, DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE);
    }
  }, [online, previousOnline]);

  const title = online
    ? (theme?.online_notification_title ??
      storedLocalizations?.online_notification_title)
    : (theme?.offline_notification_title ??
      storedLocalizations?.offline_notification_title);

  const subtitle = online
    ? (theme?.online_notification_subtitle ??
      storedLocalizations?.online_notification_subtitle)
    : (theme?.offline_notification_subtitle ??
      storedLocalizations?.offline_notification_subtitle);

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

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