import { jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import { MapPin, ChevronDown } from "@gympass/yoga-icons";
import { ThemeProvider, Chips } from "../..";
describe("<Chips />", () => {
  describe("Snapshots", () => {
    it("should match snapshot", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { children: "Classes" }) })
      );
      expect(container).toMatchSnapshot();
    });
    it("should match snapshot with disabled prop", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { disabled: true, children: "Classes" }) })
      );
      expect(container).toMatchSnapshot();
    });
    it("should match snapshot with more than one Chip", () => {
      const { container } = render(
        /* @__PURE__ */ jsxs(ThemeProvider, { children: [
          /* @__PURE__ */ jsx(Chips, { children: "Classes" }),
          /* @__PURE__ */ jsx(Chips, { children: "Gyms and studios" }),
          /* @__PURE__ */ jsx(Chips, { children: "Personal trainers" })
        ] })
      );
      expect(container).toMatchSnapshot();
    });
    describe("selected", () => {
      it("should match snapshot", () => {
        const { container } = render(
          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { selected: true, children: "Classes" }) })
        );
        expect(container).toMatchSnapshot();
      });
      it("should match snapshot with more than one Chip", () => {
        const { container } = render(
          /* @__PURE__ */ jsxs(ThemeProvider, { children: [
            /* @__PURE__ */ jsx(Chips, { children: "Classes" }),
            /* @__PURE__ */ jsx(Chips, { selected: true, children: "Gyms and studios" }),
            /* @__PURE__ */ jsx(Chips, { selected: true, children: "Personal trainers" })
          ] })
        );
        expect(container).toMatchSnapshot();
      });
    });
    describe("counter", () => {
      it("should match snapshot", () => {
        const { container } = render(
          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { counter: 8, children: "Classes" }) })
        );
        expect(container).toMatchSnapshot();
      });
      it("should match snapshot with more than one Chip", () => {
        const { container } = render(
          /* @__PURE__ */ jsxs(ThemeProvider, { children: [
            /* @__PURE__ */ jsx(Chips, { counter: 8, children: "Classes" }),
            /* @__PURE__ */ jsx(Chips, { counter: 52, selected: true, children: "Gyms and studios" }),
            /* @__PURE__ */ jsx(Chips, { counter: 1732, selected: true, children: "Personal trainers" })
          ] })
        );
        expect(container).toMatchSnapshot();
      });
    });
    describe("icon", () => {
      it("should match selected snapshot", () => {
        const { container } = render(
          /* @__PURE__ */ jsxs(ThemeProvider, { children: [
            /* @__PURE__ */ jsx(Chips, { counter: 8, icon: [MapPin], children: "Location" }),
            /* @__PURE__ */ jsx(Chips, { counter: 8, icon: [MapPin, ChevronDown], children: "Classes" }),
            /* @__PURE__ */ jsx(Chips, { icon: [MapPin, ChevronDown], children: "Gyms and studios" }),
            /* @__PURE__ */ jsx(Chips, { icon: [MapPin], children: "Personal trainers" }),
            /* @__PURE__ */ jsx(Chips, { counter: 8, selected: true, icon: [MapPin], children: "Activities" }),
            /* @__PURE__ */ jsx(Chips, { counter: 8, selected: true, icon: [MapPin, ChevronDown], children: "Language" }),
            /* @__PURE__ */ jsx(Chips, { selected: true, icon: [MapPin, ChevronDown], children: "Categories" }),
            /* @__PURE__ */ jsx(Chips, { selected: true, icon: [MapPin], children: "Availability" })
          ] })
        );
        expect(container).toMatchSnapshot();
      });
    });
  });
  describe("Events", () => {
    it("should toggle", () => {
      const toggleMock = jest.fn();
      const { getByText } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { onClick: toggleMock, children: "Classes" }) })
      );
      fireEvent.click(getByText("Classes"));
      expect(toggleMock).toHaveBeenCalled();
    });
    it("should toggle using onToggle", () => {
      const toggleMock = jest.fn();
      const { getByText } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Chips, { onToggle: toggleMock, children: "Classes" }) })
      );
      fireEvent.click(getByText("Classes"));
      expect(toggleMock).toHaveBeenCalled();
    });
  });
});
