import { jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import { render, fireEvent } from "@testing-library/react";
import { Star, MapPin } from "@gympass/yoga-icons";
import { ThemeProvider, Button, Icon } from "../../..";
import PlanCard from ".";
describe("<PlanCard />", () => {
  const buttonOnClickMock = jest.fn();
  const renderPlan = ({ clickableItems } = {}) => render(
    /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(PlanCard, { children: [
      /* @__PURE__ */ jsx(PlanCard.Tag, { variant: "informative", children: "Recommended Plan" }),
      /* @__PURE__ */ jsxs(
        PlanCard.Content,
        {
          subtitle: "plan",
          title: "Basic",
          currency: "$",
          price: "99.90",
          period: "/month",
          children: [
            /* @__PURE__ */ jsx(PlanCard.Subtitle, { children: "Get access to" }),
            /* @__PURE__ */ jsxs(PlanCard.List, { children: [
              /* @__PURE__ */ jsx(
                PlanCard.ListItem,
                {
                  icon: /* @__PURE__ */ jsx(
                    Icon,
                    {
                      as: MapPin,
                      height: "small",
                      width: "small",
                      stroke: "medium"
                    }
                  ),
                  text: "gyms and studios",
                  onClick: clickableItems && jest.fn()
                }
              ),
              /* @__PURE__ */ jsx(
                PlanCard.ListItem,
                {
                  icon: Star,
                  text: "list item",
                  buttonProps: {
                    children: "button",
                    as: "a",
                    onClick: buttonOnClickMock
                  },
                  onClick: clickableItems && jest.fn()
                }
              )
            ] })
          ]
        }
      ),
      /* @__PURE__ */ jsx(PlanCard.Actions, { children: /* @__PURE__ */ jsx(Button, { full: true, children: "Select this plan" }) })
    ] }) })
  );
  describe("Events", () => {
    it("should call onClick when ListItem has a button", () => {
      const { getByText } = renderPlan();
      fireEvent.click(getByText("button"));
      expect(buttonOnClickMock).toHaveBeenCalled();
    });
    it("should make list item clickable", () => {
      const itemClickMock = jest.fn();
      const { getByRole } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { variant: "energy", children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic", children: /* @__PURE__ */ jsx(PlanCard.List, { children: /* @__PURE__ */ jsx(
          PlanCard.ListItem,
          {
            icon: /* @__PURE__ */ jsx(
              Icon,
              {
                as: MapPin,
                height: "small",
                width: "small",
                stroke: "medium"
              }
            ),
            text: "gyms and studios",
            onClick: itemClickMock
          }
        ) }) }) }) })
      );
      fireEvent.click(getByRole("button", { label: "gyms and studios" }));
      expect(itemClickMock).toHaveBeenCalled();
    });
  });
  describe("Snapshots", () => {
    it("should match snapshot with default PlanCard", () => {
      const { container: planCard } = renderPlan();
      expect(planCard).toMatchSnapshot();
    });
    it("should match snapshot with variant", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { variant: "hope", children: /* @__PURE__ */ jsx(
          PlanCard.Content,
          {
            subtitle: "plan",
            title: "Basic",
            currency: "$",
            price: "99.90",
            period: "/month"
          }
        ) }) })
      );
      expect(container).toMatchSnapshot();
    });
    it("should match snapshot with suffix", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { variant: "hope", children: /* @__PURE__ */ jsx(
          PlanCard.Content,
          {
            subtitle: "plan",
            title: "Basic",
            currency: "$",
            suffix: "MXN",
            price: "99.90",
            period: "/month"
          }
        ) }) })
      );
      expect(container).toMatchSnapshot();
    });
    it("should render the extra content", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic", extra: /* @__PURE__ */ jsx("p", { children: "Hello" }) }) }) })
      );
      expect(container).toMatchSnapshot();
    });
    it("should render the title without a colored badge", () => {
      const { getByText } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic" }) }) })
      );
      expect(getByText("Basic")).toMatchSnapshot();
    });
    it("should render the title with a colored badge", () => {
      const { getByText } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic", badgeColor: "energy" }) }) })
      );
      expect(getByText("Basic")).toMatchSnapshot();
    });
    it("should render the discount", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { discount: "SAVE 40%", variant: "energy", children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic" }) }) })
      );
      expect(container).toMatchSnapshot();
    });
    it("should render list item content as button", () => {
      const { container } = renderPlan({ clickableItems: true });
      expect(container).toMatchSnapshot();
    });
  });
});
