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

const props = {
  value: 10,
  maxValue: 1000,
  minValue: 0,
  showSlider: true,
  style: { marginTop: 50, marginTop: 500 },
  onChange: (): any => null,
};

const button1 = {
  command: "SHRINK",
  style: { marginTop: 35 },
  icon: "TestingIcon",
};

const button2 = {
  command: "GROW",
  style: { marginTop: 25 },
  icon: "ButtonTwoIconTest",
};

const getSliderValue = (container) => {
  return parseInt(container.querySelectorAll("input[type='hidden']")[0].value);
};

describe("<Position /> Rendering >", () => {
  it(`Should render the component in the dom`, () => {
    render(<Position {...props} />);
    expect(screen.queryByTestId("Properties-Position")).toBeTruthy();
  });

  it(`Should render a _Max Value_ checkbox when the showMaxCheck prop is true`, () => {
    render(<Position {...props} showMaxCheck />);
    expect(screen.queryByTestId("ButtonSliderGroup-maxCheck")).toBeTruthy();
  });

  it(`Should render the _Auto Set_ checkbox when the showAutoCheck prop is set to true`, () => {
    render(<Position {...props} showMaxCheck showAutoCheck />);
    expect(screen.queryByTestId("ButtonSliderGroup-autoCheck")).toBeTruthy();
  });
});

describe("<Position /> Actions >", () => {
  test.todo(
    `Should update the marginTop to the value when the slider has changed`
  );

  it(`Should set the value to the maxCheckValue prop's value when the _Max_ checkbox is checked`, () => {
    // render it
    const { container, debug } = render(
      <Position {...props} showSlider showMaxCheck />
    );
    // click the checkbox
    fireEvent.click(container.querySelectorAll("input[type='checkbox']")[0]);
    // confirm that the value is the maxValue
    expect(getSliderValue(container)).toBe(props.maxValue);
  });

  it(`Should immediately uncheck the MaxCheck checkbox when the button is clicked or slider is changed`, () => {
    // render it
    const { container, debug } = render(
      <Position {...props} showSlider showMaxCheck __testSliderValue={25} />
    );
    // click the max check box (on)
    fireEvent.click(container.querySelectorAll('input[type="checkbox"]')[0]);
    // confirm that the max checkbox is on
    expect(getSliderValue(container)).toBe(props.maxValue);
    expect(
      screen.getByTestId("ButtonSliderGroup-maxCheck").getAttribute("class")
    ).toContain("Mui-checked");
    // set the slider value
    fireEvent.click(screen.getByTestId("__testSliderValueUpdate"));
    // confirm that the max checkbox is off
    expect(
      screen.getByTestId("ButtonSliderGroup-maxCheck").getAttribute("class")
    ).not.toContain("Mui-checked");
  });
  it(`Should immediately uncheck the AutoCheck checkbox when the button is clicked or slider is changed`, () => {
    // render it
    const { container, debug } = render(
      <Position {...props} showSlider showAutoCheck __testSliderValue={25} />
    );
    // click the max check box (on)
    fireEvent.click(container.querySelectorAll('input[type="checkbox"]')[0]);
    // confirm that the auto check checkbox is on
    expect(
      screen.getByTestId("ButtonSliderGroup-autoCheck").getAttribute("class")
    ).toContain("Mui-checked");
    // set the slider value
    fireEvent.click(screen.getByTestId("__testSliderValueUpdate"));
    // confirm that the autoCheck checkbox is off
    expect(
      screen.getByTestId("ButtonSliderGroup-autoCheck").getAttribute("class")
    ).not.toContain("Mui-checked");
  });
  it(`Should automatically check the MaxCheck Checkbox when the slider is at the maximum position`, () => {
    // render it normally
    const { container, debug } = render(
      <Position
        {...props}
        showSlider
        showMaxCheck
        __testSliderValue={props.maxValue}
      />
    );
    // set the slider to the max position
    fireEvent.click(screen.getByTestId("__testSliderValueUpdate"));
    // confirm that the checkbox is on
    expect(
      screen.getByTestId("ButtonSliderGroup-maxCheck").getAttribute("class")
    ).toContain("Mui-checked");
  });

  it(`Should position the value of the slider to the max position if the MaxCheck checkbox is checked`, () => {
    // render the component
    const { container, debug } = render(
      <Position {...props} showSlider showMaxCheck />
    );
    // click the max checkbox
    fireEvent.click(container.querySelectorAll('input[type="checkbox"]')[0]);
    // confirm that the slider value is the same as the max value
    expect(getSliderValue(container)).toBe(props.maxValue);
  });

  it(`Should revert the value back to the original value if the _Auto_ checkbox is un-checked`, () => {
    const value = 64;
    // render the component
    const { container, debug } = render(
      <Position {...props} showSlider showAutoCheck autoCheckValue={value} />
    );
    // click the autocheck checkbox
    fireEvent.click(container.querySelectorAll('input[type="checkbox"]')[0]);
    // confirm that the slider value matches the originalValue prop
    expect(getSliderValue(container)).toBe(value);
  });
});

describe("<Position /> Events >", () => {
  it(`Should trigger the onChange() event with the new value when either of the buttons are clicked`, () => {
    const onChange = jest.fn();
    // render the component
    const { container, debug } = render(
      <Position {...props} showSlider button1={button1} onChange={onChange} />
    );

    // click one of the buttons
    fireEvent.click(screen.getByTestId("ButtonSliderGroup-Button1"));
    // confirm that the onChange event was fired and the value was passed
    expect(onChange.mock.calls[0][0]).toEqual({
      marginTop: props.style.marginTop - 10,
    });
  });

  it(`Should trigger the onChange() event with the new value when the slider is moved`, () => {
    // const value = 66;
    const __testSliderValue = 111;

    const onChange = jest.fn();
    // render the component
    const { container, debug } = render(
      <Position
        {...props}
        showSlider
        __testSliderValue={__testSliderValue}
        onChange={onChange}
      />
    );

    // change the slider position
    fireEvent.click(screen.getByTestId("__testSliderValueUpdate"));

    // confirm that the onChange event was fired and the value was passed
    expect(onChange.mock.calls[0][0]).toEqual({
      marginTop: __testSliderValue,
    });
  });
});

describe("<Position /> Hooks >", () => {
  test.skip(`Should trigger the _onChange_ plugin hook when the setting changes`, () => {});

  test.skip(`Should trigger the _onPositionRender_ plugin hook when the component is being rendered`, () => {});
});