import React from "react";
import { shallow } from "enzyme";
import {
  CountryDropdown,
  Dropdown,
  DropdownGroup,
  Item,
} from "../components/util/GameCreationForm/Dropdown";

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

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

describe("DropdownGroup", () => {
  it("renders with no dropdowns", () => {
    const rendered = shallow(<DropdownGroup />);
    expect(rendered).toMatchSnapshot();
  });

  it("renders with dropdowns", () => {
    const rendered = shallow(
      <DropdownGroup>
        <Dropdown open="dd1" />
        <Dropdown open="dd2" />
        <Dropdown open="dd3" />
      </DropdownGroup>
    );
    expect(rendered).toMatchSnapshot();
  });

  it("can have a dropdown opened", () => {
    const rendered = shallow(
      <DropdownGroup>
        <Dropdown open="dd1" />
        <Dropdown open="dd2" />
        <Dropdown open="dd3" />
      </DropdownGroup>
    );
    rendered.find("Dropdown").at(1).prop("onClick")();
    expect(rendered).toMatchSnapshot();
  });

  it("can have a dropdown closed after opening", () => {
    const rendered = shallow(
      <DropdownGroup>
        <Dropdown open="dd1" />
        <Dropdown open="dd2" />
        <Dropdown open="dd3" />
      </DropdownGroup>
    );
    rendered.find("Dropdown").at(1).prop("onClick")();
    rendered.find("Dropdown").at(1).prop("onClick")();
    expect(rendered).toMatchSnapshot();
  });

  it("selecting a dropdown re-closes it", () => {
    const onSelect = jest.fn();
    const rendered = shallow(
      <DropdownGroup>
        <Dropdown open="dd1" />
        <Dropdown open="dd2" onSelect={onSelect} />
        <Dropdown open="dd3" />
      </DropdownGroup>
    );
    rendered.find("Dropdown").at(1).prop("onClick")();
    rendered.find("Dropdown").at(1).prop("onSelect")("test");
    expect(rendered).toMatchSnapshot();
    expect(onSelect).toHaveBeenCalledWith("test");
  });
});

describe("Dropdown", () => {
  it("renders closed", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(<Dropdown {...{ onSelect, onClick }} />);
    expect(rendered).toMatchSnapshot();
  });

  it("renders with no items", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(<Dropdown open {...{ onSelect, onClick }} />);
    expect(rendered).toMatchSnapshot();
  });

  it("renders with items", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <Dropdown open {...{ onSelect, onClick }}>
        <Item value="test1" />
        <Item value="test2" />
      </Dropdown>
    );
    expect(rendered).toMatchSnapshot();
  });

  it("can be clicked", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <Dropdown {...{ onSelect, onClick }}>
        <Item value="test1" />
        <Item value="test2" />
      </Dropdown>
    );
    rendered.find("div.button").first().simulate("click");
    expect(onClick).toHaveBeenCalled();
  });

  it("can be selected with Enter", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <Dropdown {...{ onSelect, onClick }}>
        <Item value="test1" />
        <Item value="test2" />
      </Dropdown>
    );
    rendered.find("div.button").first().simulate("keydown", { key: "Enter" });
    expect(onClick).toHaveBeenCalled();
  });

  it("responds to item selection", () => {
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <Dropdown open {...{ onSelect, onClick }}>
        <Item value="test1" />
        <Item value="test2" />
      </Dropdown>
    );
    rendered.find("Item").first().prop("onSelect")("value", "display");
    expect(onSelect).toHaveBeenCalledWith("value");
    expect(rendered).toMatchSnapshot();
  });
});

describe("CountryDropdown", () => {
  it("renders closed", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown {...{ countryLookup, selected, onSelect, onClick }} />
    );
    expect(rendered).toMatchSnapshot();
  });

  it("renders", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    expect(rendered).toMatchSnapshot();
  });

  it("renders with countries", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    expect(rendered).toMatchSnapshot();
  });

  it("can be clicked", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("div.button").first().simulate("click");
    expect(onClick).toHaveBeenCalled();
  });

  it("can be selected with Enter", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("div.button").first().simulate("keydown", { key: "Enter" });
    expect(onClick).toHaveBeenCalled();
  });

  it("can have a country selected", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("div.item").first().simulate("click");
    expect(onSelect).toHaveBeenCalledWith("a21");
  });

  it("can have a country selected with Enter", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("div.item").at(1).simulate("keydown", { key: "Enter" });
    expect(onSelect).toHaveBeenCalledWith("a22");
  });

  it("can have world selected", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("div.item").last().simulate("click");
    expect(onSelect).toHaveBeenCalledWith(null);
  });

  it("can have world selected with Enter", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("div.item").last().simulate("keydown", { key: "Enter" });
    expect(onSelect).toHaveBeenCalledWith(null);
  });

  it("selects country based on searchbox", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered
      .find("input")
      .first()
      .simulate("change", { target: { value: "changed" } });
    expect(countryLookup).toHaveBeenCalledWith("changed");
  });

  it("can have first option selected with Enter", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("input").first().simulate("keydown", { key: "Enter" });
    expect(onSelect).toHaveBeenCalledWith("a21");
  });

  it("can have previously selected option selected with Escape", () => {
    flagLookup.mockReturnValue("flag");
    const countryLookup = jest.fn();
    countryLookup.mockReturnValue([
      { item: { country: "c1", alpha2: "a21" } },
      { item: { country: "c2", alpha2: "a22" } },
      { item: { country: "c3", alpha2: "a23" } },
    ]);
    const selected = "selected";
    const onSelect = jest.fn();
    const onClick = jest.fn();
    const rendered = shallow(
      <CountryDropdown
        open
        {...{ countryLookup, selected, onSelect, onClick }}
      />
    );
    rendered.find("input").first().simulate("keydown", { key: "Escape" });
    expect(onSelect).toHaveBeenCalledWith("selected");
  });
});

describe("Item", () => {
  it("renders with no text", () => {
    const onSelect = jest.fn();
    const display = "display";
    const value = "value";
    const rendered = shallow(<Item {...{ onSelect, display, value }} />);
    expect(rendered).toMatchSnapshot();
  });

  it("responds to click", () => {
    const onSelect = jest.fn();
    const display = "display";
    const value = "value";
    const rendered = shallow(<Item {...{ onSelect, display, value }} />);
    rendered.simulate("click");
    expect(onSelect).toHaveBeenCalledWith(value, display);
  });

  it("responds to enter", () => {
    const onSelect = jest.fn();
    const display = "display";
    const value = "value";
    const rendered = shallow(<Item {...{ onSelect, display, value }} />);
    rendered.simulate("keydown", { key: "Enter" });
    expect(onSelect).toHaveBeenCalledWith(value, display);
  });
});
