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

import ContentField from "./ContentField";
import { EditorMode } from "../../../../Editor/types";

const testId = "FormBuilder-FormFields-ContentField";
const props = {
  attributeContainerDataSettings: { hide: false },
};

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

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

  it(`Should render a rich text editor for collecting the content when in edit mode`, () => {
    const testId = "Editor-Components-RichEditor";
    render(<ContentField {...props} mode={EditorMode.EDITOR} />);
    expect(screen.queryByTestId(testId)).toBeTruthy();
  });

  it(`Should show the rendered content when in LIVE mode`, () => {
    const testIdLive = "FormBuilder-FormFields-ContentField-LIVE";
    render(<ContentField {...props} />);
    expect(screen.queryByTestId(testIdLive)).toBeTruthy();
  });

  it(`Should render the AttributeContainer component when the mode is edit`, () => {
    const attrTestId = "FormBuilder-AttributeContainer";
    render(<ContentField {...props} mode={EditorMode.EDITOR} />);
    expect(screen.queryByTestId(attrTestId)).toBeTruthy();
  });

  it(`Should see that the <Column /> component has been rendered in the dom`, () => {
    const columnsTestId = "FormBuilder-Attributes-Columns";
    render(<ContentField {...props} mode={EditorMode.EDITOR} />);
    expect(screen.queryByTestId(columnsTestId)).toBeTruthy();
  });

  it(`Should see that the <InitialValue /> component has been rendered in the dom`, () => {
    const initialValueTestId = "FormBuilder-Attributes-InitialValue";
    render(<ContentField {...props} mode={EditorMode.EDITOR} />);
    expect(screen.queryByTestId(initialValueTestId)).toBeTruthy();
  });
});

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

  test.todo(
    `Should trigger the onChange event (via handleChange()) if the AttributeContainer's onChange event is called`
  );
});

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

  test.todo(
    `handleChange should convert the incoming payload to LiveFormFieldProps`
  );
});