import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render, fireEvent } from "@testing-library/react";
import Dropdown from "../dropdown";
import DropdownItem from "../dropdown-item";

test("should open and close dropdown", () => {
  const { queryByTestId } = render(
    <Dropdown
      btnVariant="link"
      btnSize="sm"
      id="test-nav-id"
      header={<span data-testid="dropdown-handler">[Icon]</span>}
      position="left"
    >
      <div data-testid="dropdown-content">content</div>
    </Dropdown>
  );

  expect(queryByTestId("dropdown-handler")).not.toBeNull();

  expect(queryByTestId("test-nav-id-dropdown-body")).toBeNull();

  fireEvent.click(queryByTestId("dropdown-handler"));

  expect(queryByTestId("test-nav-id-dropdown-body")).not.toBeNull();
  expect(queryByTestId("test-nav-id-dropdown-body")).toHaveClass("show");

  fireEvent.click(document.body);

  expect(queryByTestId("test-nav-id-dropdown-body")).toBeNull();
});

test("should show dropdown with custom weight/height attributes", () => {
  const { queryByTestId } = render(
    <Dropdown minHeight={100} maxHeight={100} minWidth={100} maxWidth="100%" header="Dropdown">
      <div>dropdown item</div>
    </Dropdown>
  );
  expect(queryByTestId("honeyui-dropdown")).toHaveClass("btn-primary");

  fireEvent.click(queryByTestId("honeyui-dropdown"));

  // styles
  expect(queryByTestId("honeyui-dropdown-dropdown-body").style["min-height"]).toEqual("100px");
  expect(queryByTestId("honeyui-dropdown-dropdown-body").style["min-width"]).toEqual("100px");
  expect(queryByTestId("honeyui-dropdown-dropdown-body").style["max-height"]).toEqual("100px");
  expect(queryByTestId("honeyui-dropdown-dropdown-body").style["max-width"]).toEqual("100%");
});

test("should show dropdown with default attributes", () => {
  const { queryByTestId } = render(
    <Dropdown header="Dropdown">
      <div>dropdown item</div>
    </Dropdown>
  );
  expect(queryByTestId("honeyui-dropdown")).toHaveClass("btn-primary");

  fireEvent.click(queryByTestId("honeyui-dropdown"));

  // styles
  expect(queryByTestId("honeyui-dropdown-dropdown-body").style["min-height"]).toEqual("0");
  expect(queryByTestId("honeyui-dropdown-dropdown-body").style["min-width"]).toEqual("0");
  expect(queryByTestId("honeyui-dropdown-dropdown-body").style["max-height"]).toEqual("284px");
  expect(queryByTestId("honeyui-dropdown-dropdown-body").style["max-width"]).toEqual("300px");
});

test("should show arrow on dropdown", () => {
  const { queryByTestId } = render(
    <Dropdown btnSize="sm" id="test-nav-id" header="Dropdown" arrow={true}>
      <div data-testid="dropdown-content">content</div>
    </Dropdown>
  );

  expect(queryByTestId("test-nav-id")).toHaveClass("dropdown-toggle");
});

test("should support keyboard navigation", () => {
  const { queryByTestId } = render(
    <Dropdown header="Dropdown" data-testid="dropdown">
      <DropdownItem data-testid="dropdown-item1">Item 1</DropdownItem>
      <DropdownItem data-testid="dropdown-item2">Item 2</DropdownItem>
      <DropdownItem data-testid="dropdown-item3">Item 3</DropdownItem>
    </Dropdown>
  );

  fireEvent.click(queryByTestId("dropdown"));

  fireEvent.keyDown(document.activeElement, { key: "ArrowDown", code: 40, charCode: 40 });
  expect(queryByTestId("dropdown-item1")).toHaveFocus();

  fireEvent.keyDown(document.activeElement, { key: "ArrowDown", code: 40, charCode: 40 });
  expect(queryByTestId("dropdown-item2")).toHaveFocus();

  fireEvent.keyDown(document.activeElement, { key: "ArrowDown", code: 40, charCode: 40 });
  expect(queryByTestId("dropdown-item3")).toHaveFocus();

  fireEvent.keyDown(document.activeElement, { key: "ArrowDown", code: 40, charCode: 40 });
  expect(queryByTestId("dropdown-item3")).toHaveFocus();

  fireEvent.keyDown(document.activeElement, { key: "ArrowUp", code: 38, charCode: 38 });
  expect(queryByTestId("dropdown-item2")).toHaveFocus();

  fireEvent.keyDown(document.activeElement, { key: "ArrowUp", code: 38, charCode: 38 });
  expect(queryByTestId("dropdown-item1")).toHaveFocus();

  fireEvent.keyDown(document.activeElement, { key: "ArrowUp", code: 38, charCode: 38 });
  expect(queryByTestId("dropdown-item1")).toHaveFocus();
});