const schema = require('./data/eds-c-details.schema.json');
const dataAttributesSchema = require('../eds-c-data-attributes/data/eds-c-data-attributes.schema.json');
const exampleJson = require('./data/eds-c-details.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');
findTemplates(['eds-c-details', 'eds-c-data-attributes']).load(handlebars);

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

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

describe('details 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('Details can be compiled and rendered with correct attributes', () => {
        document.body.innerHTML = renderedComponent;
        const detailsElement = document.querySelector('.eds-c-details__details');
        expect(detailsElement.hasAttribute('data-eds-c-details')).toBeTruthy();
        expect(detailsElement.getAttribute('aria-expanded')).toBe('false');
    });

    test('Details can be compiled and rendered with correct attributes when open', () => {
        const testData = { ...exampleJson, open: true };
        document.body.innerHTML = componentHbs(testData);
        const detailsElement = document.querySelector('.eds-c-details__details');
        expect(detailsElement.hasAttribute('open')).toBeTruthy();
        expect(detailsElement.getAttribute('aria-expanded')).toBe('true');
    });

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

        const summaryElement = document.querySelector('.eds-c-details__summary');
        expect(summaryElement.getAttribute('data-test')).toEqual('details-test');
        expect(summaryElement.getAttribute('data-track')).toEqual('some-event-name');
    });

    test('Header element aria-level should be set when headingLevel is set', () => {
        const testData = { ...exampleJson };
        document.body.innerHTML = componentHbs(testData);
        const headerElement = document.querySelector('.eds-c-details__header');
        expect(headerElement.getAttribute('aria-level')).toBe('2');
    });

    test('Title element should be present', () => {
        document.body.innerHTML = renderedComponent;
        const titleElement = document.querySelector('.eds-c-details__title');
        expect(titleElement.textContent.trim()).toBe('Here is a details instance');
    });

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

    test('Content element should be present', () => {
        document.body.innerHTML = renderedComponent;
        const contentElement = document.querySelector('.eds-c-details__content');
        expect(contentElement.textContent.trim()).toBe('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec nulla quis mauris efficitur vestibulum. Duis vel ultrices purus, sit amet efficitur lectus. Aliquam erat volutpat. Vivamus nec nulla quis mauris efficitur vestibulum. Duis vel ultrices purus, sit amet efficitur lectus. Aliquam erat volutpat.');
    });
    
    test('Template passes basic HTML accessibility', async () => {
        expect(await axe(renderedComponent)).toHaveNoViolations();
    });
});