const basicSchema = require('./data/eds-c-hero-basic.schema.json');
const basicExample = require('./data/eds-c-hero-basic.example.json');
const { createVariantTests } = require('./eds-c-hero.test');

describe('Hero Basic', () => {
    const tests = createVariantTests('Basic', basicSchema, basicExample, 'eds-c-hero-basic');

    tests.schemaValidation();
    tests.accessibilityTest();

    tests.renderTest('.eds-c-hero__title');
    tests.renderTest('.eds-c-hero__subtitle', (example) => example.subtitle);
    tests.renderTest('.eds-c-hero__metadata-list', (example) => example.metadata);
    tests.renderTest('.eds-c-hero__buttons-container', (example) => example.buttons && example.buttons.length > 0);

    tests.customTest('renders background color', (rendered, example) => {
        const hero = document.querySelector('.eds-c-hero');
        expect(hero.classList.contains(example.bgColor)).toBeTruthy();
    });

    tests.customTest('renders buttons when provided', (rendered, example) => {
        if (example.buttons && example.buttons.length > 0) {
            const buttons = document.querySelectorAll('.eds-c-hero__buttons-container .eds-c-button');
            expect(buttons.length).toBe(example.buttons.length);
        }
    });

    tests.customTest('renders breadcrumbs when provided', (rendered, example) => {
        if (example.breadcrumbs) {
            const breadcrumbs = document.querySelector('.eds-c-breadcrumbs');
            expect(breadcrumbs).toBeTruthy();
        }
    });

    tests.customTest('renders h1 title as a link when linkUrl provided', (rendered, example) => {
        const titleElement = document.querySelector('.eds-c-hero__title');
        expect(titleElement).toBeTruthy();
        
        if (example.title.linkUrl) {
            const titleLink = titleElement.querySelector('a');
            expect(titleLink).toBeTruthy();
            expect(titleLink.getAttribute('href')).toBe(example.title.linkUrl);
            expect(titleLink.textContent.trim()).toBe(example.title.text);
            
            // verify HTML structure
            expect(rendered).toContain(`<h1`);
            expect(rendered).toContain(`href="${example.title.linkUrl}"`);
        } else {
            const titleLink = titleElement.querySelector('a');
            expect(titleLink).toBeFalsy();
            expect(titleElement.textContent.trim()).toBe(example.title.text);
        }
    });
});