const fs = require("fs");
const bcrypt = require("bcryptjs");
const puppeteer = require("puppeteer");
const mongoose = require("mongoose");
const { toMatchImageSnapshot } = require("jest-image-snapshot");
expect.extend({ toMatchImageSnapshot });

require("dotenv").config();
const options = {
  showPrefix: false,
  showMatcherMessage: true,
  showStack: true,
};

let browser;
let page;

const user = {
  name: "John Doe",
  username: "johndoe",
  email: "johndoe@gmail.com",
  password: "12345678",
};

beforeAll(async () => {
  mongoose.set("strictQuery", true);
  await mongoose.connect(process.env.MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });
  await mongoose.connection
    .collection("users")
    .findOneAndDelete({ username: user.username });

  user.password = bcrypt.hashSync(user.password, bcrypt.genSaltSync(10));
  await mongoose.connection.collection("users").insertOne(user);
  user.password = "12345678";

  browser = await puppeteer.launch({
    headless: true,
    slowMo: 0,
    devtools: false,
    defaultViewport: {
      width: 1024,
      height: 768,
    },
  });
  page = await browser.newPage();
  await page.setDefaultTimeout(10000);
  await page.setDefaultNavigationTimeout(20000);
});

beforeEach(async () => {
  await page.goto(`http://localhost:${process.env.PORT}/login`);
});

afterAll(async () => {
  await mongoose.connection
    .collection("users")
    .findOneAndDelete({ username: user.username });
  await mongoose.connection.close();
  await browser.close();
});

describe("Testing the edit page", () => {
  it("should login a user", async () => {
    await page.type("#username", user.username);
    await page.type("#password", user.password);
    await page.click("button");
    await new Promise((resolve) => setTimeout(resolve, 1000));

    const url = await page.url();
    expect(
      url,
      `The user should be redirected to the profile page after logging in, the current url is "${url}"`,
      options
    ).toBe(`http://localhost:${process.env.PORT}/profile`);
  });

  it("should have the name, username, email inputs in the edit page", async () => {
    await page.goto(`http://localhost:${process.env.PORT}/profile`);
    await page.click(".action > a:nth-child(1)");
    const url = await page.url();
    expect(
      url,
      `The user should be redirected to the edit page after clicking the edit button, the current url is "${url}"`,
      options
    ).toBe(`http://localhost:${process.env.PORT}/profile/update`);

    const nameInput = await page.$eval("#name", (el) => ({
      type: el.type,
      value: el.value,
    }));
    const usernameInput = await page.$eval("#username", (el) => ({
      type: el.type,
      value: el.value,
    }));
    const emailInput = await page.$eval("#email", (el) => ({
      type: el.type,
      value: el.value,
    }));
    expect(
      nameInput,
      `The name input should be present in the edit page, it should be of type "text" and the value should be same to the user's data`,
      options
    ).toEqual({
      type: "text",
      value: user.name,
    });
    expect(
      usernameInput,
      `The username input should be present in the edit page, it should be of type "text" and the value should be same to the user's data`,
      options
    ).toEqual({
      type: "text",
      value: user.username,
    });
    expect(
      emailInput,
      `The email input should be present in the edit page, it should be of type "email" and the value should be same to the user's data`,
      options
    ).toEqual({
      type: "email",
      value: user.email,
    });
  });

  it("should not update the user's data if the inputs are empty", async () => {
    await page.goto(`http://localhost:${process.env.PORT}/profile`);
    await page.click(".action > a:nth-child(1)");
    let nameInput = await page.$("#name");
    await nameInput.click({ clickCount: 3 });
    await nameInput.press("Backspace");

    await page.click("button");
    await new Promise((resolve) => setTimeout(resolve, 1000));

    const message = await page.$eval(".message", (el) => el.textContent);

    expect(
      message,
      `The user should not be able to update the data if the inputs are empty, the message should be "Please fill out the following required field(s): name"`,
      options
    ).toBe("Please fill out the following required field(s): name");
  });

  it("should update the user's data", async () => {
    await page.goto(`http://localhost:${process.env.PORT}/profile`);
    await page.click(".action > a:nth-child(1)");
    let nameInput = await page.$("#name");
    await nameInput.click({ clickCount: 3 });
    await nameInput.press("Backspace");
    await nameInput.type("John Doe updated");
    await page.click("button");
    await new Promise((resolve) => setTimeout(resolve, 1000));

    const newname = await page.$eval("#name", (el) => el.value);
    expect(
      newname,
      `The user should be able to update the data, the name should be updated to after submitting the form`,
      options
    ).toBe("John Doe updated");
  });

  it("should have three inputs for the password", async () => {
    await page.goto(`http://localhost:${process.env.PORT}/profile`);
    await page.click(".action > a:nth-child(2)");
    const url = await page.url();
    expect(
      url,
      `The user should be redirected to the password page after clicking the password button, the current url is "${url}"`,
      options
    ).toBe(`http://localhost:${process.env.PORT}/profile/update/password`);

    const passwordInput = await page.$eval("#newPassword", (el) => ({
      type: el.type,
      name: el.name,
    }));
    const passwordConfirmInput = await page.$eval(
      "#confirmNewPassword",
      (el) => ({
        type: el.type,
        name: el.name,
      })
    );
    const passwordCurrentInput = await page.$eval("#currentPassword", (el) => ({
      type: el.type,
      name: el.name,
    }));
    expect(
      passwordInput,
      `The new password input should be present in the password page, it should be of type "password" and the name should be "newPassword"`,
      options
    ).toEqual({
      type: "password",
      name: "newPassword",
    });
    expect(
      passwordConfirmInput,
      `The confirm new password input should be present in the password page, it should be of type "password" and the name should be "confirmNewPassword"`,
      options
    ).toEqual({
      type: "password",
      name: "confirmNewPassword",
    });
    expect(
      passwordCurrentInput,
      `The current password input should be present in the password page, it should be of type "password" and the name should be "currentPassword"`,
      options
    ).toEqual({
      type: "password",
      name: "currentPassword",
    });
  });

  it("should update the user's password", async () => {
    await page.goto(`http://localhost:${process.env.PORT}/profile`);
    await page.click(".action > a:nth-child(2)");
    let newPasswordInput = await page.$("#newPassword");
    await newPasswordInput.type("123456789");

    let confirmNewPasswordInput = await page.$("#confirmNewPassword");
    await confirmNewPasswordInput.type("123456789");

    let currentPasswordInput = await page.$("#currentPassword");
    await currentPasswordInput.type("12345678");

    await page.click("button");
    await new Promise((resolve) => setTimeout(resolve, 1000));

    const message = await page.$eval(".message", (el) => el.textContent);
    expect(
      message,
      `The user message after updating the password should be "Password Updated Successfully"`,
      options
    ).toBe("Password Updated Successfully");
  });

  it("should not update the user's password if the current password is wrong", async () => {
    await page.goto(`http://localhost:${process.env.PORT}/profile`);
    await page.click(".action > a:nth-child(2)");
    let newPasswordInput = await page.$("#newPassword");
    await newPasswordInput.type("123456789");
    let confirmNewPasswordInput = await page.$("#confirmNewPassword");
    await confirmNewPasswordInput.type("123456789");
    let currentPasswordInput = await page.$("#currentPassword");
    await currentPasswordInput.type("12345678");

    await page.click("button");
    await new Promise((resolve) => setTimeout(resolve, 1000));

    const message = await page.$eval(".message", (el) => el.textContent);

    expect(
      message,
      `If the current password is wrong the user message after updating the password should be "Incorrect Password"`,
      options
    ).toBe("Incorrect Password");
  });
});

