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

import Properties from "./Properties";

const testId = "FormBuilder-FormField-Properties";
const props = {};

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

  test.todo(`Should render in the dom`);

  test.todo(
    `Should show the <EditFormField /> component in the Property Window as a section`
  );

  test.todo(`Should show position section`);

  test.todo(`Should show alignment section`);

  test.todo(`Should show field typography section`);

  test.todo(`Should show field size (width/height)`);

  test.todo(`Should show field border shadow`);

  test.todo(`Should show field position padding`);

  test.skip(`Should show validation style item section`, () => {});
});

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

  test.todo(
    `Should trigger the handleFormFieldChange() method when the <EditFormField /> component showing in the property window changes`
  );

  test.todo(
    `Should update the <LiveFormField /> component in the canvas when handleFormFieldChange is triggered`
  );

  test.todo(
    `Should trigger the handleFieldSizeChange() method when the properties in the Field Size section changes`
  );

  test.todo(
    `Should update the width and height of the form field when handleFieldSize method is triggered`
  );

  test.todo(
    `Should trigger the handleFieldPositionPaddingChange() method when the properties in the position padding section changes`
  );

  test.todo(
    `Should update the margin and padding of the form field when handleFieldPositionPaddingChange is triggered`
  );

  test.todo(
    `Should trigger the handleBorderShadowChange() method when the properties in the position & padding section changes`
  );

  test.todo(
    `Should update the border settings of the form field when handleBorderShadowChange is triggered`
  );

  test.todo(
    `Should trigger the handleFontChange() method when the properties in the font/typography section changes`
  );

  test.todo(
    `Should update the font size and family of the form field when handleFontChange is triggered`
  );
});