import * as React from "react";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import { EditorObjectState } from "@sc/modules/v2/Editor/components/EditorObject/types";
import { PageSectionCategory } from "@sc/plugins/misc/v2/blocks/weblayouts/types";
import { IconTypes } from "@sc/plugins/webcomponents/v2/Icon";
import { faWindowMaximize } from "@fortawesome/free-solid-svg-icons";

import SectionItem from "./SectionItem";

const testId = "Blocks-SectionsLegend-SectionItem";
describe("Rendering > <SectionItem /> Tests", () => {
  afterEach(cleanup);

  it(`Should render in the dom`, () => {
    render(<SectionItem id="" />);
    expect(screen.queryByTestId(testId)).toBeTruthy();
  });

  it(`Should render the component in a state (hovered, normal, active) 
    that matches the state passed along in the settings prop`, () => {
    // ACTIVE STATE
    const { rerender } = render(
      <SectionItem id="" settings={{ state: EditorObjectState.ACTIVE }} />
    );
    expect(screen.getByTestId(testId).style.backgroundColor).toBe(
      "rgb(238, 238, 238)"
    );

    // HOVER STATE
    rerender(
      <SectionItem id="" settings={{ state: EditorObjectState.HOVER }} />
    );
    expect(screen.getByTestId(testId).style.backgroundColor).toBe(
      "rgb(244, 244, 244)"
    );

    // NORMAL STATE
    rerender(
      <SectionItem id="" settings={{ state: EditorObjectState.NORMAL }} />
    );
    expect(screen.getByTestId(testId).style.borderBottomColor).toBe("#DDD");
  });

  it(`Should display an icon based on the section type`, () => {
    render(<SectionItem id="" type={PageSectionCategory.HEADER} />);

    expect(
      screen
        .getByTestId(testId)
        .querySelector("svg")
        .getAttribute("data-icon")
    ).toBe("window-maximize");
  });

  it(`Should show a label that represents the text provided in the label prop`, () => {
    const label = "TESTING";
    render(<SectionItem id="" label={label} />);
    expect(screen.queryByText(label)).toBeTruthy();
  });
});

describe("Events > <SectionItem /> Tests", () => {
  afterEach(cleanup);
  it(`Should trigger the onClick event when it is clicked on`, () => {
    const onClick = jest.fn();
    render(<SectionItem id="" onClick={onClick} />);
    fireEvent.click(screen.getByTestId(testId));
    expect(onClick).toBeCalled();
  });

  it(`Should trigger the onMouseEnter event when the user double-clicks on the section item`, () => {
    const onMouseEnter = jest.fn();
    render(<SectionItem id="" onMouseEnter={onMouseEnter} />);
    fireEvent.mouseEnter(screen.getByTestId(testId));
    expect(onMouseEnter).toBeCalled();
  });

  it(`Should trigger the onMouseLeave event when the user's mouse leaves the section item`, () => {
    const onMouseLeave = jest.fn();
    render(<SectionItem id="" onMouseLeave={onMouseLeave} />);
    fireEvent.mouseLeave(screen.getByTestId(testId));
    expect(onMouseLeave).toBeCalled();
  });

  it(`Should trigger the onDoubleClick event when it is double-clicked on`, () => {
    const onDoubleClick = jest.fn();
    render(<SectionItem id="" onDoubleClick={onDoubleClick} />);
    fireEvent.doubleClick(screen.getByTestId(testId));
    expect(onDoubleClick).toBeCalled();
  });
});