import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render } from "@testing-library/react";
import {
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  CardImg,
  CardLink,
  CardSubtitle,
  CardText,
  CardTitle
} from "../../";

test("should show Card with simple text", () => {
  const textMessage = "This is some text within a card body.";
  const { queryByTestId } = render(
    <Card>
      <CardBody>{textMessage}</CardBody>
    </Card>
  );

  expect(queryByTestId("honey-ui-card")).toBeTruthy();
  expect(queryByTestId("honey-ui-card")).toHaveClass("card");
  expect(queryByTestId("honey-ui-card-body")).toBeTruthy();
  expect(queryByTestId("honey-ui-card-body")).toHaveClass("card-body");
  expect(queryByTestId("honey-ui-card-body")).toHaveTextContent(textMessage);
});

test("should show Card with title, subtitle, text and link", () => {
  const { queryByTestId } = render(
    <Card>
      <CardBody>
        <CardTitle>Card title</CardTitle>
        <CardSubtitle>Card subtitle</CardSubtitle>
        <CardText>Card text</CardText>
        <CardLink href="#">Card link</CardLink>
      </CardBody>
    </Card>
  );

  const cardTitle = queryByTestId("honey-ui-card-title");
  expect(cardTitle).toBeTruthy();
  expect(cardTitle).toHaveClass("card-title");
  expect(cardTitle).toHaveTextContent("Card title");

  const cardSubtitle = queryByTestId("honey-ui-card-subtitle");
  expect(cardSubtitle).toBeTruthy();
  expect(cardSubtitle).toHaveClass("card-subtitle");
  expect(cardSubtitle).toHaveTextContent("Card subtitle");

  const cardText = queryByTestId("honey-ui-card-text");
  expect(cardText).toBeTruthy();
  expect(cardText).toHaveClass("card-text");
  expect(cardText).toHaveTextContent("Card text");

  const cardLink = queryByTestId("honey-ui-card-link");
  expect(cardLink).toBeTruthy();
  expect(cardLink).toHaveClass("card-link");
  expect(cardLink).toHaveTextContent("Card link");
  expect(cardLink && cardLink.getAttribute("href")).toEqual("#");
});

test("should show Card with header and footer", () => {
  const { queryByTestId } = render(
    <Card>
      <CardHeader>Card header</CardHeader>
      <CardBody>
        <CardTitle>Card title</CardTitle>
        <CardText>Card text</CardText>
      </CardBody>
      <CardFooter>Card footer</CardFooter>
    </Card>
  );

  const cardHeader = queryByTestId("honey-ui-card-header");
  expect(cardHeader).toBeTruthy();
  expect(cardHeader).toHaveClass("card-header");
  expect(cardHeader).toHaveTextContent("Card header");

  const cardFooter = queryByTestId("honey-ui-card-footer");
  expect(cardFooter).toBeTruthy();
  expect(cardFooter).toHaveClass("card-footer");
  expect(cardFooter).toHaveTextContent("Card footer");
});

test("should show Card with image", () => {
  const { queryByTestId } = render(
    <Card>
      <CardImg src="https://via.placeholder.com/150" variant="top" alt="..." />
      <CardBody>
        <CardText>Card text</CardText>
      </CardBody>
    </Card>
  );

  const cardImg = queryByTestId("honey-ui-card-img");
  expect(cardImg).toBeTruthy();
  expect(cardImg).toHaveClass("card-img");
  expect(cardImg).toHaveClass("card-image-top");
  expect(cardImg && cardImg.getAttribute("src")).toEqual("https://via.placeholder.com/150");
  expect(cardImg && cardImg.getAttribute("alt")).toEqual("...");
});

test("should show Card with with custom background and outline", () => {
  const { queryByTestId } = render(
    <Card className="text-white bg-primary">
      <CardHeader className="border-white">Header</CardHeader>
      <CardBody>
        <CardTitle>Primary card title</CardTitle>
        <CardText>White text</CardText>
      </CardBody>
    </Card>
  );

  const card = queryByTestId("honey-ui-card");
  expect(card).toBeTruthy();
  expect(card).toHaveClass("card text-white bg-primary");

  const cardHeader = queryByTestId("honey-ui-card-header");
  expect(cardHeader).toBeTruthy();
  expect(cardHeader).toHaveClass("card-header border-white");
});