// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=908-9440&m=dev
/*
 * <tems-checkbox
 *   type="checkbox"
 *   value="true">
 *   <input type="checkbox" checked="" />
 * </tems-checkbox>
 */
import { html } from "lit";

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

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

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

    cy.get("tems-checkbox")
      .find("input")
      .should("exist")
      .and("have.attr", "type", "checkbox")
      .and("not.be.checked")
      .check()
      .should("be.checked")
      .uncheck()
      .should("not.be.checked");
  });

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

    cy.get("tems-checkbox")
      .find("input")
      .should("exist")
      .and("have.attr", "type", "checkbox")
      .and("not.be.checked")
      .check()
      .should("be.checked");
  });

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

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

    cy.get("tems-checkbox").find("input").check();

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

    cy.get("tems-checkbox").find("input").uncheck();

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

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

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

  it("should render an input type radio when type is radio", () => {
    cy.mount(
      html`<tems-checkbox
        type="radio"
        name="groupName"
        value="apples"
      ></tems-checkbox>`,
    );

    cy.get("tems-checkbox")
      .find("input")
      .should("exist")
      .and("have.attr", "type", "radio")
      .and("have.attr", "name", "groupName")
      .and("have.attr", "value", "apples")
      .and("not.be.checked")
      .check()
      .should("be.checked");
  });

  // it("should handle multiple radios with the same name", () => {
  //   // This test may be moved on the parent component
  //   cy.mount(html`
  //     <tems-checkbox type="radio" name="groupName" value="apples"></tems-checkbox>
  //     <tems-checkbox type="radio" name="groupName" value="oranges"></tems-checkbox>
  //     <tems-checkbox type="radio" name="groupName" value="bananas"></tems-checkbox>
  //   `);

  //   cy.get("tems-checkbox['value=apples']").find("input").as("apples");
  //   cy.get("tems-checkbox['value=oranges']").find("input").as("oranges");
  //   cy.get("tems-checkbox['value=bananas']").find("input").as("bananas");

  //   cy.get("@apples")
  //     .should("have.attr", "type", "radio")
  //     .and("have.attr", "name", "groupName")
  //     .and("have.attr", "value", "apples")
  //     .and("not.be.checked");

  //   cy.get("@oranges")
  //     .should("have.attr", "type", "radio")
  //     .and("have.attr", "name", "groupName")
  //     .and("have.attr", "value", "apples")
  //     .and("not.be.checked");

  //   cy.get("@bananas")
  //     .should("have.attr", "type", "radio")
  //     .and("have.attr", "name", "groupName")
  //     .and("have.attr", "value", "apples")
  //     .and("not.be.checked");

  //   cy.get("@apples").check().should("be.checked");
  //   cy.get("@oranges").should("not.be.checked");
  //   cy.get("@bananas").should("not.be.checked");

  //   cy.get("@oranges").check().should("be.checked");
  //   cy.get("@apples").should("not.be.checked");
  //   cy.get("@bananas").should("not.be.checked");

  //   cy.get("@bananas").check().should("be.checked");
  //   cy.get("@apples").should("not.be.checked");
  //   cy.get("@oranges").should("not.be.checked");
  // });

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

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

  it("should handle an indeterminate attribute", () => {
    cy.mount(html`<tems-checkbox></tems-checkbox>`);

    cy.get("tems-checkbox")
      .find("input")
      .invoke("prop", "indeterminate")
      .should("be.false");

    cy.mount(html`<tems-checkbox indeterminate=""></tems-checkbox>`);

    cy.get("tems-checkbox")
      .find("input")
      .invoke("prop", "indeterminate")
      .should("be.true");
    cy.get("tems-checkbox").find("input:indeterminate").should("exist");
  });

  it("should handle a size attribute", () => {
    cy.mount(html`<tems-checkbox size="xs"></tems-checkbox>`);
    cy.get("tems-checkbox")
      .find("input")
      .should("have.css", "height", "14px")
      .and("have.css", "width", "14px");

    cy.mount(html`<tems-checkbox size="sm"></tems-checkbox>`);
    cy.get("tems-checkbox")
      .find("input")
      .should("have.css", "height", "16px")
      .and("have.css", "width", "16px");

    cy.mount(html`<tems-checkbox size="md"></tems-checkbox>`);
    cy.get("tems-checkbox")
      .find("input")
      .should("have.css", "height", "20px")
      .and("have.css", "width", "20px");
  });

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