const schema = require('./data/eds-c-breadcrumbs.schema.json');
const dataAttributesSchema = require('../eds-c-data-attributes/data/eds-c-data-attributes.schema.json');
const exampleJson = require('./data/eds-c-breadcrumbs.example.json');
const fs = require('node:fs');
const path = require('node:path');
const componentTemplate = '{{> eds-c-breadcrumbs }}';
const handlebars = require('handlebars');

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

const componentHbs = handlebars.compile(componentTemplate);
const renderedComponent = componentHbs(exampleJson);

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

describe('Breadcrumbs 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('Breadcrumbs data attributes are correct', () => {
        document.body.innerHTML = renderedComponent;

        const navElement = document.querySelector('nav');
        expect(navElement.getAttribute('data-test')).toEqual('breadcrumb-test');
    });

    test('Breadcrumbs custom class are correct', () => {
        document.body.innerHTML = renderedComponent;

        const navElement = document.querySelector('nav');
        expect(navElement.classList.contains('my-custom-classname')).toBe(true);
    });

    test('Link data attributes are correct', () => {
        document.body.innerHTML = renderedComponent;

        const link = document.querySelector('.eds-c-breadcrumbs__item a');
        expect(link.getAttribute('data-track')).toEqual('click||click_breadcrumb');
        expect(link.getAttribute('data-track-context')).toEqual('springer-link');
        expect(link.getAttribute('data-track-label')).toEqual('publisher homepage link');
    });

    test('Item attributes are correct', () => {
        document.body.innerHTML = renderedComponent;

        const itemElement = document.querySelector('.eds-c-breadcrumbs__item');
        expect(itemElement.getAttribute('id')).toEqual('breadcrumb-item-publisher-home');
        expect(itemElement.querySelector('[itemprop="name"]').textContent.trim()).toEqual('Home');
        expect(itemElement.querySelector('meta').getAttribute('content')).toEqual('1');
    });

    test('Icon element should be present', () => {
        document.body.innerHTML = renderedComponent;
        const icon = document.querySelector('.eds-c-breadcrumbs__icon');
        const xlinkHref = icon.querySelector('use').getAttribute('xlink:href');
        expect(icon).not.toBeNull();
        expect(xlinkHref).toBe('#eds-i-chevron-right-small');
    });

    test('Template passes basic HTML accessibility', async () => {
        expect(await axe(renderedComponent)).toHaveNoViolations();
    });
});