import { connectToStore } from "@applicaster/zapp-react-native-redux";
import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
import * as R from "ramda";
import * as React from "react";
import { Text, TextStyle, View, ViewStyle } from "react-native";
import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";

import * as programStyles from "./styles";

type Props = {
  logo?: string;
  title: string;
  subtitle: string;
  isAudioContent: boolean;
  styles: {};
  plugin_configuration: {
    tv_os_video_player_title_font_family?: string;
    tv_os_video_player_title_font_size?: number;
    tv_os_video_player_summary_font_family?: string;
    tv_os_video_player_summary_font_size?: number;
  };
  videoStyle: {};
};

const defaultColor = "#EFEFEF";

function ProgramInfoComponent({
  logo,
  title = "",
  subtitle = "",
  isAudioContent,
  styles,
  plugin_configuration = {},
  videoStyle = {},
}: Props) {
  const platformKey = styleKeys.style_namespace;

  const colorTitle =
    R.path(["universal", "player_title_text", "color"], styles) ||
    R.path([platformKey, "player_title_text", "color"], styles);

  const colorSubtitle =
    R.path(["universal", "player_info_text", "color"], styles) ||
    R.path([platformKey, "player_info_text", "color"], styles);

  const colorOverlay =
    R.path(["universal", "player_overlay_color", "color"], styles) ||
    R.path([platformKey, "player_overlay_color", "color"], styles);

  const titleFontFamily = platformSelect({
    tvos: R.path(
      ["tv_os_video_player_title_font_family"],
      plugin_configuration
    ),
  });

  const titleFontSize = platformSelect({
    tvos: R.path(["tv_os_video_player_title_font_size"], plugin_configuration),
  });

  const summaryFontFamily = platformSelect({
    tvos: R.path(
      ["tv_os_video_player_summary_font_family"],
      plugin_configuration
    ),
  });

  const summaryFontSize = platformSelect({
    tvos: R.path(
      ["tv_os_video_player_summary_font_size"],
      plugin_configuration
    ),
  });

  const container = {
    ...videoStyle,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: fixColorHexCode(colorOverlay) || "transparent",
  } as ViewStyle;

  const titleText = {
    fontSize: titleFontSize ? Number(titleFontSize) : 48,
    fontWeight: "bold",
    fontStyle: "normal",
    fontFamily: titleFontFamily || null,
    color: fixColorHexCode(colorTitle) || defaultColor,
    textShadowColor: "rgba(0,0,0, 0.8)",
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 5,
  } as TextStyle;

  const subtitleText = {
    fontSize: summaryFontSize ? Number(summaryFontSize) : 24,
    fontFamily: summaryFontFamily || null,
    fontWeight: "normal",
    fontStyle: "normal",
    color: fixColorHexCode(colorSubtitle) || defaultColor,
  } as TextStyle;

  const transportInfo = (
    <>
      <View style={programStyles.programInfo.title}>
        <Text style={titleText}>{title}</Text>
      </View>
      <View style={programStyles.programInfo.subtitle}>
        <Text style={subtitleText}>{subtitle}</Text>
      </View>
    </>
  );

  return (
    <View style={container}>
      <View style={programStyles.programInfo.container}>
        {logo && (
          <Image
            source={{ uri: logo }}
            style={programStyles.programInfo.logo}
          />
        )}
        {!isAudioContent && transportInfo}
      </View>
    </View>
  );
}

export const ProgramInfo = R.compose(
  connectToStore(R.pick(["remoteConfigurations"]))
)(ProgramInfoComponent);