import { html } from "lit";

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

  it("should display header and content", () => {
    const header = "Test Header";
    const content = "Test Content";
    cy.mount(
      html`<tems-card-catalog
        header=${header}
        content=${content}
      ></tems-card-catalog>`,
    );
    cy.get("tems-card-catalog").find(".card-header").contains(header);
    cy.get("tems-card-catalog").find(".card-content").contains(content);
  });

  it("should display badge", () => {
    const badge = "Test Badge";
    cy.mount(
      html`<tems-card-catalog full-size="" badge=${badge}></tems-card-catalog>`,
    );
    cy.get("tems-card-catalog").find("tems-badge").contains(badge);
  });

  it("should display tags", () => {
    const tags = ["Tag 1", "Tag 2"];
    cy.mount(html`<tems-card-catalog .tags=${tags}></tems-card-catalog>`);
    cy.get("tems-card-catalog")
      .find(".tags")
      .children()
      .should("have.length", tags.length);
    cy.get("tems-card-catalog")
      .find(".tags")
      .children()
      .first()
      .contains(tags[0]);
  });

  it("should display address", () => {
    const address = "Test Address";
    cy.mount(html`<tems-card-catalog address=${address}></tems-card-catalog>`);
    cy.get("tems-card-catalog").find(".address").contains(address);
  });

  it("should display source", () => {
    const source = "https://test.com";
    cy.mount(html`<tems-card-catalog source=${source}></tems-card-catalog>`);
    cy.get("tems-card-catalog")
      .find(".source")
      .contains(source);
  });

  it("should display language and date", () => {
    const language = "Test Language";
    const date = "Test Date";
    cy.mount(
      html`<tems-card-catalog
        language=${language}
        date=${date}
      ></tems-card-catalog>`,
    );
    cy.get("tems-card-catalog").find(".lang-date").contains(language);
    cy.get("tems-card-catalog").find(".lang-date").contains(date);
  });

  it("should display logo on top", () => {
    cy.mount(
      html`<tems-card-catalog
        display-logo
        org-logo="https://test.com/logo.png"
      ></tems-card-catalog>`,
    );
    cy.get("tems-card-catalog").find(".orgLogo").should("exist");
  });

  it("should display background image", () => {
    const backgroundImg = "https://test.com/image.png";
    cy.mount(
      html`<tems-card-catalog
        full-size=""
        background-img=${backgroundImg}
      ></tems-card-catalog>`,
    );
    cy.get("tems-card-catalog")
      .find(".image")
      .should(
        "have.css",
        "background-image",
        'url("https://test.com/image.png")',
      );
  });

  it("should handle card-type attribute", () => {
    cy.mount(html`<tems-card-catalog type="horizontal"></tems-card-catalog>`);
    cy.get("tems-card-catalog")
      .find("article")
      .should("have.class", "horizontal");

    cy.mount(html`<tems-card-catalog type="vertical"></tems-card-catalog>`);
    cy.get("tems-card-catalog")
      .find("article")
      .should("have.class", "vertical");

    cy.mount(html`<tems-card-catalog type="bill-image"></tems-card-catalog>`);
    cy.get("tems-card-catalog")
      .find("article")
      .should("have.class", "billImage");
  });

  it("should display logo on top and org logo", () => {
    const orgLogo = "https://test.com/logo.png";
    cy.mount(
      html`<tems-card-catalog
        display-logo
        org-logo=${orgLogo}
      ></tems-card-catalog>`,
    );
    cy.get("tems-card-catalog").find(".orgLogo").should("exist");
  });

  it("should display background image and badge", () => {
    const backgroundImg = "https://test.com/image.png";
    const badge = "Test Badge";
    cy.mount(
      html`<tems-card-catalog
        full-size=""
        background-img=${backgroundImg}
        badge=${badge}
      ></tems-card-catalog>`,
    );
    cy.get("tems-card-catalog")
      .find(".image")
      .should(
        "have.css",
        "background-image",
        'url("https://test.com/image.png")',
      );
    cy.get("tems-card-catalog").find("tems-badge").contains(badge);
  });

  it("should render correctly with default values", () => {
    cy.mount(html`<tems-card-catalog></tems-card-catalog>`);
    cy.get("tems-card-catalog")
      .find("article")
      .should("have.class", "vertical");
  });

  it("should handle empty header and content", () => {
    cy.mount(
      html`<tems-card-catalog header="" content=""></tems-card-catalog>`,
    );
    cy.get("tems-card-catalog").find(".card-header").should("not.exist");
    cy.get("tems-card-catalog").find(".card-content").should("not.exist");
  });

  it("should handle empty tags", () => {
    cy.mount(html`<tems-card-catalog .tags=${[]}></tems-card-catalog>`);
    cy.get("tems-card-catalog").find(".tags").should("not.exist");
  });

  it("should handle empty address", () => {
    cy.mount(html`<tems-card-catalog address=""></tems-card-catalog>`);
    cy.get("tems-card-catalog").find(".address").should("not.exist");
  });

  it("should handle empty source", () => {
    cy.mount(html`<tems-card-catalog source=""></tems-card-catalog>`);
    cy.get("tems-card-catalog").find(".source").should("not.exist");
  });

  it("should handle empty language and date", () => {
    cy.mount(html`<tems-card-catalog language="" date=""></tems-card-catalog>`);
    cy.get("tems-card-catalog").find(".lang-date").should("not.exist");
  });
});