const schema = require('./data/eds-c-button.schema.json');
const exampleJson = require('./data/eds-c-button.example.json');
const fs = require('fs');
const path = require('path');
const Ajv = require("ajv");
const ajv = new Ajv();
const handlebars = require('handlebars');

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


const { configureAxe, toHaveNoViolations } = require('jest-axe');
expect.extend(toHaveNoViolations);

const componentTemplate = '{{> eds-c-button}}';
const template = handlebars.compile(componentTemplate);
const rendered = template(exampleJson);

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 = rendered;
    const container = document.querySelector('*');
    expect(container).toBeDefined();
});

test('Template rendered a link', () => {
    document.body.innerHTML = template({
        "id": "",
        "linkUrl": "https://example.com",
        "text": "I'm a button",
        "icon": "../themes/springernature/img/icons/arrow-right.svg#i-arrow-right",
        "template": "eds-c-buttonIconRight",
        "variant": "primary",
        "size": "small",
        "dataAttributes": [
            {
                "name": "test",
                "value": "my-test"
            }
        ],
    });

    const buttonLink = document.querySelector('.eds-c-button');
    expect(buttonLink && (buttonLink.tagName === 'A' || buttonLink.nodeName === 'A')).toBeTruthy();
    expect(buttonLink.textContent.trim()).toBe('I\'m a button');
    expect(buttonLink.getAttribute('data-test').trim()).toBe('my-test');
});
test('Template rendered a button', () => {
    document.body.innerHTML = template({
        "id": "",
        "dataTest": "my-test",
        "type": "submit",
        "text": "I'm a button",
        "template": "eds-c-buttonPlain",
        "variant": "primary"
    });

    const buttonLink = document.querySelector('.eds-c-button');
    expect(buttonLink && (buttonLink.tagName === 'BUTTON' || buttonLink.nodeName === 'BUTTON')).toBeTruthy();
});
test('Template rendered a button', () => {
    document.body.innerHTML = template({
        "id": "",
        "dataTest": "my-test",
        "type": "submit",
        "text": "I'm a button",
        "template": "eds-c-buttonPlain",
        "variant": "primary"
    });

    const buttonLink = document.querySelector('.eds-c-button');
    expect(buttonLink && (buttonLink.tagName === 'BUTTON' || buttonLink.nodeName === 'BUTTON')).toBeTruthy();
});


test('Template rendered a button with GA tracking', () => {
    document.body.innerHTML = template({
        "id": "",
        "dataTest": "my-test",
        "type": "submit",
        "text": "I'm a button",
        "template": "eds-c-buttonPlain",
        "variant": "primary",
        "dataAttributes": [
            {
                "name": "track",
                "value": "click||click_submit_manuscript_button"
            },
            {
                "name": "track-context",
                "value": "some example context about an event"
            },
            {
                "name": "test",
                "value": "yes-test"
            }
        ]
    });

    const buttonLink = document.querySelector('.eds-c-button');
    expect(buttonLink.getAttribute('data-track')).toBe("click||click_submit_manuscript_button");
    expect(buttonLink.getAttribute('data-track-context')).toBe("some example context about an event");
    expect(buttonLink.getAttribute('data-test')).toBe("yes-test");
});

test('Template rendered a button with jsHook', () => {
    document.body.innerHTML = template({
        "id": "",
        "dataTest": "my-test",
        "type": "submit",
        "text": "I'm a button",
        "template": "eds-c-buttonPlain",
        "variant": "primary",
        "jsHook": "data-track-my-hook"
    });

    const buttonLink = document.querySelector('.eds-c-button');
    expect(buttonLink.getAttribute('data-track-my-hook').trim()).toBeDefined();
});

test('Template rendered a button with jsHook with value', () => {
    document.body.innerHTML = template({
        "id": "",
        "dataTest": "my-test",
        "type": "submit",
        "text": "I'm a button",
        "template": "eds-c-buttonPlain",
        "variant": "primary",
        "jsHook": "data-track-my-hook",
        "jsHookValue": "my value"
    });

    const buttonLink = document.querySelector('.eds-c-button');
    expect(buttonLink.getAttribute('data-track-my-hook')).toBe('my value');
});

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

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