import { login } from "./helpers";

describe("notification list page", () => {
  beforeEach(() => {
    cy.manageCommand("cypress_reset");
    cy.manageCommand("create_default_notifications");
  });

  it("can paginate notifications", () => {
    login("admin", "test");
    cy.visit("/notifications");

    cy.get('[data-cy="no-notifications"]').should("not.exist");
    cy.get("[data-cy^=notification-idx-]").should("have.length", 7);
    // All notifications shall be marker as unread
    cy.get("[data-cy^=notification-idx-]")
      .first()
      .within(() => {
        cy.get('[data-cy="unread"]').should("exist");
      });

    // We load additional 7 notifications
    cy.get('[data-cy="load-more-notifications"]').click();
    cy.get("[data-cy^=notification-idx-]").should("have.length", 13);

    for (let i = 0; i < 7; i++) {
      cy.get(`[data-cy=notification-idx-${i}]`).within(() => {
        cy.get('[data-cy="unread"]').should("not.exist");
      });
    }
    for (let i = 7; i < 13; i++) {
      cy.get(`[data-cy=notification-idx-${i}]`)
        .first()
        .within(() => {
          cy.get('[data-cy="unread"]').should("exist");
        });
    }
  });

  it("can click notifications", () => {
    login("admin", "test");
    cy.visit("/notifications");

    cy.get('[data-cy="no-notifications"]').should("not.exist");
    cy.get("[data-cy=notification-target-idx-0]").click();
    cy.location().should((loc) => {
      expect(loc.pathname).to.eq("/");
    });
  });
});

describe("notification popover", () => {
  beforeEach(() => {
    cy.manageCommand("cypress_reset");
    cy.manageCommand("create_default_notifications");
  });

  function toggleNotificationPopover() {
    cy.get('[data-cy="notification-bell-button"]')
      .filter(":visible")
      .click({ force: true });
  }

  it("displays four notifications", () => {
    login("admin", "test");
    cy.visit("/");

    toggleNotificationPopover();
    cy.get("[data-cy^=notification-idx-]").should("have.length", 4);
  });

  it("can show all notifications", () => {
    login("admin", "test");
    cy.visit("/");

    toggleNotificationPopover();
    cy.get('[data-cy="show-all-notifications"]').click({ force: true });
    cy.location().should((loc) => {
      expect(loc.pathname).to.eq("/notifications");
    });
  });
});

describe("email notification settings", () => {
  beforeEach(() => {
    cy.manageCommand("cypress_reset");
    cy.manageCommand("create_default_notifications");
  });

  it("can update email notification settings", () => {
    login("admin", "test");
    cy.visit("/settings");

    // Checking prerequisites
    cy.get('[data-cy="it-checkbox-USER_INTERACTION"]').should(
      "have.class",
      "cy-unchecked"
    );
    cy.get('[data-cy="it-checkbox-INFORMATION"]').should(
      "have.class",
      "cy-unchecked"
    );
    cy.get('[data-cy="it-checkbox-PROGRESS"]').should(
      "have.class",
      "cy-unchecked"
    );

    // there is maybe a timing problem with the api endpoint
    // so for the test we will only click once at time...
    cy.get('[data-cy="it-checkbox-USER_INTERACTION"]').click();

    cy.wait(500);
    cy.reload();
    cy.get('[data-cy="it-checkbox-USER_INTERACTION"]').should(
      "have.class",
      "cy-checked"
    );
    cy.get('[data-cy="it-checkbox-INFORMATION"]').should(
      "have.class",
      "cy-unchecked"
    );
    cy.get('[data-cy="it-checkbox-PROGRESS"]').should(
      "have.class",
      "cy-unchecked"
    );

    cy.get('[data-cy="it-checkbox-INFORMATION"]').click();

    cy.wait(500);
    cy.reload();
    cy.get('[data-cy="it-checkbox-USER_INTERACTION"]').should(
      "have.class",
      "cy-checked"
    );
    cy.get('[data-cy="it-checkbox-INFORMATION"]').should(
      "have.class",
      "cy-checked"
    );
    cy.get('[data-cy="it-checkbox-PROGRESS"]').should(
      "have.class",
      "cy-unchecked"
    );
  });
});
