const handlebars = require('handlebars');
const schema = require('./data/eds-c-header-new.schema.json');
const exampleJson = require('./data/eds-c-header-new.example.json');
const fs = require('fs');
const path = require('path');
const formSchema = require('../eds-c-form/data/eds-c-form.schema.json');
const inputSchema = require('../eds-c-input/data/eds-c-input.schema.json');
const errorSummarySchema = require('../eds-c-error-summary/data/eds-c-error-summary.schema.json');
const errorMessageSchema = require('../eds-c-error-message/data/eds-c-error-message.schema.json');
const labelSchema = require('../eds-c-label/data/eds-c-label.schema.json');
const hintSchema = require('../eds-c-hint/data/eds-c-hint.schema.json');
const buttonSchema = require('../eds-c-button/data/eds-c-button.schema.json');
const navigationSchema = require('../eds-c-navigation/data/eds-c-navigation.schema.json');
const accordionSchema = require('../eds-c-accordion/data/eds-c-accordion.schema.json');
const dataAttributesSchema = require('../eds-c-data-attributes/data/eds-c-data-attributes.schema.json');

const componentTemplate = '{{> eds-c-header-new }}';
const {findTemplates} = require('../../development/tests/templateLoader.js');
const { validateSchema } = require('../../development/tests/validate-schema');
findTemplates(['eds-c-header-new', 'eds-c-accordion', 'eds-c-navigation', 'eds-c-input', 'eds-c-button', 'eds-c-data-attributes']).load(handlebars);

const templateHeader = handlebars.compile(componentTemplate);
const renderedHeader = templateHeader(exampleJson);

describe('EDS Component Header New', () => {

    const element = {};

    beforeEach(() => {
        document.body.innerHTML = renderedHeader;
        element.header = document.querySelector('[data-eds-c-header-new]');

    });

    afterEach(() => {
        document.body.innerHTML = '';
    });

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

describe('Header New 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-form', schema: formSchema },
            { name: 'eds-c-input', schema: inputSchema },
            { name: 'eds-c-error-summary', schema: errorSummarySchema },
            { name: 'eds-c-error-message', schema: errorMessageSchema },
            { name: 'eds-c-label', schema: labelSchema },
            { name: 'eds-c-hint', schema: hintSchema },
            { name: 'eds-c-button', schema: buttonSchema },
            { name: 'eds-c-navigation', schema: navigationSchema },
            { name: 'eds-c-accordion', schema: accordionSchema },
            { name: 'eds-c-data-attributes', schema: dataAttributesSchema }
        ]);
        expect(valid).toBeTruthy();
    });
    
    test('Template can be compiled and rendered', () => {
        document.body.innerHTML = renderedHeader;
        const container = document.querySelector('*');
        expect(container).not.toBeNull();
    });
    
    test('Template passes basic HTML accessibility', async () => {
        expect(await axe(renderedHeader)).toHaveNoViolations();
    });
});