describe("Testing the edit page image snapshots", () => {
  it("matches the expected styling for the edit page", async () => {
    if (!fs.existsSync("tests/web/images/edit-page.png")) {
      throw new Error(
        `The reference image for the edit page does not exist, please import the image from the "tests/web/images/edit-page.png"`
      );
    }
    await page.goto(`http://localhost:${process.env.PORT}/profile`);
    await page.click(".action > a:nth-child(1)");
    const screenshot = await page.screenshot({ fullPage: true });
    expect(
      screenshot,
      `The web styling for the edit page is not correct check the file "tests/web/images/__diff_output__/edit-page-diff.png" to find the difference`,
      options
    ).toMatchImageSnapshot({
      customDiffConfig: { threshold: 0.9 },
      customSnapshotsDir: "tests/web/images",
      customSnapshotIdentifier: "edit-page",
    });
  });

  it("matches the expected styling for the edit password page", async () => {
    if (!fs.existsSync("tests/web/images/edit-password-page.png")) {
      throw new Error(
        `The reference image for the edit password page does not exist, please import the image from the "tests/web/images/edit-password-page.png"`
      );
    }
    await page.goto(`http://localhost:${process.env.PORT}/profile`);
    await page.click(".action > a:nth-child(2)");
    const screenshot = await page.screenshot({ fullPage: true });
    expect(
      screenshot,
      `The web styling for the edit password page is not correct check the file "tests/web/images/__diff_output__/edit-password-page-diff.png" to find the difference`,
      options
    ).toMatchImageSnapshot({
      customDiffConfig: { threshold: 0.9 },
      customSnapshotsDir: "tests/web/images",
      customSnapshotIdentifier: "edit-password-page",
    });
  });
});