// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1205-69213&m=dev
import { html } from "lit";
import "~icons/heroicons-outline/selector";
import "~icons/mingcute/rows-3-line";

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

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

  const defaultLabel = "Label";
  const defaultIconLeft = html`<icon-heroicons-outline-selector></icon-heroicons-outline-selector>`;
  const defaultIconRight = html`<icon-mingcute-rows-3-line></icon-mingcute-rows-3-line>`;
  const defaultIconAsLeftSlot = html`<icon-heroicons-outline-selector
    slot="icon-left"
  ></icon-heroicons-outline-selector>`;
  const defaultIconAsRightSlot = html`<icon-mingcute-rows-3-line
    slot="icon-right"
  ></icon-mingcute-rows-3-line>`;
  const defaultAction = "sample-action";

  it("should display label", () => {
    cy.mount(html`<tems-button label=${defaultLabel}></tems-button>`);

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

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

    cy.get("tems-button")
      .find("button")
      .should("have.css", "background-color", "rgb(255, 33, 242)");

    cy.mount(
      html`<tems-button
        type="outline-color"
        label=${defaultLabel}
      ></tems-button>`,
    );

    cy.get("tems-button")
      .find("button")
      .should("have.css", "background-color", "rgba(0, 0, 0, 0)");
  });

  it("should handle iconLeft property", () => {
    cy.mount(
      html`<tems-button
        .iconLeft=${defaultIconLeft}
        label=${defaultLabel}
      ></tems-button>`,
    );

    cy.get("tems-button")
      .find("button")
      .find("icon-heroicons-outline-selector")
      .should("exist");
  });

  it("should handle iconRight property", () => {
    cy.mount(
      html`<tems-button
        .iconRight=${defaultIconRight}
        label=${defaultLabel}
      ></tems-button>`,
    );

    cy.get("tems-button")
      .find("button")
      .find("icon-mingcute-rows-3-line")
      .should("exist");
  });

  it("should accept slots", () => {
    cy.mount(html`<tems-button><span>${defaultLabel}</span></tems-button>`);

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

  it("should accept named slots", () => {
    cy.mount(
      html`<tems-button><span slot="label">${defaultLabel}</span></tems-button>`,
    );

    cy.get("tems-button")
      .find("button")
      .find("slot[name='label']")
      .should("exist");

    cy.mount(
      html`<tems-button label=${defaultLabel}
        >${defaultIconAsLeftSlot}</tems-button
      >`,
    );

    cy.get("tems-button")
      .find("button")
      .find("slot[name='icon-left']")
      .should("exist");

    cy.mount(
      html`<tems-button label=${defaultLabel}
        >${defaultIconAsRightSlot}</tems-button
      >`,
    );

    cy.get("tems-button")
      .find("button")
      .find("slot[name='icon-right']")
      .should("exist");

    cy.mount(
      html`<tems-button
        ><span slot="label">${defaultLabel}</span
        >${defaultIconAsLeftSlot}${defaultIconAsRightSlot}</tems-button
      >`,
    );
    cy.get("tems-button").find("button").as("input");

    cy.get("@input").find("slot[name='icon-left']").should("exist");
    cy.get("@input").find("slot[name='label']").should("exist");
    cy.get("@input").find("slot[name='icon-right']").should("exist");
  });

  it("should handle a size attribute", () => {
    cy.mount(html`<tems-button size="sm" label=${defaultLabel}></tems-button>`);
    cy.get("tems-button").should("have.css", "height", "40px");

    cy.mount(html`<tems-button size="md" label=${defaultLabel}></tems-button>`);
    cy.get("tems-button").should("have.css", "height", "44px");

    cy.mount(html`<tems-button size="lg" label=${defaultLabel}></tems-button>`);
    cy.get("tems-button").should("have.css", "height", "54px");
  });

  it("should default to size md", () => {
    cy.mount(html`<tems-button label=${defaultLabel}></tems-button>`);
    cy.get("tems-button").should("have.attr", "size", "md");
  });

  it("should emit a click event", () => {
    const onClickedSpy = cy.spy().as("handleClick");
    cy.mount(
      html`<tems-button
        label=${defaultLabel}
        action=${defaultAction}
        @clicked=${onClickedSpy}
      ></tems-button>`,
    );

    cy.get("tems-button").find("button").click();

    cy.get("@handleClick").should(
      "have.been.calledOnce",
      Cypress.sinon.match({
        detail: { target: defaultAction },
      }),
    );
  });

  it("should emit a click event with itself as target when missing action", () => {
    const onClickedSpy = cy.spy().as("handleClick");
    cy.mount(html`<tems-button
      label=${defaultLabel}
      @clicked=${onClickedSpy}
    ></tems-button>`);

    cy.get("tems-button").find("button").click();

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