import * as React from "react";
import { ImageBackground, View, ViewStyle } from "react-native";

import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";

import { Artwork } from "./Artwork";
import { directionStyles } from "./helpers";

type Props = {
  artwork: string;
  config: {
    titleColor: string;
    summaryColor: string;
    backgroundImageOverlay?: string;
    backgroundColor: string;
    backgroundImage: Option<string>;
    isRTL: boolean;
    artworkBorderRadius: Option<number>;
  };
  children: React.ReactNode;
  style: ViewStyle;
};

const backgroundImgStyles = platformSelect({
  tvos: {
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  android_tv: {
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  web: {
    position: "absolute",
    margin: "auto",
    display: "flex",
    flexWrap: "wrap",
    width: "100%",
    height: "100%",
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

export function AudioPlayerTVLayout({
  artwork,
  config,
  children,
  style,
}: Props) {
  const { backgroundColor, backgroundImage, backgroundImageOverlay, isRTL } =
    config;

  const backgroundImageSource = { uri: backgroundImage };

  const backgroundColorStyle = backgroundImage
    ? "transparent"
    : backgroundColor;

  const textContainerStyles = platformSelect({
    tvos: {
      justifyContent: "center",
      alignItems: directionStyles(isRTL).justifyContent,
    },
    android_tv: {
      justifyContent: "center",
      alignItems: directionStyles(isRTL).justifyContent,
    },
    web: {
      justifyContent: "center",
      alignItems: directionStyles(isRTL).justifyContent,
    },
  });

  const mainContainerStyles = React.useMemo(
    () =>
      platformSelect({
        tvos: {
          width: "100%",
          height: "100%",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: directionStyles(isRTL).flexDirection,
          backgroundColor: backgroundColorStyle,
        },
        android_tv: {
          width: "100%",
          height: "100%",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: directionStyles(isRTL).flexDirection,
          backgroundColor: backgroundColorStyle,
        },
        web: {
          width: 1920,
          height: 1080,
          alignItems: "center",
          justifyContent: "center",
          flexDirection: directionStyles(isRTL).flexDirection,
          backgroundColor: backgroundColorStyle,
        },
        native: {
          backgroundColor: backgroundColorStyle,
          overflow: "hidden",
          ...style,
        },
        samsung_tv: {
          position: "absolute",
          margin: "auto",
          display: "flex",
          flexWrap: "wrap",
          height: "100vh",
          width: "100vw",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: directionStyles(isRTL).flexDirection,
          backgroundColor: backgroundColorStyle,
        },
        lg_tv: {
          position: "absolute",
          margin: "auto",
          display: "flex",
          flexWrap: "wrap",
          height: "100vh",
          width: "100vw",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: directionStyles(isRTL).flexDirection,
          backgroundColor: backgroundColorStyle,
        },
      }),
    [backgroundColorStyle, isRTL, style]
  );

  const backgroundOverlayStyles = React.useMemo(
    () => ({
      backgroundColor: backgroundImageOverlay,
    }),
    [backgroundImageOverlay]
  );

  if (backgroundImage) {
    return (
      <ImageBackground
        source={backgroundImageSource}
        style={backgroundImgStyles}
        resizeMode="cover"
      >
        <View style={[mainContainerStyles, backgroundOverlayStyles]}>
          <Artwork srcImage={artwork} config={config} />
          <View style={textContainerStyles}>{children}</View>
        </View>
      </ImageBackground>
    );
  }

  return (
    <View style={mainContainerStyles}>
      <Artwork srcImage={artwork} config={config} />
      <View style={textContainerStyles}>{children}</View>
    </View>
  );
}