const schema = require('./data/eds-c-status-message.schema.json');
const exampleJson = require('./data/eds-c-status-message.example.json');
const fs = require('fs');
const path = require('path');
const componentTemplate = '{{> eds-c-status-message }}';
const Ajv = require("ajv");
const ajv = new Ajv();
const handlebars = require('handlebars');

const {findTemplates} = require('../../development/tests/templateLoader.js');
findTemplates(['eds-c-status-message']).load(handlebars);

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

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

describe('Status message 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 validate = ajv.compile(schema);
        const valid = validate(exampleJson);
    
        if (!valid) {
            // Extract and format the Ajv validation errors
            const errors = validate.errors.map((error) => ajv.errorsText([error])).join('\n');
            throw new Error(errors);
        }
    
        expect(valid).toBeTruthy();
    });
    
    test('Template can be compiled and rendered', () => {
        document.body.innerHTML = renderedComponent;
        const container = document.querySelector('*');
        expect(container).toBeDefined();
    });
    
    test('Template passes basic HTML accessibility', async () => {
        expect(await axe(renderedComponent)).toHaveNoViolations();
    });

    test('Title element should be rendered when withTitle is true', () => {
        const testData = { ...exampleJson, withTitle: true };
        const renderedComponent = componentHbs(testData);
        document.body.innerHTML = renderedComponent;
        const titleElement = document.querySelector('.eds-c-status-message__title');
        expect(titleElement).toBeTruthy();
    });

    test('Title element should not be rendered when withTitle is false', () => {
    const testData = { ...exampleJson, withTitle: false };
    const renderedComponent = componentHbs(testData);
    document.body.innerHTML = renderedComponent;
    const titleElement = document.querySelector('.eds-c-status-message__title');
    expect(titleElement).toBeFalsy();
  });

    test('Dismiss button should be rendered when dismissable is true', () => {
        const testData = { ...exampleJson, dismissable: true };
        const renderedComponent = componentHbs(testData);
        document.body.innerHTML = renderedComponent;
        const dismissButton = document.querySelector('.eds-c-status-message__dismiss-button');
        expect(dismissButton).toBeTruthy();
    });

    test('Dismiss button should not be rendered when dismissable is false', () => {
        const testData = { ...exampleJson, dismissable: false };
        const renderedComponent = componentHbs(testData);
        document.body.innerHTML = renderedComponent;
        const dismissButton = document.querySelector('.eds-c-status-message__dismiss-button');
        expect(dismissButton).toBeFalsy();
    });

    test('Dismiss button should have an icon', () => {
        const testData = { ...exampleJson, dismissable: true };
        const renderedComponent = componentHbs(testData);
        document.body.innerHTML = renderedComponent;
        const dismissButton = document.querySelector('.eds-c-status-message__dismiss-button');
        const dismissIcon = dismissButton.querySelector('.eds-c-status-message__dismiss-icon');
        expect(dismissIcon).toBeTruthy();
    });

    test('Title should have a link', () => {
        const testData = { ...exampleJson, message: 'This is a longer description of the success message, to provide extra information about something that is working. <a href=\"https://example.com\">a link</a>' };
        const renderedComponent = componentHbs(testData);
        document.body.innerHTML = renderedComponent;
        const titleElement = document.querySelector('.eds-c-status-message__message');
        const anchorTag = titleElement.querySelector('a');
        expect(anchorTag).toBeTruthy();
    });
});