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

jest.mock("../domain/flagLookup");
jest.mock("../hooks/useGameInfo");
jest.mock("../hooks/useMap");
jest.mock("../hooks/useMapBounds");
jest.mock("../hooks/useMarkersFromGuesses");

import useMarkersFromGuesses from "../hooks/useMarkersFromGuesses";
import useMap from "../hooks/useMap";
import useMapBounds from "../hooks/useMapBounds";
import { useGameConfig } from "../hooks/useGameInfo";

describe("SummaryMap", () => {
  it("renders", () => {
    useMap.mockReturnValue("map");
    useGameConfig.mockReturnValue({ countryLock: "lock" });
    const rendered = shallow(
      <SummaryMap
        players="players"
        coords={{
          1: {},
          2: {},
          3: {},
        }}
      />
    );
    expect(rendered).toMatchSnapshot();
    expect(useMapBounds).toHaveBeenCalledWith("map", "lock");
    expect(useMarkersFromGuesses).toHaveBeenCalledWith(
      "map",
      "players",
      "0",
      null
    );
  });

  it("renders without selector if single round", () => {
    useMap.mockReturnValue("map");
    useGameConfig.mockReturnValue({ countryLock: "lock" });
    const rendered = shallow(
      <SummaryMap
        players="players"
        coords={{
          1: "round",
        }}
      />
    );
    expect(rendered).toMatchSnapshot();
    expect(useMapBounds).toHaveBeenCalledWith("map", "lock");
    expect(useMarkersFromGuesses).toHaveBeenCalledWith(
      "map",
      "players",
      "1",
      "round"
    );
  });

  describe("RoundSelect", () => {
    it("renders", () => {
      const onSelect = jest.fn();
      const rendered = shallow(
        <RoundSelect
          rounds={3}
          coords={{
            1: { country: "country1" },
            2: { country: "country2" },
            3: { country: "country3" },
          }}
          onSelect={onSelect}
        />
      );
      expect(rendered).toMatchSnapshot();
    });

    it("can be selected", () => {
      const onSelect = jest.fn();
      const rendered = shallow(
        <RoundSelect
          rounds={3}
          coords={{
            1: { country: "country1" },
            2: { country: "country2" },
            3: { country: "country3" },
          }}
          selected
          onSelect={onSelect}
        />
      );
      expect(rendered).toMatchSnapshot();
    });

    it("calls onSelect when clicked", () => {
      const onSelect = jest.fn();
      const rendered = shallow(
        <RoundSelect
          rounds={3}
          coords={{
            1: { country: "country1" },
            2: { country: "country2" },
            3: { country: "country3" },
          }}
          onSelect={onSelect}
        />
      );
      rendered.find("div.tab").first().simulate("click");
      expect(onSelect).toHaveBeenCalledWith("1");
    });

    it("calls onSelect when enter pressed", () => {
      const onSelect = jest.fn();
      const rendered = shallow(
        <RoundSelect
          rounds={3}
          coords={{
            1: { country: "country1" },
            2: { country: "country2" },
            3: { country: "country3" },
          }}
          onSelect={onSelect}
        />
      );
      rendered.find("div.tab").first().simulate("keydown", { key: "Enter" });
      expect(onSelect).toHaveBeenCalledWith("1");
    });

    it("calls onSelect with 0 when X clicked", () => {
      const onSelect = jest.fn();
      const rendered = shallow(
        <RoundSelect
          rounds={3}
          coords={{
            1: { country: "country1" },
            2: { country: "country2" },
            3: { country: "country3" },
          }}
          onSelect={onSelect}
        />
      );
      rendered
        .findWhere(x => x.text() === "X")
        .first()
        .simulate("click");
      expect(onSelect).toHaveBeenCalledWith("0");
    });

    it("calls onSelect with 0 when enter pressed on X", () => {
      const onSelect = jest.fn();
      const rendered = shallow(
        <RoundSelect
          rounds={3}
          coords={{
            1: { country: "country1" },
            2: { country: "country2" },
            3: { country: "country3" },
          }}
          onSelect={onSelect}
        />
      );
      rendered
        .findWhere(x => x.text() === "X")
        .first()
        .simulate("keydown", { key: "Enter" });
      expect(onSelect).toHaveBeenCalledWith("0");
    });
  });
});
