// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1235-8451&m=dev
/*
 * <tems-datepicker-item
 *   active=""
 *   label="99"
 *   selected="">
 *   <button active="" selected="">99</button>
 * </tems-datepicker-item>
 */
import { html } from "lit";

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

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

  const defaultText = "99";

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

    cy.get("tems-datepicker-item").as("datepicker-item");

    cy.get("@datepicker-item")
      .find("button")
      .and("have.css", "height", "24px")
      .contains(defaultText);
  });

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

    cy.get("tems-datepicker-item").as("datepicker-item");

    cy.get("@datepicker-item").invoke("attr", "active").should("exist");

    cy.get("@datepicker-item")
      .find("button")
      .and("have.css", "background-color", "rgb(255, 255, 255)")
      .and("have.css", "border-color", "rgb(255, 33, 242)");
  });

  it("should handle selected attribute", () => {
    cy.mount(
      html`<tems-datepicker-item
        selected=""
        label=${defaultText}
      ></tems-datepicker-item>`,
    );

    cy.get("tems-datepicker-item").as("datepicker-item");

    cy.get("@datepicker-item").invoke("attr", "selected").should("exist");

    cy.get("@datepicker-item").find("button").should("have.attr", "selected");
    cy.get("@datepicker-item")
      .find("button")
      .and("have.css", "background-color", "rgb(255, 33, 242)");
  });

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

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

    cy.get("@handleClick").should("have.been.called");
  });
});