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

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

  it("should display the current month and year", () => {
    const now = new Date();
    const month = now.toLocaleDateString("en-US", { month: "long" });
    const year = now.getFullYear();

    cy.mount(html`<tems-datepicker></tems-datepicker>`);
    cy.get("tems-datepicker")
      .find(".month-year")
      .should("contain", `${month} ${year}`);
  });

  it("should allow navigating to the previous month", () => {
    cy.mount(html`<tems-datepicker></tems-datepicker>`);
    cy.get("tems-datepicker").find("button").eq(1).click();
    cy.get("tems-datepicker")
      .find(".month-year")
      .should(
        "not.contain",
        new Date().toLocaleDateString("en-US", { month: "long" }),
      );
  });

  it("should allow navigating to the next month", () => {
    cy.mount(html`<tems-datepicker></tems-datepicker>`);
    cy.get("tems-datepicker").find("button").eq(2).click();
    cy.get("tems-datepicker")
      .find(".month-year")
      .should(
        "not.contain",
        new Date().toLocaleDateString("en-US", { month: "long" }),
      );
  });

  it("should allow selecting a date", () => {
    cy.mount(html`<tems-datepicker></tems-datepicker>`);

    cy.get("tems-datepicker")
      .find(".days-grid tems-datepicker-item[label='1']")
      .first()
      .click();
    cy.get("tems-datepicker").then((el) =>
      expect(el.prop("value").toISOString()).to.be.equal(
        new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          1,
        ).toISOString(),
      ),
    );
  });

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

    cy.get("tems-datepicker")
      .find(".days-grid tems-datepicker-item[label='1']")
      .first()
      .click();

    cy.get("@handleChange").should("have.been.calledOnce");
  });

  it("should display days from the previous month to fill the first week", () => {
    cy.mount(html`<tems-datepicker></tems-datepicker>`);
    cy.get("tems-datepicker")
      .find(".days-grid tems-datepicker-item[disabled]")
      .first()
      .should("have.attr", "disabled");
  });

  it("should display days from the next month to fill the last week", () => {
    cy.mount(html`<tems-datepicker></tems-datepicker>`);
    cy.get("tems-datepicker")
      .find(".days-grid tems-datepicker-item[disabled]")
      .last()
      .should("have.attr", "disabled");
  });
});