import * as React from "react";
import "babel-polyfill";

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

import EditFormField from "./EditFormField";
import { FormFieldTypes } from "../types";

const testId = "FormBuilder-EditFormField";
const textFieldTestId = "FormBuilder-FormFields-TextField-EDITOR";
const dateFieldTestId = "FormBuilder-FormFields-DateField-EDITOR";
const dropDownTestId = "FormBuilder-FormFields-DropdownField-EDITOR";
const textAreaTestId = "FormBuilder-FormFields-TextAreaField-EDITOR";
const checkboxesTestId = "FormBuilder-FormFields-Checkboxes-EDITOR";
const multipleChoiceTestId = "FormBuilder-FormFields-MultipleChoice-EDITOR";
const contentFieldTestId = "FormBuilder-FormFields-ContentField-EDITOR";
const fileUploadTestId = "FormBuilder-FormFields-FileUpload-EDITOR";
const linearScaleTestId = "FormBuilder-FormFields-LinearScaleField-EDITOR";

const allTestIds = {
  TEXT: textFieldTestId,
  PASSWORD: textFieldTestId,
  CHECKBOXES: checkboxesTestId,
  // RADIO: multipleChoiceTestId,
  TEXTAREA: textAreaTestId,
  SELECT: dropDownTestId,
  DATE: dateFieldTestId,
  CONTENT: contentFieldTestId,
  NUMBER: textFieldTestId,
  CURRENCY: textFieldTestId,
  DROPDOWN: dropDownTestId,
  MULTIPLECHOICE: multipleChoiceTestId,
  TYPOGRAPHY: contentFieldTestId,
  FILEUPLOAD: fileUploadTestId,
  LINEARSCALE: linearScaleTestId,
};

const props = {
  isExpanded: true,
  fieldData: {
    attributeContainerDataSettings: { hide: false },
  },
};

