// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1132-25632&m=dev
/*
 * Expect a default slotted element
 * Can have a label or an icon as attribute
 * Can have an open attribute
 * Should contain a button to open/close
 * Should emit an opened/closed event (target=this)
 */
import { html } from "lit";
import "~icons/mingcute/building-5-line";

describe("<tems-vertical-accordion>", () => {
  it("should mount", () => {
    cy.mount(html`<tems-vertical-accordion></tems-vertical-accordion>`);

    cy.get("tems-vertical-accordion").should("exist");
  });

  const defaultLabel = "Hello World";
  const defaultSlottedElement = html`${defaultLabel}`;
  const defaultIcon = html`<icon-mingcute-building-5-line></icon-mingcute-building-5-line>`;

  it("should handle label attribute", () => {
    cy.mount(
      html`<tems-vertical-accordion
        label=${defaultLabel}
      ></tems-vertical-accordion>`,
    );

    cy.get("tems-vertical-accordion")
      .find("button")
      .first()
      .contains(defaultLabel);
  });

  it("should handle icon attribute", () => {
    cy.mount(
      html`<tems-vertical-accordion
        .icon=${defaultIcon}
      ></tems-vertical-accordion>`,
    );

    cy.get("tems-vertical-accordion")
      .find("button")
      .first()
      .find("icon-mingcute-building-5-line")
      .should("exist");
  });

  it("should not display the slotted element when not open", () => {
    cy.mount(
      html`<tems-vertical-accordion
        >${defaultSlottedElement}</tems-vertical-accordion
      >`,
    );

    cy.get("tems-vertical-accordion").find("div").should("not.exist");
  });

  it("should display the slotted element when open", () => {
    cy.mount(
      html`<tems-vertical-accordion open=""
        >${defaultSlottedElement}</tems-vertical-accordion
      >`,
    );

    cy.get("tems-vertical-accordion").find("slot").should("exist");
  });

  it("should handle opening/closing", () => {
    cy.mount(
      html`<tems-vertical-accordion
        >${defaultSlottedElement}</tems-vertical-accordion
      >`,
    );

    cy.get("tems-vertical-accordion").as("accordion");
    cy.get("@accordion").find("div").should("not.exist");
    cy.get("@accordion").find("button").first().click();
    cy.get("@accordion").should("have.attr", "open");
    cy.get("@accordion").find("div").should("exist");
  });

  it("should emit a click event", () => {
    const onOpenedSpy = cy.spy().as("handleOpened");
    const onClosedSpy = cy.spy().as("handleClosed");
    cy.mount(
      html`<tems-vertical-accordion
        @opened=${onOpenedSpy}
        @closed=${onClosedSpy}
        >${defaultSlottedElement}</tems-vertical-accordion
      >`,
    );

    cy.get("tems-vertical-accordion").find("button").first().as("button");

    cy.get("@button").click();

    cy.get("@handleOpened").should(
      "have.been.called",
      Cypress.sinon.match({
        detail: { target: Cypress.sinon.match.any },
      }),
    );

    cy.get("@button").click();

    cy.get("@handleClosed").should(
      "have.been.called",
      Cypress.sinon.match({
        detail: { target: Cypress.sinon.match.any },
      }),
    );
  });
});