import * as React from "react";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";

import RichEditor from "./RichEditor";

// export const RichEditorMocks = () => {
// jest.mock("alloyeditor", () => ({
//   AlloyEditor: {
//     editable: jest.fn(() => null),
//   },
// }));
// };

const testId = "Editor-Components-RichEditor";
const props = {};

describe("<RichEditor /> Tests (Rendering)", () => {
  it(`Should render the RichEditor in the dom`, () => {
    render(
      <RichEditor {...props}>
        <p>Testing</p>
      </RichEditor>
    );
    expect(screen.queryByTestId(testId)).toBeTruthy();
  });

  test.todo(
    `Should render a collection of buttons that match the list provided in the buttonList prop`
  );

  test.skip(`Should show the inline control buttons in the location provided in the position prop`, () => {});

  test.skip(`Should not render any inline controls if the disableInlineControls prop is true`, () => {});

  test.skip(`Should style the inline controls according to the style provided in the inlineControlsStyle prop`, () => {});

  test.skip(`Should render the component provided in the inlineControlsComponent instead of the default component when one is provided in the props`, () => {});

  test.todo(
    `Should show content inside the editor that matches the html content provided in the content prop`
  );

  test.todo(`Should disable the editor when the disabled prop is true`);
});

describe("<RichEditor /> Tests (Events)", () => {
  test.todo(
    `Should trigger the onChange() event when a change is made in the rich editor`
  );

  test.todo(`Should trigger the onFocus() event when the editor is focused on`);

  test.todo(`Should trigger the onBlur() event when the editor loses focus`);

  test.todo(
    `Should trigger the onKeyCommand() event when a key is pressed while in the editor`
  );

  test.todo(
    `Should trigger the onSelectText() event when text is selected in the editor`
  );
});

describe("<RichEditor /> Tests (Plugin Hooks)", () => {
  test.skip(`Should trigger the "onRichEditorRender" plugin hook when the RichEditor component is rendering`, () => {});

  test.skip(`Should trigger the "onRichEditorFocus" plugin hook when the editor is focused on`, () => {});

  test.skip(`Should trigger the "onRichEditorChange" plugin hook when a change is made in the rich editor`, () => {});

  test.skip(`Should trigger the "onRichEditorKeyCommand" plugin hook when a key is pressed while in the editor`, () => {});

  test.skip(`Should trigger the "onRichEditorSelectText" plugin hook when text is selected in the editor`, () => {});

  test.skip(`Should trigger the "onRichEditorBlur" plugin hook when the editor loses focus`, () => {});
});