describe("<EditFormField /> Rendering Tests", () => {
  afterEach(cleanup);
  it(`Should render in the dom`, () => {
    render(<EditFormField {...props} type={FormFieldTypes.TEXT} />);
    expect(screen.queryByTestId(testId)).toBeTruthy();
  });

  it(`Should show the <TextField /> when the type prop is TEXT`, () => {
    render(<EditFormField {...props} type={FormFieldTypes.TEXT} />);
    expect(screen.queryByTestId(textFieldTestId)).toBeTruthy();
  });

  it(`Should show the <DateField /> when the type prop is DATE`, () => {
    render(<EditFormField {...props} type={FormFieldTypes.DATE} />);
    expect(screen.queryByTestId(dateFieldTestId)).toBeTruthy();
  });

  it(`Should show the <NumberField /> input when the type prop is NUMBER`, () => {
    render(<EditFormField {...props} type={FormFieldTypes.NUMBER} />);
    expect(screen.queryByTestId(textFieldTestId)).toBeTruthy();
  });

  it(`Should show the <CurrencyField /> when the type prop is CURRENCY`, () => {
    render(<EditFormField {...props} type={FormFieldTypes.CURRENCY} />);
    expect(screen.queryByTestId(textFieldTestId)).toBeTruthy();
  });

  it(`Should show <DropdownField /> menu when the type prop is DROPDOWN`, () => {
    render(<EditFormField {...props} type={FormFieldTypes.DROPDOWN} />);
    expect(screen.queryByTestId(dropDownTestId)).toBeTruthy();
  });

  it(`Should show a checkbox & label (<Checkboxes /> the when type prop is CHECKBOXES`, () => {
    render(<EditFormField {...props} type={FormFieldTypes.CHECKBOXES} />);
    expect(screen.queryByTestId(checkboxesTestId)).toBeTruthy();
  });

  it(`Should show radio input fields (<MultipleChoice /> the when type prop is MULTIPLECHOICE`, () => {
    render(<EditFormField {...props} type={FormFieldTypes.MULTIPLECHOICE} />);
    expect(screen.queryByTestId(multipleChoiceTestId)).toBeTruthy();
  });

  it(`Should show a <TextArea /> the when type prop is TEXTAREA`, () => {
    render(<EditFormField {...props} type={FormFieldTypes.TEXTAREA} />);
    expect(screen.queryByTestId(textAreaTestId)).toBeTruthy();
  });

  it(`Should show a <ContentField /> the when type prop is TYPOGRAPHY`, () => {
    render(<EditFormField {...props} type={FormFieldTypes.TYPOGRAPHY} />);
    expect(screen.queryByTestId(contentFieldTestId)).toBeTruthy();
  });

  it(`Should show a <FileUpload /> component when the type prop is FILEUPLOAD`, () => {
    render(<EditFormField {...props} type={FormFieldTypes.FILEUPLOAD} />);
    expect(screen.queryByTestId(fileUploadTestId)).toBeTruthy();
  });

  it(`Should show a <LinearScale /> component when the type prop is LINEARSCALE`, () => {
    render(<EditFormField {...props} type={FormFieldTypes.LINEARSCALE} />);
    expect(screen.queryByTestId(linearScaleTestId)).toBeTruthy();
  });

  it(`Should show an icon in the dom that reflects the item being loaded`, () => {
    const iconTestId = "Properties-IconSelector-input";
    const { rerender } = render(<div />);

    // TextField
    rerender(<EditFormField {...props} type={FormFieldTypes.TEXT} />);
    expect(screen.queryByTestId(iconTestId)).toBeTruthy();

    // DateField
    rerender(<EditFormField {...props} type={FormFieldTypes.DATE} />);
    expect(screen.queryByTestId(iconTestId)).toBeTruthy();

    // DropdownField
    rerender(<EditFormField {...props} type={FormFieldTypes.DROPDOWN} />);
    expect(screen.queryByTestId(iconTestId)).toBeTruthy();

    // TextAreaField
    rerender(<EditFormField {...props} type={FormFieldTypes.TEXTAREA} />);
    expect(screen.queryByTestId(iconTestId)).toBeTruthy();
  });

  it(`Show in expanded state when isExpanded is true`, () => {
    const { rerender } = render(<div />);

    for (let type in FormFieldTypes) {
      rerender(
        <EditFormField isExpanded={false} type={FormFieldTypes[type]} />
      );
      expect(screen.queryByTestId(allTestIds[type])).not.toBeTruthy();
    }

    for (let type in FormFieldTypes) {
      rerender(<EditFormField isExpanded type={FormFieldTypes[type]} />);
      expect(screen.queryByTestId(allTestIds[type])).toBeTruthy();
    }
  });

  it(`Should show the LIVE preview of the component when showPreview is true`, () => {
    const { rerender } = render(<div />);
    for (let type in FormFieldTypes) {
      rerender(
        <EditFormField isExpanded showPreview type={FormFieldTypes[type]} />
      );
      expect(
        screen.queryByTestId(allTestIds[type].replace("EDITOR", "LIVE"))
      ).toBeTruthy();
    }
  });

  it(`Should show the caption provided in the dom`, () => {
    const caption = "Testing Caption Text";
    render(
      <EditFormField
        isExpanded={false}
        type={FormFieldTypes.TEXT}
        caption={caption}
      />
    );
    expect(screen.getAllByText(caption)).toBeTruthy();
  });
});

describe("<EditFormField /> Events Tests", () => {
  afterEach(cleanup);
  test.todo(
    `Should trigger the onChange event when any change occurs in the form field`
  );

  test.todo(
    `Should pass an object that matches the the shape of the LiveFormFieldProps type when onChange is called`
  );

  test.todo(`Should trigger the onClick method when the container is clicked`);
});

describe("<EditFormField /> Actions Tests", () => {
  afterEach(cleanup);
  it(`Should toggle the expansion or collapsing of the container when clicked`, () => {});
});