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

import "babel-polyfill";

import AttributeContainer from "./AttributeContainer";
import { data } from "./AttributeContainer.stories";
import { AttributeNames } from "./types";

const testId = "FormBuilder-AttributeContainer";
const props = {};

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

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

  it(`Should render each attribute provided based on the list in the dom`, async () => {
    // const { rerender } = render(<div />);
    // // const attrNames = Object(AttributeNames).keys
    // for (let aKey in AttributeNames) {
    //   const attribute = AttributeNames[aKey];
    //   rerender(
    //     <AttributeContainer
    //       {...props}
    //       data={data.filter((itm) => itm.attribute === attribute)}
    //     />
    //   );
    //   // console.log(`FormBuilder-Attributes-${attribute.replace(/ /g, "")}`);
    //   await waitFor(() =>
    //     screen.queryByTestId(
    //       `FormBuilder-Attributes-${attribute.replace(/ /g, "")}`
    //     )
    //   );
    //   expect(
    //     screen.queryByTestId(
    //       `FormBuilder-Attributes-${attribute.replace(/ /g, "")}`
    //     )
    //   ).toBeTruthy();
    // }
  });

  it(`Should render the same number of attributes as is provided in the data prop`, () => {
    const testId = "FormBuilder-AttributeContainer-Item";

    render(<AttributeContainer {...props} data={data} />);

    expect(screen.queryAllByTestId(testId).length).toEqual(data.length);
  });

  it(`Should only render items where hide = false`, () => {
    const testId = "FormBuilder-AttributeContainer-Item";
    let newData = data;
    newData[2]["settings"] = { hide: true };
    newData[7]["settings"] = { hide: true };
    render(<AttributeContainer {...props} data={newData} />);

    expect(screen.queryAllByTestId(testId).length).toEqual(newData.length - 2);
  });
});

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

  it(`Should show a show/hide option in the dropdown that toggles whether or not to show items where hide = true`, () => {
    const testId1 = "FormBuilder-AttributeContainer-Item";
    const testId2 = "FormBuilder-AttributeContainer-ShowHideItems";
    let newData = data;
    newData[2]["settings"] = { hide: true };
    newData[7]["settings"] = { hide: true };

    render(<AttributeContainer {...props} data={newData} />);
    expect(screen.queryAllByTestId(testId1).length).toEqual(newData.length - 2);
    expect(screen.queryAllByTestId(testId2).length).toEqual(2);
  });

  it(`Should trigger onChange when the data in any of the attributes update`, () => {
    const testId = "FormBuilder-Attributes-Label";
    const onChange = jest.fn();
    render(<AttributeContainer {...props} data={data} onChange={onChange} />);
    fireEvent.change(screen.getByTestId(testId).querySelector("input"), {
      target: { value: "Testing" },
    });
    expect(onChange).toBeCalled();
  });

  it(`Should trigger onBlur when the data in any of the attributes lose focus`, () => {
    const testId = "FormBuilder-Attributes-Label";
    const onBlur = jest.fn();
    render(<AttributeContainer {...props} data={data} onBlur={onBlur} />);
    fireEvent.blur(screen.getByTestId(testId).querySelector("input"), {
      target: { value: "Testing" },
    });
    expect(onBlur).toBeCalled();
  });

  it(`Should combine and forward all responses from onChange events of form field attribute components`, () => {});
});