import * as React from "react";
import * as R from "ramda";
import { Text, TextStyle, View, ViewStyle } from "react-native";

import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
import { getAppStylesColor } from "@applicaster/zapp-react-native-utils/stylesUtils";
import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";

type Props = {
  styles: {};
  error: {};
  remoteConfigurations: { localizations: {} };
};

const defaultAppStyles = {
  loading_error_label: {
    color: "#aaa",
  },
};

const textStyles = (appStyles = defaultAppStyles): TextStyle => ({
  color: getAppStylesColor("loading_error_label", appStyles),
  fontSize: 36,
  textAlign: "center",
});

const errorStyles = ({ backgroundColor }): ViewStyle => ({
  flex: 1,
  width: "100%",
  height: "100%",
  justifyContent: "center",
  alignItems: "center",
  position: "absolute",
  zIndex: 100,
  backgroundColor,
});

export function ErrorDisplayComponent({
  styles,
  remoteConfigurations: { localizations },
}: Props) {
  const theme = useTheme();
  const backgroundColor = theme?.app_background_color;

  const { stream_error_message = "Cannot play stream" } = getLocalizations({
    localizations,
  });

  const appStyles = R.prop(styleKeys.style_namespace, styles);

  return (
    <View style={errorStyles({ backgroundColor })}>
      <Text style={textStyles(appStyles)}>{stream_error_message}</Text>
    </View>
  );
}