const schema = require('./data/eds-c-radio.schema.json');
const exampleJson = require('./data/eds-c-radio.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-radio', 'eds-c-label', 'eds-c-hint', 'eds-c-data-attributes']).load(handlebars);

const componentTemplate = '{{> eds-c-radio}}';
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('Should render radio attributes', () => {
		document.body.innerHTML = renderedComponent;

		const radioElement = document.querySelector('input[type="radio"]');
		expect(radioElement.getAttribute('id')).toEqual('test-car-no');
		expect(radioElement.getAttribute('name')).toEqual('test-car-question');
		expect(radioElement.getAttribute('value')).toEqual('no');
	});

	test('Should render radio data attributes', () => {
		const testData = {
			...exampleJson,
			dataAttributes: [
				{ name: 'track-context', value: 'springer-link' },
				{ name: 'track-content-type', value: 'collection' },
				{ name: 'track-label', value: 'collection' },
				{ name: 'test', value: 'radio-test' }
			]
		};
		document.body.innerHTML = componentHbs(testData);

		const radioElement = document.querySelector('input[type="radio"]');
		expect(radioElement.getAttribute('data-test')).toEqual('radio-test');
		expect(radioElement.getAttribute('data-track-context')).toEqual(
			'springer-link'
		);
		expect(radioElement.getAttribute('data-track-content-type')).toEqual(
			'collection'
		);
		expect(radioElement.getAttribute('data-track-label')).toEqual(
			'collection'
		);
	});

	test('Should render radio error', () => {
		const testData = {
			...exampleJson,
			error: {
				errorInputId: 'eds-radio-one'
			}
		};
		document.body.innerHTML = componentHbs(testData);

		const radioElement = document.querySelector('input[type="radio"]');
		expect(radioElement.hasAttribute('invalid')).toBeTruthy();
		expect(radioElement.getAttribute('aria-invalid')).toBeTruthy();
		expect(radioElement.getAttribute('aria-describedby')).toBe('error-eds-radio-one');
	});

	test('Should render radio required attribute', () => {
		const testData = { ...exampleJson, required: true };
		document.body.innerHTML = componentHbs(testData);

		const radioElement = document.querySelector('input[type="radio"]');
		expect(radioElement.hasAttribute('required')).toBeTruthy();
		expect(radioElement.getAttribute('aria-required')).toBeTruthy();
	});

	test('Should render radio disabled attribute', () => {
		const testData = { ...exampleJson, disabled: true };
		document.body.innerHTML = componentHbs(testData);

		const radioElement = document.querySelector('input[type="radio"]');
		expect(radioElement.hasAttribute('disabled')).toBeTruthy();
	});

	test('Should render radio checked attribute', () => {
		const testData = { ...exampleJson, checked: true };
		document.body.innerHTML = componentHbs(testData);

		const radioElement = document.querySelector('input[type="radio"]');
		expect(radioElement.hasAttribute('checked')).toBeTruthy();
	});

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