const schema = require('./data/eds-c-pagination.schema.json');
const exampleJson = require('./data/eds-c-pagination.example.json');
const fs = require('node:fs');
const path = require('node:path');
const handlebars = require('handlebars');

const {findTemplates} = require('../../development/tests/templateLoader.js');
const { validateSchema } = require('../../development/tests/validate-schema');
const dataAttributesSchema = require('../eds-c-data-attributes/data/eds-c-data-attributes.schema.json');
findTemplates(['eds-c-pagination', 'eds-c-data-attributes']).load(handlebars);

const componentTemplate = '{{> eds-c-pagination}}';
const componentHbs = handlebars.compile(componentTemplate);
const renderedComponent = componentHbs(exampleJson);

describe('EDS Component Pagination', () => {
    test('docs file exists', () => {
        const exists = fs.existsSync(path.resolve(__dirname, 'docs.md'));
        expect(exists).toBe(true);
    });
});

describe('Pagination Schema Validation and Accessibility Test', () => {

    const { configureAxe, toHaveNoViolations } = require('jest-axe');
    expect.extend(toHaveNoViolations);
    
    const axe = configureAxe({
        rules: {
            region: { enabled: false }
        }
    });

    test('Example data matches schema', () => {
        const valid = validateSchema(schema, exampleJson, [
            { name: 'eds-c-data-attributes', schema: dataAttributesSchema }
        ]);
        expect(valid).toBeTruthy();
    });

    test('Template can be compiled and rendered', () => {
        document.body.innerHTML = renderedComponent;
        const container = document.querySelector('nav');
        expect(container.getAttribute('aria-label')).toBe('Pagination (Page 1 of 8)');
    });

    test('Should not render previous link', () => {
        document.body.innerHTML = renderedComponent;
        const prevLinkElement = document.querySelector('.eds-c-pagination .eds-c-pagination__item--prev');
        expect(prevLinkElement).toBe(null);
    });

    test('Should render previous link', () => {
        const {prev} = exampleJson;
        const testData = {
            ...exampleJson,
            'prev': {
                ...prev,
                "previousExists": true
            }
        };

        document.body.innerHTML = componentHbs(testData);
        const prevLinkElement = document.querySelector('.eds-c-pagination .eds-c-pagination__item--prev .eds-c-pagination__link');
        expect(prevLinkElement).not.toBeNull();
        expect(prevLinkElement.getAttribute('href')).toBe('https://www.somelink.com/2');
        expect(prevLinkElement .textContent.replace(/\s+/g, ' ').trim()).toBe('Previous page');
    });

    test('Should render previous link data attributes', () => {
        const {prev} = exampleJson;
        const testData = {
            ...exampleJson,
            'prev': {
                ...prev,
                "previousExists": true
            }
        };
        document.body.innerHTML = componentHbs(testData);
        const prevLinkElement = document.querySelector('.eds-c-pagination .eds-c-pagination__item--prev .eds-c-pagination__link');
        expect(prevLinkElement.getAttribute('data-test')).toEqual('prev-link-test');
        expect(prevLinkElement.getAttribute('data-track-context')).toEqual('prev-springer-link');
        expect(prevLinkElement.getAttribute('data-track-content-type')).toEqual('collection');
        expect(prevLinkElement.getAttribute('data-track-label')).toEqual('collection');
    });

    test('Should render prev icon', () => {
        const {prev} = exampleJson;
        const testData = {
            ...exampleJson,
            'prev': {
                ...prev,
                "previousExists": true
            }
        };

        document.body.innerHTML = componentHbs(testData);
        const icon = document.querySelector('.eds-c-pagination .eds-c-pagination__item--prev .eds-c-pagination__icon');
        const xlinkHref = icon.querySelector('use').getAttribute('xlink:href');
        expect(icon).not.toBeNull();
        expect(xlinkHref).toBe('#eds-i-chevron-left-medium');
    });

    test('Should not render next link', () => {
        const {next} = exampleJson;
        const testData = {
            ...exampleJson,
            'next': {
                ...next,
                "nextExists": false
            }
        };

        document.body.innerHTML = componentHbs(testData);

        const nextLinkElement = document.querySelector('.eds-c-pagination .eds-c-pagination__item--next');
        expect(nextLinkElement).toBe(null);
    });

    test('Should render next link', () => {
        document.body.innerHTML = renderedComponent;
        const nextLinkElement = document.querySelector('.eds-c-pagination .eds-c-pagination__item--next .eds-c-pagination__link');
        expect(nextLinkElement).not.toBeNull();
        expect(nextLinkElement.getAttribute('href')).toBe('https://www.somelink.com/4');
        expect(nextLinkElement .textContent.replace(/\s+/g, ' ').trim()).toBe('Next page');
    });

    test('Should render next link data attributes', () => {
        document.body.innerHTML = renderedComponent;
        const nextLinkElement = document.querySelector('.eds-c-pagination .eds-c-pagination__item--next .eds-c-pagination__link');
        expect(nextLinkElement.getAttribute('data-test')).toEqual('next-link-test');
        expect(nextLinkElement.getAttribute('data-track-context')).toEqual('next-springer-link');
        expect(nextLinkElement.getAttribute('data-track-content-type')).toEqual('collection');
        expect(nextLinkElement.getAttribute('data-track-label')).toEqual('collection');
    });

    test('Should render next icon', () => {
        document.body.innerHTML = renderedComponent;
        const icon = document.querySelector('.eds-c-pagination .eds-c-pagination__item--next .eds-c-pagination__icon');
        const xlinkHref = icon.querySelector('use').getAttribute('xlink:href');
        expect(icon).not.toBeNull();
        expect(xlinkHref).toBe('#eds-i-chevron-right-medium');
    });

    test('Should render page link', () => {
        document.body.innerHTML = renderedComponent;
        const pageLinkElement = document.querySelector('.eds-c-pagination .eds-c-pagination__item:not(.eds-c-pagination__item--prev):not(.eds-c-pagination__item--next) .eds-c-pagination__link:not(.eds-c-pagination__link--active)');
        expect(pageLinkElement).not.toBeNull();
        expect(pageLinkElement.getAttribute('aria-label')).toBe('Page 2');
        expect(pageLinkElement.getAttribute('href')).toBe('https://www.somelink.com/2');
        expect(pageLinkElement .textContent.replace(/\s+/g, ' ').trim()).toBe('2');
    });

    test('Should render page link data attributes', () => {
        document.body.innerHTML = renderedComponent;
				console.log(renderedComponent);
        const pageLinkElement = document.querySelector('.eds-c-pagination .eds-c-pagination__item:not(.eds-c-pagination__item--prev):not(.eds-c-pagination__item--next) .eds-c-pagination__link:not(.eds-c-pagination__link--active)');
        expect(pageLinkElement.getAttribute('data-test')).toEqual('link-test');
        expect(pageLinkElement.getAttribute('data-track-context')).toEqual('springer-link');
        expect(pageLinkElement.getAttribute('data-track-content-type')).toEqual('collection');
        expect(pageLinkElement.getAttribute('data-track-label')).toEqual('collection');
    });

    test('Should render active link', () => {
        document.body.innerHTML = renderedComponent;
        const nextLinkElement = document.querySelector('.eds-c-pagination .eds-c-pagination__link--active');
        expect(nextLinkElement).not.toBeNull();
    });
    
    test('Template passes basic HTML accessibility', async () => {
        expect(await axe(renderedComponent)).toHaveNoViolations();
    });
});
