const schema = require('./data/eds-c-fieldset.schema.json');
const exampleJson = require('./data/eds-c-fieldset.example.json');
const inputSchema = require('../eds-c-input/data/eds-c-input.schema.json');
const hintSchema = require('../eds-c-hint/data/eds-c-hint.schema.json');
const labelSchema = require('../eds-c-label/data/eds-c-label.schema.json');
const errorMessageSchema = require('../eds-c-error-message/data/eds-c-error-message.schema.json');
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-fieldset', 'eds-c-radio', 'eds-c-input', 'eds-c-label', 'eds-c-hint', 'eds-c-error-message', 'eds-c-data-attributes']).load(handlebars);

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

describe('Label 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 },
            { name: 'eds-c-input', schema: inputSchema },
            { name: 'eds-c-label', schema: labelSchema },
            { name: 'eds-c-hint', schema: hintSchema },
            { name: 'eds-c-error-message', schema: errorMessageSchema }
        ]);
        expect(valid).toBeTruthy();
    });

    test('Container should render correct attributes', () => {
        const testData = { ...exampleJson, id: 'my-legend-id', formId: 'my-form-id' };
        document.body.innerHTML = componentHbs(testData);
        const fieldsetElement = document.querySelector('.eds-c-fieldset');
        expect(fieldsetElement.getAttribute('id')).toBe('my-legend-id');
        expect(fieldsetElement.getAttribute('name')).toBe('fieldset-one');
        expect(fieldsetElement.getAttribute('form')).toBe('my-form-id');
    });

    test('Fieldset hint is rendered', () => {
        document.body.innerHTML = renderedComponent;

        const hintElement = document.querySelector('.eds-c-hint');
        expect(hintElement).not.toBeNull();
        expect(hintElement.textContent.trim()).toBe('You should not have a car');
    });

    test('Fieldset error is rendered', () => {
        document.body.innerHTML = renderedComponent;

        const errorElement = document.querySelector('.eds-c-error-message');
        const fieldsetElement = document.querySelector('.eds-c-fieldset');
        expect(errorElement).not.toBeNull();
        expect(errorElement.textContent.trim()).toBe('Error: error copy here!');
        expect(fieldsetElement.hasAttribute('invalid')).toBeTruthy();
        expect(fieldsetElement.getAttribute('aria-invalid')).toBeTruthy();
        expect(fieldsetElement.getAttribute('aria-describedby')).toBe('error-eds-fieldset-one');
    });

    test('Fieldset should render ui settings', () => {
        document.body.innerHTML = renderedComponent;

        const fieldsetElement = document.querySelector('.eds-c-fieldset .l-stack');
        expect(fieldsetElement.getAttribute('style')).toBe('--stack--gap: 0.5rem');
    });
    
    test('Template passes basic HTML accessibility', async () => {
        expect(await axe(renderedComponent)).toHaveNoViolations();
    });
});