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

import reactToCSS from "react-style-object-to-css";
import { styleClean } from "@sc/utils";

import FormBuilder from "./FormBuilder";
import { defaultData, styleData } from "./FormBuilder.stories";
import { EditorMode } from "../../Editor/types";
import { FormFieldTypes } from "./types";

const testId = "FormBuilder";
const props = {
  data: defaultData,
  globalFieldStyle: styleData,
};

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

  it(`The list of <EditFormFields /> or <LiveFormFields /> displayed should match number of fields in data array`, () => {
    const { data } = props;
    const liveTestId = "FormBuilder-LiveFormField";
    const editTestId = "FormBuilder-EditFormField";

    const { rerender } = render(<div />);

    // Live Form Fields
    rerender(<FormBuilder {...props} data={data} mode={EditorMode.LIVE} />);
    expect(screen.queryAllByTestId(liveTestId).length).toEqual(data.length);

    // Editor Form Fields
    rerender(<FormBuilder {...props} data={data} mode={EditorMode.EDITOR} />);
    expect(screen.queryAllByTestId(editTestId).length).toEqual(data.length);
  });

  test.skip(`Should use the "validationSchema" prop to determine the Yup validation schema`, () => {});

  it(`Should use the labelStyle, inputStyle, iconStyle, descriptionStyle, containerStyle object in the globalFieldStyle prop to determine the style to use for the form fields`, () => {
    const { container } = render(
      <FormBuilder {...props} mode={EditorMode.LIVE} />
    );
    expect(container).toMatchSnapshot();
  });
});

// describe("<FormBuilder /> Style rendering Tests", () => {
//   afterEach(cleanup);

//   it(`Should use the labelStyle object in the globalFieldStyle prop to determine the style to use for the form fields`, () => {
//     const checkLabelStyle = (type) => {
//       const { data } = props;
//       const label = data.filter((itm) => itm.type === type)[0]["label"];
//       expect(
//         styleClean(screen.getByText(label).getAttribute("style"))
//       ).toContain(styleClean(reactToCSS(styleData.labelStyle)));
//     };
//     render(<FormBuilder {...props} mode={EditorMode.LIVE} />);
//     // Checkboxes
//     checkLabelStyle(FormFieldTypes.CHECKBOXES);

//     // DateField
//     checkLabelStyle(FormFieldTypes.DATE);

//     // DropdownField
//     checkLabelStyle(FormFieldTypes.DROPDOWN);

//     // FileUpload
//     checkLabelStyle(FormFieldTypes.FILEUPLOAD);

//     // LinearScaleField
//     checkLabelStyle(FormFieldTypes.LINEARSCALE);

//     // MultipleChoice
//     checkLabelStyle(FormFieldTypes.MULTIPLECHOICE);

//     // TextAreaField
//     checkLabelStyle(FormFieldTypes.TEXTAREA);

//     // TextField
//     checkLabelStyle(FormFieldTypes.TEXT);
//   });

//   it(`Should use the inputStyle object in the globalFieldStyle prop to determine the style to use for the form fields`, () => {
//     render(<FormBuilder {...props} mode={EditorMode.LIVE} />);

//     const checkInputStyle = (testId, inputType = "input") => {
//       // const input = data.filter(itm => itm.type === type)[0]['']
//       expect(
//         styleClean(
//           screen
//             .queryAllByTestId(testId)[0]
//             .querySelector(inputType)
//             .getAttribute("style")
//         )
//       ).toContain(
//         styleClean(
//           reactToCSS({
//             ...styleData.inputStyle,
//             padding: "15px 15px 15px 40px",
//           })
//         )
//       );
//     };

//     // DateField
//     checkInputStyle("FormBuilder-FormFields-DateField-LIVE");

//     // DropdownField
//     checkInputStyle("FormBuilder-FormFields-DropdownField-LIVE", "select");

//     // TextAreaField
//     checkInputStyle("FormBuilder-FormFields-TextAreaField-LIVE", "textarea");

