import React, { useCallback, useMemo } from "react";

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

import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";

import { AudioPlayerLayout } from "./AudioPlayerLayout";
import { Channel } from "./Channel";
import { Title } from "./Title";
import { Summary } from "./Summary";
import { Runtime } from "./Runtime";
import { getPropertyFromEntryOrConfig } from "./helpers";
import { ViewStyle } from "react-native";

type Props = {
  audio_item: ZappEntry & {
    extensions?: {
      audio_player_artwork_aspect_ratio?: string;
      audio_player_background_image?: string;
      audio_player_background_color?: string;
      audio_player_channel_icon?: string;
      audio_player_title_color?: string;
      audio_player_summary_color?: string;
      audio_player_rtl?: boolean;
      magic_background?: boolean;
      audio_player_background_image_query?: string;
      audio_player_background_image_default_color?: string;
      start_time?: string;
      end_time?: string;
    };
  };
  plugin_configuration: {
    audio_player_background_color?: string;
    audio_player_title_color?: string;
    audio_player_summary_color?: string;
    audio_player_rtl?: string;
    magic_background?: string;
    audio_player_background_image_query?: string;
    audio_player_background_image_default_color?: string;
    audio_player_background_image?: string;
    audio_player_artwork_aspect_ratio?: string;
    lg_tv_audio_player_title_font_family?: string;
    lg_tv_audio_player_title_font_size?: number;
    lg_tv_audio_player_summary_font_family?: string;
    lg_tv_audio_player_summary_font_size?: number;
    samsung_tv_audio_player_title_font_family?: string;
    samsung_tv_audio_player_title_font_size?: number;
    samsung_tv_audio_player_summary_font_family?: string;
    samsung_tv_audio_player_summary_font_size?: number;
    tv_os_audio_player_title_font_family?: string;
    tv_os_audio_player_title_font_size?: number;
    tv_os_audio_player_summary_font_family?: string;
    tv_os_audio_player_summary_font_size?: number;
  };
  style?: ViewStyle;
};

export function AudioPlayer(props: Props) {
  const { audio_item, plugin_configuration, style } = props;
  const { extensions, title, summary } = audio_item;

  const getProp = useCallback(
    getPropertyFromEntryOrConfig({
      entry: audio_item,
      plugin_configuration,
    }),
    [audio_item, plugin_configuration]
  );

  const config = useMemo(() => {
    // Checking if we are recieving items from the DSP
    const titleColor = getProp("audio_player_title_color");
    const summaryColor = getProp("audio_player_summary_color");
    const backgroundColor = getProp("audio_player_background_color");
    const backgroundImage = getProp("audio_player_background_image");
    const artworkAspectRatio = getProp("audio_player_artwork_aspect_ratio");
    const channelIcon = getProp("audio_player_channel_icon");
    const rtlFlag = getProp("audio_player_rtl");
    const magicBackground = getProp("magic_background");

    const audioPlayerBackgroundImageQuery = getProp(
      "audio_player_background_image_query"
    );

    const audioPlayerBackgroundImageDefaultColor = getProp(
      "audio_player_background_image_default_color"
    );

    const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;

    const titleFontFamily = getProp(
      platformSelect({
        lg_tv: "lg_tv_audio_player_title_font_family",
        samsung_tv: "samsung_tv_audio_player_title_font_family",
        tvos: "tv_os_audio_player_title_font_family",
        android_tv: "android_tv_audio_player_title_font_family",
        amazon: "android_tv_audio_player_title_font_family",
      })
    );

    const titleFontSize = getProp(
      platformSelect({
        lg_tv: "lg_tv_audio_player_title_font_size",
        samsung_tv: "samsung_tv_audio_player_title_font_size",
        tvos: "tv_os_audio_player_title_font_size",
        android_tv: "android_tv_audio_player_title_font_size",
        amazon: "android_tv_audio_player_title_font_size",
      })
    );

    const summaryFontFamily = getProp(
      platformSelect({
        lg_tv: "lg_tv_audio_player_summary_font_family",
        samsung_tv: "samsung_tv_audio_player_summary_font_family",
        tvos: "tv_os_audio_player_summary_font_family",
        android_tv: "android_tv_audio_player_summary_font_family",
        amazon: "android_tv_audio_player_summary_font_family",
      })
    );

    const summaryFontSize = getProp(
      platformSelect({
        lg_tv: "lg_tv_audio_player_summary_font_size",
        samsung_tv: "samsung_tv_audio_player_summary_font_size",
        tvos: "tv_os_audio_player_summary_font_size",
        android_tv: "android_tv_audio_player_summary_font_size",
        amazon: "android_tv_audio_player_summary_font_size",
      })
    );

    const runTimeFontFamily = getProp(
      platformSelect({
        lg_tv: "lg_tv_audio_player_run_time_font_family",
        samsung_tv: "samsung_tv_audio_player_run_time_font_family",
        tvos: "tv_os_audio_player_run_time_font_family",
        android_tv: "android_tv_audio_player_run_time_font_family",
        amazon: "android_tv_audio_player_run_time_font_family",
      })
    );

    const runTimeFontSize = getProp(
      platformSelect({
        lg_tv: "lg_tv_audio_player_run_time_font_size",
        samsung_tv: "samsung_tv_audio_player_run_time_font_size",
        tvos: "tv_os_audio_player_run_time_font_size",
        android_tv: "android_tv_audio_player_run_time_font_size",
        amazon: "android_tv_audio_player_run_time_font_size",
      })
    );

    return {
      titleColor,
      summaryColor,
      backgroundColor,
      backgroundImage,
      isRTL,
      titleFontFamily,
      titleFontSize,
      summaryFontFamily,
      summaryFontSize,
      runTimeFontFamily,
      runTimeFontSize,
      artworkAspectRatio,
      channelIcon,
      magicBackground,
      audioPlayerBackgroundImageQuery,
      audioPlayerBackgroundImageDefaultColor,
    };
  }, [getProp]);

  const artwork = imageSrcFromMediaItem(audio_item, [
    config?.artworkAspectRatio,
  ]);

  return (
    <AudioPlayerLayout artwork={artwork} config={config} style={style || {}}>
      <Channel srcImage={config?.channelIcon} config={config} />
      <Title title={title} config={config} />
      <Summary summary={summary} config={config} />
      <Runtime {...extensions} config={config} />
    </AudioPlayerLayout>
  );
}