// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1235-18127&m=dev
/*
 * Expect named slots (icon, label) or attributes (icon, label)
 * Can have a active attribute
 */
import { html } from "lit";
import "~icons/heroicons-outline/selector";

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

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

  const defaultLabel = "Label";
  const defaultIcon = html`<icon-heroicons-outline-selector></icon-heroicons-outline-selector>`;
  const defaultIconAsSlot = html`<icon-heroicons-outline-selector slot="icon"></icon-heroicons-outline-selector>`;

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

    cy.get("tems-input-pretab").contains(defaultLabel);
  });

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

    cy.get("tems-input-pretab")
      .find("div")
      .should("have.css", "background-color", "rgb(236, 238, 242)");

    cy.mount(
      html`<tems-input-pretab active="" label=${defaultLabel}></tems-input-pretab>`,
    );

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

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

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

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

    cy.get("tems-input-pretab").find("div").find("slot").should("exist");
  });

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

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

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

    cy.get("tems-input-pretab")
      .find("div")
      .find("slot[name='icon']")
      .should("exist");

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

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

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

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

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

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