//     // TextField
//     checkInputStyle("FormBuilder-FormFields-TextField-LIVE");
//   });

//   it(`Should use the iconStyle object in the globalFieldStyle prop to determine the style to use for the form fields`, () => {
//     render(<FormBuilder {...props} mode={EditorMode.LIVE} />);

//     const checkIconStyle = (testId) => {
//       expect(
//         styleClean(
//           screen
//             .queryAllByTestId(testId)[0]
//             .querySelector('[data-testid="WC-ICON-LIVE"]')
//             .getAttribute("style")
//         )
//       ).toContain(styleClean(reactToCSS(styleData.iconStyle)));
//     };

//     // DateField
//     checkIconStyle("FormBuilder-FormFields-DateField-LIVE");

//     // DropdownField
//     checkIconStyle("FormBuilder-FormFields-DropdownField-LIVE");

//     // TextAreaField
//     checkIconStyle("FormBuilder-FormFields-TextAreaField-LIVE");

//     // TextField
//     checkIconStyle("FormBuilder-FormFields-TextField-LIVE");
//   });

//   it(`Should use the descriptionStyle object in the globalFieldStyle prop to determine the style to use for the form fields`, () => {
//     render(<FormBuilder {...props} mode={EditorMode.LIVE} />);

//     const checkDescriptionStyle = (type) => {
//       const { data } = props;
//       const description = data.filter((itm) => itm.type === type)[0][
//         "description"
//       ];
//       expect(
//         styleClean(screen.getByText(description).getAttribute("style"))
//       ).toContain(styleClean(reactToCSS(styleData.descriptionStyle)));
//     };

//     // Checkboxes
//     checkDescriptionStyle(FormFieldTypes.CHECKBOXES);

//     // DateField
//     checkDescriptionStyle(FormFieldTypes.DATE);

//     // DropdownField
//     checkDescriptionStyle(FormFieldTypes.DROPDOWN);

//     // FileUpload
//     checkDescriptionStyle(FormFieldTypes.FILEUPLOAD);

//     // LinearScaleField
//     checkDescriptionStyle(FormFieldTypes.LINEARSCALE);

//     // MultipleChoice
//     checkDescriptionStyle(FormFieldTypes.MULTIPLECHOICE);

//     // TextAreaField
//     checkDescriptionStyle(FormFieldTypes.TEXTAREA);

//     // TextField
//     checkDescriptionStyle(FormFieldTypes.TEXT);
//   });

//   it(`Should use the containerStyle object in the globalFieldStyle prop to determine the style to use for the form fields`, () => {
//     render(<FormBuilder {...props} mode={EditorMode.LIVE} />);

//     const checkContainerStyle = (testId) => {
//       expect(
//         styleClean(screen.queryAllByTestId(testId)[0].getAttribute("style"))
//       ).toContain(styleClean(reactToCSS(styleData.containerStyle)));
//     };

//     // Checkboxes
//     checkContainerStyle("FormBuilder-FormFields-Checkboxes");

//     // DateField
//     checkContainerStyle("FormBuilder-FormFields-DateField");

//     // DropdownField
//     checkContainerStyle("FormBuilder-FormFields-DropdownField");

//     // FileUpload
//     checkContainerStyle("FormBuilder-FormFields-FileUpload");

//     // LinearScaleField
//     checkContainerStyle("FormBuilder-FormFields-LinearScaleField");

//     // MultipleChoice
//     checkContainerStyle("FormBuilder-FormFields-MultipleChoice");

//     // TextAreaField
//     checkContainerStyle("FormBuilder-FormFields-TextAreaField");

//     // TextField
//     checkContainerStyle("FormBuilder-FormFields-TextField");
//   });
// });

describe("<FormBuilder /> Event Tests", () => {
  test.todo(
    `Should trigger the "onChange" event when one of the fields change`
  );

  test.todo(
    `Should trigger the "onBlur" event when one of the fields triggers a blur event`
  );
});