const fs = require("fs");
const puppeteer = require("puppeteer");
const { toMatchImageSnapshot } = require("jest-image-snapshot");
const initial_data = JSON.parse(fs.readFileSync("./initial_data.json"));
expect.extend({ toMatchImageSnapshot });

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

let browser;
let page;

beforeAll(async () => {
    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}/products`);
});

afterAll(async () => {
    await browser.close();
});

describe("Testing the products page title and content", () => {
    it("should have the right title", async () => {
        const title = await page.title();
        expect(
            title,
            `The title for the web page "${title}" is wrong it should be "API-Experiment | Products" Make sure that the function handling the GET "/products" route is sending the right title`,
            options
        ).toBe("API-Experiment | Products");
    });

    it("should have a header with the text 'Products' with 'title' class", async () => {
        const header = await page.$eval(".title", (el) => el.textContent);
        expect(
            header,
            `The header with the text "Products" is not present on the page`,
            options
        ).toBe("Products");
    });

    it("should have the search form with the three inputs and the submit button", async () => {
        const inputs = await page.$$("input");
        expect(
            inputs.length,
            `The number of inputs in the search form is wrong, it should be 3`,
            options
        ).toBe(3);

        const button = await page.$eval(
            "form > button.btn.btn-primary",
            (el) => el.textContent
        );
        expect(
            button,
            `The submit button is not present on the page`,
            options
        ).toBeTruthy();
        expect(
            button,
            `The submit button should have the text "Search", but it has "${button}"`,
            options
        ).toBe("Search");
    });

    it("should have the correct form action and method", async () => {
        const form = await page.$eval("form", (el) => ({
            action: el.action,
            method: el.method,
        }));
        expect(
            form.action,
            `The form action should be "http://localhost:${process.env.PORT}/products", but it has "${form.action}", You can change it in the "web/views/products/index.ejs" file.`,
            options
        ).toBe(`http://localhost:${process.env.PORT}/products`);
        expect(
            form.method,
            `The form method should be "GET", but it has "${form.method}", You can change it in the "web/views/products/index.ejs" file.`,
            options
        ).toBe("get");
    });

    it("should the right inputs names and types", async () => {
        const search_input = await page.$eval("#search", (el) => ({
            name: el.name,
            type: el.type,
        }));
        expect(
            search_input.name,
            `The first input should have the name "search", but it has "${search_input.name}"`,
            options
        ).toBe("search");
        expect(
            search_input.type,
            `The first input should have the type "text", but it has "${search_input.type}"`,
            options
        ).toBe("text");

        const minPrice_input = await page.$eval("#minPrice", (el) => ({
            name: el.name,
            type: el.type,
        }));
        expect(
            minPrice_input.name,
            `The second input should have the name "price[minPrice]", but it has "${minPrice_input.name}"`,
            options
        ).toBe("price[minPrice]");
        expect(
            minPrice_input.type,
            `The second input should have the type "number", but it has "${minPrice_input.type}"`,
            options
        ).toBe("number");

        const maxPrice_input = await page.$eval("#maxPrice", (el) => ({
            name: el.name,
            type: el.type,
        }));
        expect(
            maxPrice_input.name,
            `The third input should have the name "price[maxPrice]", but it has "${maxPrice_input.name}"`,
            options
        ).toBe("price[maxPrice]");
        expect(
            maxPrice_input.type,
            `The third input should have the type "number", but it has "${maxPrice_input.type}"`,
            options
        ).toBe("number");
    });

    it("should have a button to create a new product", async () => {
        const button = await page.$eval(".btn.btn-primary", (el) => ({
            text: el.textContent,
            url: el.href,
        }));
        expect(
            button.text,
            `The button to create a new product should have the text "Create a new product", but it has "${button.text}"`,
            options
        ).toBe("Create a new product");
        expect(
            button.url,
            `The button to create a new product should have the url "http://localhost:${process.env.PORT}/products/create", but it has "${button.url}"`,
            options
        ).toBe(`http://localhost:${process.env.PORT}/products/create`);
    });
});

