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

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

import { AudioPlayerTVLayout } from "./Layout";

import { Channel } from "./Channel";
import { Title } from "./Title";
import { Summary } from "./Summary";
import { Runtime } from "./Runtime";
import { getPropertyFromEntryOrConfig } from "./helpers";

import { Props } from "../types";

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

  const artwork = useArtworkImage(audio_item);

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

  const config = useMemo(() => {
    // Checking if we are receiving 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 channelIcon = getProp("audio_player_channel_icon");
    const rtlFlag = getProp("audio_player_rtl");

    const backgroundImageOverlay = getProp(
      "audio_player_background_image_overlay"
    );

    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");

    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,
      channelIcon,
      artworkBorderRadius,
      backgroundImageOverlay,
    };
  }, [getProp]);

  return (
    <AudioPlayerTVLayout 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} />
    </AudioPlayerTVLayout>
  );
}