import * as R from "ramda";
import * as React from "react";
import { View } from "react-native";

import {
  isTV,
  platformSelect,
} from "@applicaster/zapp-react-native-utils/reactUtils";
import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";

const backgroundColorPath = platformSelect({
  ios: ["iphone", "background_color", "color"],
  tvos: ["universal", "background_color", "color"],
  samsung_tv: ["tv", "background_color", "color"],
  lg_tv: ["tv", "background_color", "color"],
  web: ["tv", "background_color", "color"],
  android: ["smartphone", "app_background_color", "color"],
  android_tv: ["android_tv", "app_background_color", "color"],
});

type Props = {
  styles: Styles;
  children: React.ReactChild;
};

export function AppContainer({ styles, children }: Props) {
  const theme = useTheme() as BaseThemePropertiesTV;
  const { app_background_color } = theme;

  const backgroundColor = R.compose(
    fixColorHexCode,
    R.path(backgroundColorPath)
  )(styles);

  const containerStyles = {
    flex: 1,
    backgroundColor: isTV() ? backgroundColor : app_background_color,
  };

  return <View style={containerStyles}>{children}</View>;
}