describe("Testing the products page table", () => {
    it("should have the right number of products", async () => {
        const products = await page.$$("tbody tr");
        expect(
            products.length,
            `The number of products is wrong, it should be 10`,
            options
        ).toBe(10);
    });

    it("should have the right data", async () => {
        const products_data = await page.$$eval("tbody tr", (rows) =>
            rows.map((row) => {
                const [no, name, price, description, slug] = row.children;
                return {
                    name: name.textContent,
                    price: parseFloat(price.textContent.replace("$", "")),
                    description: description.textContent,
                    slug: slug.children[0].href.split("/show/").pop(),
                };
            })
        );

        initial_data.forEach((product) => {
            delete product._id;
            delete product.createdAt;
            delete product.updatedAt;
        });

        products_data.sort((a, b) => a.name.localeCompare(b.name));
        initial_data.sort((a, b) => a.name.localeCompare(b.name));

        expect(products_data, `The products data is wrong`, options).toEqual(
            initial_data
        );
    });
});

describe("Testing the products details page", () => {
    it("should go to the details page when clicking on a product", async () => {
        await page.click("tbody tr:first-child a");
        const url = await page.url();
        const slug = url.split("/show/").pop();
        const product = initial_data.find((product) => product.slug === slug);
        expect(
            product,
            `The product with the slug "${slug}" is not present in the initial_data.json file`,
            options
        ).toBeTruthy();
        expect(
            url,
            `The url for the details page is wrong, it should be "http://localhost:${process.env.PORT}/products/show/${product.slug}", but it is "${url}"`,
            options
        ).toBe(
            `http://localhost:${process.env.PORT}/products/show/${product.slug}`
        );
    });

    it("should have the button to edit and delete the product", async () => {
        await page.click("tbody tr:first-child a");
        const url = await page.url();
        const slug = url.split("/show/").pop();
        const product = initial_data.find((product) => product.slug === slug);
        const productName = await page.$eval(
            ".card-title",
            (el) => el.textContent
        );
        const productPrice = await page.$eval(
            ".card-subtitle",
            (el) => el.textContent
        );
        const productDescription = await page.$eval(
            ".card-text",
            (el) => el.textContent
        );
        const editButton = await page.$eval("a.btn", (el) => ({
            text: el.textContent.trim(),
            url: el.href.trim(),
        }));
        const deleteButton = await page.$eval("form > button.btn", (el) => ({
            text: el.textContent.trim(),
            url: el.parentElement.action.trim(),
        }));

        expect(
            productName,
            `The product name is wrong, it should be "${product.name}", but it is "${productName}"`,
            options
        ).toBe(product.name);
        expect(
            productPrice,
            `The product price is wrong, it should be "${product.price}", but it is "$${productPrice}"`,
            options
        ).toBe("$" + product.price);
        expect(
            productDescription,
            `The product description is wrong, it should be "${product.description}", but it is "${productDescription}"`,
            options
        ).toBe(product.description);
        expect(
            editButton.text,
            `The edit button should have the text "Edit this product", but it has "${editButton.text}", change it in the "views/products/details.ejs" file`,
            options
        ).toBe("Edit this product");
        expect(
            editButton.url,
            `The edit button should have the url "http://localhost:${process.env.PORT}/products/update/${product.slug}", but it has "${editButton.url}", make sure you are using the correct slug by using "/products/update/<%= product.slug %>" url, change it in the "views/products/details.ejs" file`,
            options
        ).toBe(
            `http://localhost:${process.env.PORT}/products/update/${product.slug}`
        );
        expect(
            deleteButton.text,
            `The delete button should have the text "Delete this product", but it has "${deleteButton.text}", change it in the "views/products/details.ejs" file`,
            options
        ).toBe("Delete this product");
        expect(
            deleteButton.url,
            `The delete button should have the url "http://localhost:${process.env.PORT}/products/delete/${product.slug}", but it has "${deleteButton.url}", make sure you are using the correct slug by using "/products/delete/<%= product.slug %>" url, change it in the "views/products/details.ejs" file`,
            options
        ).toBe(
            `http://localhost:${process.env.PORT}/products/delete/${product.slug}`
        );
    });

    it("should don't go to the product's details page if the product does not exist", async () => {
        await page.goto(
            `http://localhost:${process.env.PORT}/products/show/123thisproductdoenotexist`
        );

        const title = await page.title();
        expect(
            title,
            `The title for the web page "${title}" is wrong it should be "API-Experiment | Error" Make sure that the function handling the GET getProduct method return the error title if the product was not found`,
            options
        ).toBe("API-Experiment | Error");
        const statusCode = await page.$eval(".title", (el) => el.textContent);
        expect(
            statusCode,
            `The status code "${statusCode}" is wrong it should be "404" Make sure that the function handling the GET getProduct method return the error status code if the product was not found`,
            options
        ).toBe("404");
        const message = await page.$eval(".message", (el) => el.textContent);
        expect(
            message,
            `The message "${message}" is wrong it should be "No product found" Make sure that the function handling the GET getProduct method return the error message if the product was not found`,
            options
        ).toBe("No product found");
    });
});

