import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render, fireEvent } from "@testing-library/react";
import { RadioButtonGroup } from "../../../";

test("should show radiobuttons", () => {
  const onClick = jest.fn();
  const buttons: {
    name: string;
    label: string;
    value: string | number | boolean;
  }[] = [1, 2, 3].map(i => {
    return {
      name: `Button${i}`,
      label: `Button ${i}`,
      value: `${i}`
    };
  });
  buttons.push({
    name: `Button_number`,
    label: `Button 5`,
    value: 5
  });
  buttons.push({
    name: `Button_number`,
    label: `Button 5`,
    value: false
  });

  const { queryByTestId } = render(
    <RadioButtonGroup
      className="my-class-name"
      buttons={buttons}
      defaultValue={"2"}
      selection={"2"}
      onSelected={onClick}
      label="Radio Label"
      help="Radio Help"
      error="Required"
    />
  );

  expect(queryByTestId("honeyui-radio-group-1")).toBeTruthy();
  expect(queryByTestId("honeyui-radio-group-1")).not.toHaveClass("form-radio-inline");
  expect((queryByTestId("honeyui-radio-group-1-input") as HTMLInputElement).checked).not.toBe(true);

  expect(queryByTestId("honeyui-radio-group-2")).toBeTruthy();
  expect((queryByTestId("honeyui-radio-group-2-input") as HTMLInputElement).checked).toBe(true);

  expect(queryByTestId("honeyui-radio-group-3")).toBeTruthy();
  expect((queryByTestId("honeyui-radio-group-3-input") as HTMLInputElement).checked).not.toBe(true);

  expect(queryByTestId("honeyui-radio-group-label")).toHaveTextContent("Radio Label");
  expect(queryByTestId("honeyui-radio-group-help")).toHaveTextContent("Radio Help");
  expect(queryByTestId("honeyui-radio-group-error")).toHaveTextContent("Required");
});

test("should check inline value", () => {
  const onClick = jest.fn();
  const buttons = [1, 2, 3].map(i => {
    return {
      name: `Button${i}`,
      label: `Button ${i}`,
      value: `${i}`
    };
  });

  const { queryByTestId } = render(
    <RadioButtonGroup
      className="my-class-name"
      buttons={buttons}
      selection={"2"}
      onSelected={onClick}
      inline
    />
  );

  expect(queryByTestId("honeyui-radio-group-1")).toHaveClass("form-radio-inline");
  expect(queryByTestId("honeyui-radio-group-2")).toHaveClass("form-radio-inline");
  expect(queryByTestId("honeyui-radio-group-3")).toHaveClass("form-radio-inline");
});

test("should use default selection", () => {
  const onClick = jest.fn();
  const buttons = [1, 2, 3].map(i => {
    return {
      name: `Button${i}`,
      label: `Button ${i}`,
      value: `${i}`
    };
  });

  const { queryByTestId } = render(
    <RadioButtonGroup
      className="my-class-name"
      buttons={buttons}
      selection={undefined}
      defaultValue="3"
      onSelected={onClick}
      inline
    />
  );

  expect((queryByTestId("honeyui-radio-group-1-input") as HTMLInputElement).checked).not.toBe(true);
  expect((queryByTestId("honeyui-radio-group-2-input") as HTMLInputElement).checked).not.toBe(true);
  expect((queryByTestId("honeyui-radio-group-3-input") as HTMLInputElement).checked).toBe(true);
});

test("should support interactions", () => {
  const onClick = jest.fn();
  const buttons: {
    name: string;
    label: string;
    value: string | number | boolean;
  }[] = [1, 2, 3].map(i => {
    return {
      name: `Button${i}`,
      label: `Button ${i}`,
      value: `${i}`
    };
  });
  buttons.push({
    name: `Button_number`,
    label: `Button 5`,
    value: 5
  });
  buttons.push({
    name: `Button_false`,
    label: `Button false`,
    value: false
  });
  buttons.push({
    name: `Button_true`,
    label: `Button true`,
    value: true
  });

  const { queryByTestId, rerender } = render(
    <RadioButtonGroup
      buttons={buttons}
      defaultValue={true}
      selection={undefined}
      onSelected={onClick}
      data-testid="radio"
    />
  );
  expect((queryByTestId("radio-true-input") as HTMLInputElement).checked).toBe(true);
  expect(onClick).toBeCalledTimes(0);

  fireEvent.click(queryByTestId("radio-false-input"));
  expect(onClick).toBeCalledTimes(1);
  expect(onClick).lastCalledWith(false);

  rerender(
    <RadioButtonGroup
      buttons={buttons}
      defaultValue={true}
      selection={false}
      onSelected={onClick}
      data-testid="radio"
    />
  );
  expect((queryByTestId("radio-false-input") as HTMLInputElement).checked).toBe(true);

  fireEvent.click(queryByTestId("radio-false-input"));
  expect(onClick).toBeCalledTimes(1);

  fireEvent.click(queryByTestId("radio-1-input"));
  expect(onClick).toBeCalledTimes(2);
  expect(onClick).lastCalledWith("1");

  fireEvent.click(queryByTestId("radio-5-input"));
  expect(onClick).toBeCalledTimes(3);
  expect(onClick).lastCalledWith(5);
});