import React from "react";
import { render } from "@testing-library/react-native";

import { AudioPlayerTV } from "..";

jest.mock("@applicaster/zapp-react-native-utils/audioPlayerUtils", () => ({
  useArtworkImage: jest.fn(() => "artwork_url"),
}));

let mockContent: {
  title: Option<string | number>;
  summary: Option<string | number>;
} = { title: null, summary: null };

// Read lazily inside the factory: `jest.mock` is hoisted above the `let`
// above, so capturing the value eagerly would freeze it at `undefined`.
jest.mock(
  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent",
  () => ({ usePlayerContent: () => mockContent })
);

const baseAudioItem = {
  title: "tittle",
  summary: "Summary",
  content: {
    src: "https://example.com",
  },
  media_group: [
    {
      type: "audio",
      media_item: [
        {
          type: "audio",
          src: "https://example.com",
          key: "base_code",
        },
      ],
    },
  ],
  extensions: {
    audio_player_artwork_aspect_ratio: "1:1",
    audio_player_background_image: "https://example.com",
    audio_player_background_color: "black",
    audio_player_channel_icon: "https://example.com",
    audio_player_title_color: "white",
    audio_player_summary_color: "white",
    audio_player_rtl: true,
    start_time: "10:10",
    end_time: "11:11",
    episode_name: "Episode Custom Title",
    episode_summary: "Episode Custom Summary",
  },
};

const basePluginConfiguration = {
  audio_player_background_color: "black",
  audio_player_title_color: "white",
  audio_player_summary_color: "white",
  audio_player_rtl: true,
  audio_player_background_image: "https://example.com",
  audio_player_artwork_aspect_ratio: "1:1",
};

function renderAudioPlayer(
  plugin_configuration,
  content: {
    title?: Option<string | number>;
    summary?: Option<string | number>;
  } = {}
) {
  mockContent = {
    title: content.title ?? null,
    summary: content.summary ?? null,
  };

  return render(
    <AudioPlayerTV
      audio_item={baseAudioItem}
      plugin_configuration={plugin_configuration}
      style={{}}
    />
  );
}

describe("<AudioPlayerTV /> player content", () => {
  it("renders the title and summary published by the player manager", () => {
    const { getByText } = renderAudioPlayer(basePluginConfiguration, {
      title: "Episode Custom Title",
      summary: "Episode Custom Summary",
    });

    expect(getByText("Episode Custom Title")).toBeTruthy();
    expect(getByText("Episode Custom Summary")).toBeTruthy();
  });

  it("renders nothing for title/summary when the player published neither", () => {
    const { queryByText } = renderAudioPlayer(basePluginConfiguration);

    expect(queryByText("tittle")).toBeNull();
    expect(queryByText("Summary")).toBeNull();
  });

  it("renders blank rather than crashing when no player is active", () => {
    // `usePlayerContent` returns `{ title: null, summary: null }` when there is
    // no player. A regression here means AudioPlayerTV crashes instead of
    // rendering blank.
    mockContent = { title: null, summary: null };

    const { queryByText } = render(
      <AudioPlayerTV
        audio_item={baseAudioItem}
        plugin_configuration={basePluginConfiguration}
        style={{}}
      />
    );

    expect(queryByText("tittle")).toBeNull();
    expect(queryByText("Summary")).toBeNull();
  });
});