import React, { useRef } from "react";
import { View, ImageBackground, Animated, 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;
    backgroundColor: string;
    backgroundImage: string;
    isRTL: boolean;
  };
  children: React.ReactNode;
  style: ViewStyle;
};

export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
  const fadeAnimation = useRef(new Animated.Value(0)).current;

  const fadeAudioPlayerIn = () => {
    Animated.timing(fadeAnimation, {
      toValue: 1,
      duration: 3000,
      useNativeDriver: true,
    }).start();
  };

  const { isRTL, backgroundColor, backgroundImage } = config;

  const backgroundImg = { uri: backgroundImage };

  const backgroundColorStyle = backgroundImage
    ? "transparent"
    : backgroundColor;

  const mainContainerStyles = platformSelect({
    tvos: {
      width: 1920,
      height: 1080,
      alignItems: "center",
      justifyContent: "center",
      flexDirection: directionStyles(isRTL).flexDirection,
      backgroundColor: backgroundColorStyle,
    },
    android_tv: {
      position: "absolute",
      width: 1920,
      height: 1080,
      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",
      width: "100vw",
      flex: 1,
      alignItems: "center",
      justifyContent: "center",
      flexDirection: directionStyles(isRTL).flexDirection,
      backgroundColor: backgroundColorStyle,
    },
    lg_tv: {
      position: "absolute",
      margin: "auto",
      display: "flex",
      flexWrap: "wrap",
      width: "100vw",
      flex: 1,
      alignItems: "center",
      justifyContent: "center",
      flexDirection: directionStyles(isRTL).flexDirection,
      backgroundColor: backgroundColorStyle,
    },
  });

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

  const textContainerStyles = platformSelect({
    tvos: {
      width: 600,
      height: 362,
      marginHorizontal: 24,
      alignItems: directionStyles(isRTL).justifyContent,
    },
    android_tv: {
      width: 600,
      height: 362,
      marginHorizontal: 24,
      alignItems: directionStyles(isRTL).justifyContent,
    },
    web: {
      margin: 10,
      height: "100vh",
      alignItems: directionStyles(isRTL).justifyContent,
      justifyContent: "center",
    },
  });

  const audioPlayerLayoutTV = backgroundImg?.uri ? (
    <ImageBackground
      source={backgroundImg}
      style={backgroundImgStyles}
      resizeMode="cover"
    >
      <View style={mainContainerStyles}>
        {!!artwork && <Artwork srcImage={artwork} config={config} />}
        <View style={textContainerStyles}>{children}</View>
      </View>
    </ImageBackground>
  ) : (
    <View style={mainContainerStyles}>
      {!!artwork && <Artwork srcImage={artwork} config={config} />}
      <View style={textContainerStyles}>{children}</View>
    </View>
  );

  const audioPlayerLayoutMobile = () => {
    fadeAudioPlayerIn();

    return (
      <View style={mainContainerStyles} pointerEvents="none">
        <Animated.View
          style={[
            mainContainerStyles,
            {
              opacity: fadeAnimation,
            },
          ]}
        >
          <ImageBackground
            source={backgroundImg}
            style={backgroundImgStyles}
            resizeMode="cover"
          >
            <View style={mainContainerStyles} />
          </ImageBackground>
        </Animated.View>
      </View>
    );
  };

  const audioPlayerLayout = platformSelect({
    tvos: audioPlayerLayoutTV,
    android_tv: audioPlayerLayoutTV,
    web: audioPlayerLayoutTV,
    samsung_tv: audioPlayerLayoutTV,
    lg_tv: audioPlayerLayoutTV,
    ios: audioPlayerLayoutMobile(),
    android: audioPlayerLayoutMobile(),
  });

  return audioPlayerLayout;
}