import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render } from "@testing-library/react";
import Button from "../button";

const variants = [
  "primary",
  "secondary",
  "success",
  "danger",
  "warning",
  "info",
  "light",
  "dark",
  "link",
  "white",
  "outline-primary",
  "outline-secondary",
  "outline-success",
  "outline-danger",
  "outline-warning",
  "outline-info",
  "outline-light",
  "outline-dark",
  "outline-white"
] as const;

test("shows default button", () => {
  const { queryByTestId } = render(<Button data-testid="btn">Test Button</Button>);

  expect(queryByTestId("btn")).toBeTruthy();
  expect(queryByTestId("btn")).toHaveClass("btn-primary");
});

test("shows custom color disabled button", () => {
  const { queryByTestId } = render(
    <Button data-testid="btn" disabled={true} variant="info">
      Test Button
    </Button>
  );

  expect(queryByTestId("btn")).toBeTruthy();
  expect(queryByTestId("btn")).toHaveClass("btn-info");
  expect(queryByTestId("btn")).toHaveClass("disabled");
});

test("shows different variant buttons", () => {
  variants.forEach((variant: typeof variants[number]) => {
    const { queryByTestId, unmount } = render(
      <Button data-testid="btn" variant={variant}>
        Test Button
      </Button>
    );
    expect(queryByTestId("btn")).toHaveClass(`btn-${variant}`);
    unmount();
  });
});

test("shows different sizes", () => {
  const sm = render(
    <Button data-testid="btn" size="sm">
      Test Button
    </Button>
  );
  expect(sm.queryByTestId("btn")).toHaveClass(`btn-sm`);
  sm.unmount();

  const lg = render(
    <Button data-testid="btn" size="lg">
      Test Button
    </Button>
  );
  expect(lg.queryByTestId("btn")).toHaveClass(`btn-lg`);
  lg.unmount();
});

test("shows different types", () => {
  const button = render(
    <Button data-testid="btn" type="button">
      Test Button
    </Button>
  );
  expect(button.queryByTestId("btn").getAttribute("type")).toEqual("button");
  button.unmount();

  const submit = render(
    <Button data-testid="btn" type="submit">
      Test Button
    </Button>
  );
  expect(submit.queryByTestId("btn").getAttribute("type")).toEqual("submit");
  submit.unmount();

  const reset = render(
    <Button data-testid="btn" type="reset">
      Test Button
    </Button>
  );
  expect(reset.queryByTestId("btn").getAttribute("type")).toEqual("reset");
  reset.unmount();
});

test("shows active state", () => {
  const active = render(
    <Button data-testid="btn" active={true}>
      Test Button
    </Button>
  );
  expect(active.queryByTestId("btn")).toHaveClass("active");
  active.unmount();

  const notActive = render(<Button data-testid="btn">Test Button</Button>);
  expect(notActive.queryByTestId("btn")).not.toHaveClass("btn-lg");
  notActive.unmount();
});

test("shows as block", () => {
  const block = render(
    <Button data-testid="btn" block={true}>
      Test Button
    </Button>
  );
  expect(block.queryByTestId("btn")).toHaveClass("btn-block");
  block.unmount();

  const notBlock = render(<Button data-testid="btn">Test Button</Button>);
  expect(notBlock.queryByTestId("btn")).not.toHaveClass("btn-block");
  notBlock.unmount();
});