import * as React from "react";
import { indexOf } from "lodash";
import {
  render,
  fireEvent,
  cleanup,
  screen,
  getAllByTestId,
} from "@testing-library/react";
import { ComponentTypes } from "@sc/plugins/webcomponents/v2/types";
import LoadComponent from "./LoadComponent";
import { settingsData } from "./LoadComponent.stories";
import { EditorMode } from "@sc/modules/v2/Editor/types";

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

  it("Should render the component provided in the type prop", () => {
    const ignoreTheseComponents = [
      "IMAGE",
      "GROUP",
      "FACEBOOKLOGIN",
      "SHAREBUTTON",
      "SWITCH",
      "CURSOR",
    ];

    const types = Object.keys(ComponentTypes).filter(
      (type) => indexOf(ignoreTheseComponents, type) === -1
    );

    render(
      <>
        {types.map((type) => (
          <span key={type}>
            <LoadComponent type={ComponentTypes[type]} />
          </span>
        ))}
      </>
    );

    types.forEach((type) => {
      expect(screen.getAllByTestId(`WC-${type}-LIVE`)).not.toBe(null);
    });
  });

  it("Should render the 'EDITOR' version of the component when the mode is set to 'EDITOR'", () => {
    const { getByTestId } = render(
      <LoadComponent
        mode={EditorMode.EDITOR}
        type={ComponentTypes.TEXT}
        settings={settingsData}
      />
    );
    expect(screen.getByTestId(`WC-TEXT-EDIT`)).not.toBe(null);
  });

  it("Should render the 'LIVE' version of the component when the mode is set to 'LIVE'", () => {
    render(
      <LoadComponent
        mode={EditorMode.LIVE}
        type={ComponentTypes.TEXT}
        settings={settingsData}
      />
    );
    expect(screen.getByTestId(`WC-TEXT-LIVE`)).not.toBe(null);
  });

  // it("Component rendered should reflect the properties found in the settings prop", () => {
  //   expect(true).toBe(false);
  // });

  test.skip("Should set isDragInProgress prop to true when in the middle of dragging", () => {});

  test.skip("Should see accurate values in itemCoordinates prop after the item's position changes", () => {});

  test.skip("Should see accurate values in parentCoordinates prop after the item's position changes to be inside of a different parent container/column", () => {});

  test.skip("Should be able to access itemCoordinates, settings, isEditing, setIsEditing, and parentCoordinates from any child component", () => {});

  test.skip("Should set the isEditing prop to true when the component is being edited", () => {});
});