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

describe("<EditorObject /> Tests", () => {
  afterEach(cleanup);

  it("Should render the Editor Object component when called", () => {
    render(<EditorObject>Inner Content</EditorObject>);
    expect(screen.getByTestId("Editor-EditorObject")).not.toBe(null);
  });

  it("Should show a caption in the editor object that reflects the title prop", () => {
    render(<EditorObject title="My Component">Inner Content</EditorObject>);
    expect(screen.getByText("MY COMPONENT")).not.toBe(null);
  });

  it("Should show an icon if one is provided that reflects the icon prop", () => {
    render(
      <EditorObject title="My Component" icon={IconTypes.Mail}>
        Inner Content
      </EditorObject>
    );
    expect(screen.getByTestId("WC-ICON-LIVE")).not.toBe(null);
  });

  it("Should render in hover mode when state is hovered", () => {
    const { debug } = render(
      <EditorObject title="My Component" state={EditorObjectState.HOVER}>
        Inner Content
      </EditorObject>
    );
    // debug();
    expect(screen.getByTestId("Editor-EditorObject-State-Hover")).not.toBe(
      null
    );
  });

  it("Should render in active mode when state is active", () => {
    render(
      <EditorObject title="My Component" state={EditorObjectState.ACTIVE}>
        Inner Content
      </EditorObject>
    );
    // expect(true).toBe(false);
    expect(screen.getByTestId("Editor-EditorObject-State-Active")).not.toBe(
      null
    );
  });

  it("Should show a list of menu items in the actions drop down menu that reflect the items in the actions prop", () => {
    const actions = [{ caption: "Testing" }];
    const { debug } = render(
      <EditorObject
        title="My Component"
        state={EditorObjectState.ACTIVE}
        actions={actions}
      >
        Inner Content
      </EditorObject>
    );

    fireEvent.click(screen.getByTestId("Editor-EditorObject-Dropdown"));

    // debug();
    expect(
      screen.getAllByTestId("Editor-EditorObject-Dropdown-Items").length
    ).toEqual(actions.length + 2);
  });

  test.todo("Should render resize handles if isResizable prop is true");

  test.todo(
    "Should render the 'North' resize handle if resizeHandles prop has an 'N' as an array item"
  );

  test.todo(
    "Should render the 'North West' resize handle if resizeHandles prop has an 'NW' as an array item"
  );

  test.todo(
    "Should render the 'West' resize handle if resizeHandles prop has an 'W' as an array item"
  );

  test.todo(
    "Should render the 'South West' resize handle if resizeHandles prop has an 'SW' as an array item"
  );

  test.todo(
    "Should render the 'South' resize handle if resizeHandles prop has an 'S' as an array item"
  );

  test.todo(
    "Should render the 'South East' resize handle if resizeHandles prop has an 'SE' as an array item"
  );

  test.todo(
    "Should render the 'East' resize handle if resizeHandles prop has an 'E' as an array item"
  );

  test.todo(
    "Should render the 'North East' resize handle if resizeHandles prop has an 'NE' as an array item"
  );

  test.skip("Should be styled according to the style prop if one is present", () => {});

  test.skip("Should render a transparent div component if overlay prop is true", () => {});

  test.skip("Should show an overlay prop across the entire editor object if one is showing", () => {});

  test.skip("Should show a custom drag handle component if provided in the dragHandleComponent prop", () => {});

  test.skip("Should show a custom resize handler component for resizable editor objects when one is provided in the resizeHandleComponent prop", () => {});
});

describe("Editor Module (Events)", () => {
  afterEach(cleanup);

  it("Should trigger the onClick event when the editor object is clicked", () => {
    const onClick = jest.fn();
    render(
      <EditorObject title="My Component" onClick={onClick}>
        Inner Content
      </EditorObject>
    );

    fireEvent.click(screen.getByTestId("Editor-EditorObject"));

    expect(onClick).toBeCalled();
  });

  test.skip("Should trigger the onResize event with an appropriate payload when a resize is supposed to take place", () => {});

  test.skip("Should trigger the onResizeEnd event with an appropriate payload when a resize has ended", () => {});

  test.skip("Shoudl trigger the onDragStart event when the editor object's drag handle has begun dragging", () => {});
});

describe("Editor Module (Actions)", () => {
  afterEach(cleanup);
  test.skip("Should delete the item if the [del] key is pressed (while not in edit mode", () => {});

  test.skip("Should exit editing mode if the [esc] key is pressed", () => {});
});

describe("Editor Module (Hooks)", () => {
  afterEach(cleanup);
  test.skip("Should trigger the 'onEditorObjectResize' plugin hook when the resize is taking place", () => {});

  test.skip("Should trigger the 'onEditorObjectDragDrop' plugin hook when the editor object drag and drop is taking place", () => {});

  test.skip("Should trigger the 'onEditorObjectClick' plugin hook when the editor object is clicked", () => {});

  test.skip("Should trigger the 'onEditorObjectContextMenu' plugin hook when the context menu is being showed", () => {});

  test.skip("Should trigger the 'onEditorObjectRender' plugin hook when the editor object is being rendered", () => {});

  test.skip("Should trigger the 'onEditorObjectResizeHandleRender' plugin hook when the editor object's resize handler is being rendered", () => {});

  test.skip("Should trigger the 'onEditorObjectActionComponentRender' plugin hook when the editor object's action component is being rendered", () => {});

  test.skip("Should trigger the 'onEditorObjectActionMenuList' plugin hook when the editor object's action menu list is being generated", () => {});
});