import * as React from "react";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import IconSelector from "./IconSelector";
import { treat } from "./IconSelector";
import { IconTypes } from "@sc/plugins/webcomponents/v2/Icon";
import { IconSelectorProps } from "./types";

const icons = Object.keys(IconTypes).filter(
  (itm) =>
    itm.indexOf("Outlined") === -1 &&
    itm.indexOf("Rounded") === -1 &&
    itm.indexOf("Sharp") === -1 &&
    itm.indexOf("TwoTone") === -1
);

const props: IconSelectorProps = {};

describe("<IconSelector /> Rendering >", () => {
  afterEach(cleanup);
  it(`Should render the component in the dom`, () => {
    render(<IconSelector {...props} />);
    expect(screen.queryByTestId("Properties-IconSelector")).toBeTruthy();
  });

  it(`Should display a large list of material icons in the dom`, () => {
    render(<IconSelector {...props} />);
    expect(screen.queryAllByTestId("Properties-IconSelector-icon").length).toBe(
      icons.length
    );
  });
});

describe("<IconSelector /> Actions", () => {
  afterEach(cleanup);
  it("It should let me search and filter this list", () => {
    const searchString = "file";
    render(<IconSelector {...props} />);
    fireEvent.change(screen.getByPlaceholderText("Search for an icon..."), {
      target: { value: searchString },
    });
    expect(screen.queryAllByTestId("Properties-IconSelector-icon").length).toBe(
      icons.filter(
        (itm) =>
          itm.toUpperCase().indexOf(searchString.toUpperCase()) > -1 ||
          itm.toUpperCase().indexOf(treat(searchString).toUpperCase()) > -1
      ).length
    );
  });
});

describe("<IconSelector /> Events", () => {
  afterEach(cleanup);
  it("Should trigger the onChange() event when an icon is selected", () => {
    const onChange = jest.fn();

    // Render the Icon Selector
    render(<IconSelector {...props} onChange={onChange} />);

    // Pick any of the icons
    const iconToClick = Math.floor(Math.random() * icons.length);

    // Click it
    fireEvent.click(
      screen.queryAllByTestId("Properties-IconSelector-icon")[iconToClick]
    );

    expect(onChange).toBeCalled();
  });
});

describe("<IconSelector /> Hooks", () => {
  afterEach(cleanup);
  test.skip("Should trigger the _onIconSelect_ plugin hook when an icon is selected", () => {
    expect(true).toBe(true);
  });

  test.skip("Should trigger the _onIconSelectorRender_ plugin hook when the component is being rendered", () => {
    expect(true).toBe(true);
  });
});