import React from "react";
import { shallow } from "enzyme";
import ScoreBoard, {
  PlayerScoreTile,
} from "../components/screens/GameSummary/ScoreBoard/ScoreBoard";

jest.mock("../domain/flagLookup");

import flagLookup from "../domain/flagLookup";

describe("ScoreBoard", () => {
  it("renders with no players", () => {
    const rendered = shallow(<ScoreBoard players={[]} />);
    expect(rendered).toMatchSnapshot();
  });
  it("renders with player tiles sorted by score", () => {
    const rendered = shallow(
      <ScoreBoard
        players={[
          { currentRound: null, totalScore: 5000, name: "Name1" },
          { currentRound: null, totalScore: 10000, name: "Name2" },
          { currentRound: null, totalScore: 1000, name: "Name3" },
          { currentRound: null, totalScore: 5000, name: "Name4" },
        ]}
      />
    );
    expect(rendered).toMatchSnapshot();
  });
  it("does not add tiles for unfinished players", () => {
    const rendered = shallow(
      <ScoreBoard
        players={[
          { currentRound: null, totalScore: 5000, name: "Name1" },
          { currentRound: null, totalScore: 10000, name: "Name2" },
          { currentRound: "1", totalScore: 1000, name: "Name3" },
        ]}
      />
    );
    expect(rendered).toMatchSnapshot();
  });
  describe("PlayerScoreTile", () => {
    it("renders with no guesses", () => {
      const rendered = shallow(
        <PlayerScoreTile name="Name" guesses={[]} totalScore={0} />
      );
      expect(rendered).toMatchSnapshot();
    });
    it("renders overly long name", () => {
      const rendered = shallow(
        <PlayerScoreTile name={"Long".repeat(10)} guesses={[]} totalScore={0} />
      );
      expect(rendered).toMatchSnapshot();
    });
    it("renders with guesses", () => {
      flagLookup.mockReturnValue("flag");
      const rendered = shallow(
        <PlayerScoreTile
          name="Name"
          guesses={{
            1: { score: 50, country: "test-country" },
            2: { score: 150, country: "test-country" },
            3: { score: 20, country: "test-country" },
          }}
          totalScore={220}
          winner
        />
      );
      expect(rendered).toMatchSnapshot();
      expect(flagLookup).toMatchSnapshot();
    });
    it("sorts guesses by round number", () => {
      flagLookup.mockReturnValue("flag");
      const rendered = shallow(
        <PlayerScoreTile
          name="Name"
          guesses={{
            3: { score: 20, country: "test-country" },
            1: { score: 50, country: "test-country" },
            2: { score: 150, country: "test-country" },
          }}
          totalScore={220}
          winner
        />
      );
      expect(rendered).toMatchSnapshot();
      expect(flagLookup).toMatchSnapshot();
    });
    it("renders with missing guess", () => {
      flagLookup.mockReturnValue("flag");
      const rendered = shallow(
        <PlayerScoreTile
          name="Name"
          guesses={{
            1: { score: 50, country: "test-country" },
            2: {},
            3: { score: 20, country: "test-country" },
          }}
          totalScore={220}
          winner
        />
      );
      expect(rendered).toMatchSnapshot();
      expect(flagLookup).toMatchSnapshot();
    });
    it("renders with timeout", () => {
      flagLookup.mockReturnValue("flag");
      const rendered = shallow(
        <PlayerScoreTile
          name="Name"
          guesses={{
            1: { score: 50, country: "test-country" },
            2: { score: null, country: null },
            3: { score: 20, country: "test-country" },
          }}
          totalScore={220}
          winner
        />
      );
      expect(rendered).toMatchSnapshot();
      expect(flagLookup).toMatchSnapshot();
    });
  });
});
