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

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

  const defaultProps = {
    min: 0,
    max: 100,
    value: 50,
    valueMax: 75,
  };

  it("should display default values", () => {
    cy.mount(html`<tems-slider></tems-slider>`);

    cy.get("tems-slider")
      .should("have.attr", "min", "0")
      .should("have.attr", "max", "100")
      .should("have.attr", "value", "0");
  });

  it("should handle single mode", () => {
    cy.mount(html`
      <tems-slider
        type="single"
        min=${defaultProps.min}
        max=${defaultProps.max}
        value=${defaultProps.value}
      ></tems-slider>
    `);

    cy.get("tems-slider")
      .find("input[type='range']")
      .should("have.value", defaultProps.value.toString());
  });

  it("should handle multiple mode", () => {
    cy.mount(html`
      <tems-slider
        type="multiple"
        min=${defaultProps.min}
        max=${defaultProps.max}
        value=${defaultProps.value}
        value-max=${defaultProps.valueMax}
      ></tems-slider>
    `);

    cy.get("tems-slider")
      .find(".from-slider")
      .should("have.value", defaultProps.value.toString());

    cy.get("tems-slider")
      .find(".to-slider")
      .should("have.value", defaultProps.valueMax.toString());
  });

  it("should respect min/max constraints", () => {
    cy.mount(html`
      <tems-slider
        type="multiple"
        min="20"
        max="80"
        value="10"
        value-max="90"
      ></tems-slider>
    `);

    cy.get("tems-slider")
      .should("have.attr", "value", "20")
      .should("have.attr", "value-max", "80");
  });

  it("should update slider background in multiple mode", () => {
    cy.mount(html`
      <tems-slider
        type="multiple"
        min=${defaultProps.min}
        max=${defaultProps.max}
        value=${defaultProps.value}
        value-max=${defaultProps.valueMax}
      ></tems-slider>
    `);

    cy.get("tems-slider")
      .find(".to-slider")
      .should("have.css", "background")
      .and("match", /linear-gradient/);
  });
});