import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render, fireEvent } from "@testing-library/react";
import Icon from "../icon";

const iconMock = {
  id: "test-id",
  viewBox: "0 0 0 0"
};

test("shows icon with default parameters", () => {
  const { queryByTestId } = render(<Icon id={iconMock.id} viewBox={iconMock.viewBox} />);

  expect(queryByTestId("honeyui-icon-test-id")).not.toBeNull();
  expect(queryByTestId("honeyui-icon-test-id")).toHaveClass("honeyui-icon");
  expect(queryByTestId("honeyui-icon-test-id")).toHaveClass("honeyui-icon--test-id");
  expect(queryByTestId("honeyui-icon-test-id")).not.toHaveClass("text-primary");
  expect(queryByTestId("honeyui-icon-test-id").getAttribute("role")).toEqual("img");
  expect(queryByTestId("honeyui-icon-test-id-title")).toBeNull();
  fireEvent.click(queryByTestId("honeyui-icon-test-id"));
});

test("shows icon with different sizes", () => {
  const xs = render(<Icon id={iconMock.id} viewBox={iconMock.viewBox} size="xs" />);
  expect(xs.queryByTestId("honeyui-icon-test-id").getAttribute("width")).toEqual("12");
  xs.unmount();

  const sm = render(<Icon id={iconMock.id} viewBox={iconMock.viewBox} size="sm" />);
  expect(sm.queryByTestId("honeyui-icon-test-id").getAttribute("width")).toEqual("16");
  sm.unmount();

  const md = render(<Icon id={iconMock.id} viewBox={iconMock.viewBox} size="md" />);
  expect(md.queryByTestId("honeyui-icon-test-id").getAttribute("width")).toEqual("24");
  md.unmount();

  const lg = render(<Icon id={iconMock.id} viewBox={iconMock.viewBox} size="lg" />);
  expect(lg.queryByTestId("honeyui-icon-test-id").getAttribute("width")).toEqual("28");
  lg.unmount();

  const xl = render(<Icon id={iconMock.id} viewBox={iconMock.viewBox} size="xl" />);
  expect(xl.queryByTestId("honeyui-icon-test-id").getAttribute("width")).toEqual("32");
  xl.unmount();

  const xxl = render(<Icon id={iconMock.id} viewBox={iconMock.viewBox} size="xxl" />);
  expect(xxl.queryByTestId("honeyui-icon-test-id").getAttribute("width")).toEqual("64");
  xxl.unmount();

  const custom = render(
    <Icon id={iconMock.id} viewBox={iconMock.viewBox} width={14} height={24} />
  );
  expect(custom.queryByTestId("honeyui-icon-test-id").getAttribute("width")).toEqual("14");
  expect(custom.queryByTestId("honeyui-icon-test-id").getAttribute("height")).toEqual("24");
  custom.unmount();
});

test("shows icon with custom className", () => {
  const { queryByTestId } = render(
    <Icon id={iconMock.id} viewBox={iconMock.viewBox} className="custom-class-name" />
  );
  expect(queryByTestId("honeyui-icon-test-id")).toHaveClass("custom-class-name");
});

test("shows icon with color", () => {
  const { queryByTestId } = render(
    <Icon id={iconMock.id} viewBox={iconMock.viewBox} color="primary" />
  );
  expect(queryByTestId("honeyui-icon-test-id")).toHaveClass("text-primary");
});

test("shows icon with different data-testid", () => {
  const icon = render(
    <Icon data-testid="xxx" id={iconMock.id} viewBox={iconMock.viewBox} color="primary" />
  );
  expect(icon.queryByTestId("xxx")).toBeDefined();
});

test("shows icon with click support", () => {
  const onClick = jest.fn();

  const { queryByTestId } = render(
    <Icon
      id={iconMock.id}
      viewBox={iconMock.viewBox}
      color="primary"
      onClick={onClick}
      title="test title"
    />
  );
  expect(queryByTestId("honeyui-icon-test-id-title")).toHaveTextContent("test title");

  expect(onClick).toBeCalledTimes(0);

  fireEvent.click(queryByTestId("honeyui-icon-test-id"));

  expect(onClick).toBeCalledTimes(1);

  fireEvent.keyPress(queryByTestId("honeyui-icon-test-id"), {
    key: "Enter",
    code: 13,
    charCode: 13
  });

  expect(onClick).toBeCalledTimes(2);

  fireEvent.keyPress(queryByTestId("honeyui-icon-test-id"), { key: " ", code: 32, charCode: 32 });

  expect(onClick).toBeCalledTimes(3);
});

test("should warn if something not write", () => {
  console.warn = jest.fn();
  const onClick = jest.fn();

  render(<Icon id={iconMock.id} viewBox={iconMock.viewBox} color="primary" />);
  expect(console.warn).toBeCalledTimes(0);

  render(<Icon id={iconMock.id} viewBox={iconMock.viewBox} color="primary" onClick={onClick} />);

  expect(console.warn).toBeCalledTimes(1);
});