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

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

  const defaultLabel = "Label";
  const defaultPlaceholder = "Placeholder";
  const defaultValue = "Sample text";
  const defaultHint = "Hint copy";
  const typedText = "User{enter}";
  const typeSequence = "Uss{backspace}err{backspace}{enter}";
  const expectedValue = "User";

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

  it("should display placeholder", () => {
    cy.mount(html`<tems-input placeholder=${defaultPlaceholder}></tems-input>`);
    cy.get("tems-input")
      .find("input")
      .should("have.attr", "placeholder", defaultPlaceholder);
  });

  it("should display hint", () => {
    cy.mount(html`<tems-input hint=${defaultHint}></tems-input>`);
    cy.get("tems-input").find(".hint").contains(defaultHint);
  });

  it("should display value", () => {
    cy.mount(html`<tems-input .value=${defaultValue}></tems-input>`);
    cy.get("tems-input").find("input").should("have.value", defaultValue);
  });

  it("should be disabled", () => {
    cy.mount(html`<tems-input disabled></tems-input>`);
    cy.get("tems-input").find("input").should("be.disabled");
  });

  it("should allow typing", () => {
    cy.mount(html`<tems-input></tems-input>`);
    cy.get("tems-input").find("input").type(typedText);
    cy.get("tems-input").find("input").should("have.value", expectedValue);
  });

  it("should reflect typed text to its value", () => {
    cy.mount(html`<tems-input></tems-input>`);

    cy.get("tems-input").find("input").type(typedText);
    cy.get("tems-input").should("have.value", expectedValue);
  });

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

    cy.get("tems-input").find("input").type(typeSequence);

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

  it("should handle different types", () => {
    cy.mount(html`<tems-input type="email"></tems-input>`);
    cy.get("tems-input").find("input").should("have.attr", "type", "email");
    cy.mount(html`<tems-input type="password"></tems-input>`);
    cy.get("tems-input").find("input").should("have.attr", "type", "password");
  });

  it("should display icon", () => {
    cy.mount(
      html`<tems-input
        .icon=${html`<span class="custom-icon">Icon</span>`}
      ></tems-input>`,
    );
    cy.get("tems-input").find(".custom-icon").should("exist");
  });

  it("should display pretab", () => {
    cy.mount(
      html`<tems-input type="text" .pretabLabel=${"Pretab"}></tems-input>`,
    );
    cy.get("tems-input").find("tems-input-pretab").contains("Pre");
  });
});