// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=82-1655&m=dev
import { html } from "lit";

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

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

  it("should render an hidden input type checkbox", () => {
    cy.mount(html`<tems-toggle></tems-toggle>`);

    cy.get("tems-toggle").find("label").as("toggle");
    cy.get("tems-toggle").find("input").as("checkbox");
    cy.get("@checkbox")
      .should("exist")
      .and("have.attr", "type", "checkbox")
      .and("not.be.checked");

    cy.get("@toggle").click();
    cy.get("@checkbox").should("be.checked");

    cy.get("@toggle").click();
    cy.get("@checkbox").should("not.be.checked");
  });

  it("should reflect its value as an accessible value property", () => {
    cy.mount(html`<tems-toggle></tems-toggle>`);
    cy.get("tems-toggle").find("label").click();
    cy.get("tems-toggle").should("have.attr", "value", "true");
  });

  it("should emit a change event when value change", () => {
    const onChangeSpy = cy.spy().as("handleChange");
    cy.mount(html`<tems-toggle @change=${onChangeSpy}></tems-toggle>`);

    cy.get("tems-toggle").find("label").click();

    cy.get("@handleChange").should(
      "have.been.called",
      Cypress.sinon.match({
        detail: { value: true },
      }),
    );

    cy.get("tems-toggle").find("label").click();

    cy.get("@handleChange").should(
      "have.been.calledWith",
      Cypress.sinon.match({
        detail: { value: false },
      }),
    );
  });

  it("should render an hidden input type checkbox, checked with a value of true, when value is true", () => {
    cy.mount(html`<tems-toggle value="true"></tems-toggle>`);
    cy.get("tems-toggle").find("input").should("be.checked");
    cy.get("tems-toggle").should("have.attr", "value", "true");
  });

  it("should render an hidden input type checkbox, not checked with a value of false, when value is false", () => {
    cy.mount(html`<tems-toggle value="false"></tems-toggle>`);
    cy.get("tems-toggle").find("input").should("not.be.checked");
    cy.get("tems-toggle").should("have.attr", "value", "false");
  });

  it("should handle a disabled attribute", () => {
    cy.mount(html`<tems-toggle disabled=""></tems-toggle>`);

    cy.get("tems-toggle")
      .find("input")
      .should("have.attr", "type", "checkbox")
      .and("be.disabled");
  });

  it("should handle a size attribute", () => {
    cy.mount(html`<tems-toggle size="sm"></tems-toggle>`);
    cy.get("tems-toggle")
      .should("have.css", "height", "20px")
      .and("have.css", "width", "36px");

    cy.mount(html`<tems-toggle size="md"></tems-toggle>`);
    cy.get("tems-toggle")
      .should("have.css", "height", "25px")
      .and("have.css", "width", "43px");
  });

  it("should default to size sm", () => {
    cy.mount(html`<tems-toggle></tems-toggle>`);
    cy.get("tems-toggle").should("have.attr", "size", "sm");
  });
});