describe("Testing the product pages image snapshots", () => {
    it("should have the right image for the products page", async () => {
        if (!fs.existsSync("tests/web/images/products-table-page.png")) {
            throw new Error(
                `The reference image for the products table page does not exist, please import the image from the "tests/web/images/products-table-page.png"`
            );
        }

        const image = await page.screenshot({ fullPage: true });
        expect(
            image,
            `The image for the products table page is wrong, it should be the same as the "tests/web/images/__diff_output__/products-table-page-diff.png" image`,
            options
        ).toMatchImageSnapshot({
            customDiffConfig: { threshold: 0.9 },
            customSnapshotsDir: "tests/web/images",
            customSnapshotIdentifier: "products-table-page",
        });
    });

    it("should have the right image for the details page", async () => {
        if (!fs.existsSync("tests/web/images/product-details-page.png")) {
            throw new Error(
                `The reference image for the product details page does not exist, please import the image from the "tests/web/images/product-details-page.png"`
            );
        }

        await page.goto(
            `http://localhost:${process.env.PORT}/products/show/${initial_data[0].slug}`
        );
        const image = await page.screenshot({ fullPage: true });
        expect(
            image,
            `The image for the product details page is wrong, it should be the same as the "tests/web/images/__diff_output__/product-details-page-diff.png" image`,
            options
        ).toMatchImageSnapshot({
            customDiffConfig: { threshold: 0.9 },
            customSnapshotsDir: "tests/web/images",
            customSnapshotIdentifier: "product-details-page",
        });
    });

    it("should match the not found product snapshot", async () => {
        if (!fs.existsSync("tests/web/images/not-found-product-page.png")) {
            throw new Error(
                `The reference image for the not found product page does not exist, please import the image from the "tests/web/images/not-found-product-page.png"`
            );
        }

        await page.goto(
            `http://localhost:${process.env.PORT}/products/show/123`
        );
        const image = await page.screenshot({ fullPage: true });
        expect(
            image,
            `The image for the not found product page is wrong, it should be the same as the "tests/web/images/__diff_output__/not-found-product-page-diff.png" image`
        ).toMatchImageSnapshot({
            customDiffConfig: { threshold: 0.9 },
            customSnapshotsDir: "tests/web/images",
            customSnapshotIdentifier: "not-found-product-page",
        });
    });

    it("should match no products found snapshot", async () => {
        if (!fs.existsSync("tests/web/images/no-products-found-page.png")) {
            throw new Error(
                `The reference image for the no products found page does not exist, please import the image from the "tests/web/images/no-products-found-page.png"`
            );
        }

        await page.goto(
            `http://localhost:${process.env.PORT}/products?search=123ThisIsNotAProduct`
        );
        const image = await page.screenshot({ fullPage: true });
        expect(
            image,
            `The image for the no products found page is wrong, it should be the same as the "tests/web/images/__diff_output__/no-products-found-page-diff.png" image`
        ).toMatchImageSnapshot({
            customDiffConfig: { threshold: 0.9 },
            customSnapshotsDir: "tests/web/images",
            customSnapshotIdentifier: "no-products-found-page",
        });
    });
});