import React, { useMemo } from "react";

import {
  isWeb,
  platformSelect,
} from "@applicaster/zapp-react-native-utils/reactUtils";
import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";

import { usePlugins } from "@applicaster/zapp-react-native-redux";
import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils";
import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";

import { useTheme } from "@applicaster/zapp-react-native-utils/theme";

const OFFLINE_EXPERIENCE = "offline-experience";

const NETWORK_STATUS_LOCALIZATIONS_KEY = "network_status_localizations";

const THEME_STORAGE_NAMESPACE = "quick-brick-theme";

export function useNetworkStatusLocalizations() {
  const [storedLocalizations, setStoredLocalizations] = React.useState<Record<
    string,
    string
  > | null>(null);

  React.useEffect(() => {
    async function loadStoredLocalizations() {
      try {
        const stored = await sessionStorage.getItem(
          NETWORK_STATUS_LOCALIZATIONS_KEY,
          THEME_STORAGE_NAMESPACE
        );

        if (stored) {
          setStoredLocalizations(stored);
        }
      } catch (error) {
        console.error("Error loading network status localizations", error);
      }
    }

    loadStoredLocalizations();
  }, []);

  return storedLocalizations;
}

export function useOfflineHandlerProps(online: boolean) {
  const theme = useTheme<BaseThemePropertiesTV>();
  const storedLocalizations = useNetworkStatusLocalizations();
  const plugins = usePlugins();
  const offlinePlugin = findPluginByIdentifier(OFFLINE_EXPERIENCE, plugins);
  const { useOfflineExperienceConfiguration } = offlinePlugin?.module ?? {};

  const {
    configurationFields,
    localizations,
  }: {
    configurationFields: OfflineExperiencePluginConfiguration;
    localizations: OfflineExperienceLocalizations;
  } = useOfflineExperienceConfiguration?.() ?? {};

  let title, subtitle, style;

  if (isWeb()) {
    title = online
      ? (theme?.online_notification_title ??
        storedLocalizations?.online_notification_title)
      : (theme?.offline_notification_title ??
        storedLocalizations?.offline_notification_title);

    subtitle = online
      ? (theme?.online_notification_subtitle ??
        storedLocalizations?.online_notification_subtitle)
      : (theme?.offline_notification_subtitle ??
        storedLocalizations?.offline_notification_subtitle);
  } else {
    title = textTransform(
      configurationFields.offline_toast_message_text_transform,
      online
        ? localizations.online_toast_message
        : localizations.offline_toast_message
    );

    style = {
      color: online
        ? configurationFields.offline_toast_message_online_font_color
        : configurationFields.offline_toast_message_font_color,
      backgroundColor: online
        ? configurationFields.offline_toast_online_background_color
        : configurationFields.offline_toast_offline_background_color,
      fontFamily: platformSelect({
        ios: configurationFields.offline_toast_message_ios_font_family,
        android: configurationFields.offline_toast_message_android_font_family,
      }),
      fontSize: configurationFields.offline_toast_message_font_size,
      lineHeight: configurationFields.offline_toast_message_line_height,
      letterSpacing: platformSelect({
        ios: configurationFields.offline_toast_message_letter_spacing_ios,
        android:
          configurationFields.offline_toast_message_letter_spacing_android,
      }),
    };
  }

  return useMemo(
    () => ({ message: title, extraMessage: subtitle, style }),
    [title, subtitle, style]
  );
}