const handlebars = require('handlebars');

const visibleLabelWithFeedbackOnLabel = require('./data/eds-c-copy-to-clipboard--visible-label-label-feedback.example.json');
const hiddenLabelWithFeedbackOnButton = require('./data/eds-c-copy-to-clipboard--hidden-label-button-feedback.example.json');
const copyFromExternalParagraphSource = require('./data/eds-c-copy-to-clipboard--external-text.example.json');
const copyFromExternalTextareaSource = require('./data/eds-c-copy-to-clipboard--external-textarea.example.json');

const { findTemplates } = require('../../development/tests/templateLoader.js');

const componentTemplate = '{{> eds-c-copy-to-clipboard }}';
findTemplates(['eds-c-copy-to-clipboard', 'eds-c-button', 'eds-c-data-attributes']).load(handlebars);

describe('EDS copy to clipboard accessibility tests', () => {
	const { configureAxe, toHaveNoViolations } = require('jest-axe');
	expect.extend(toHaveNoViolations);

	const axe = configureAxe({
		rules: {
			region: { enabled: false }
		}
	});

	describe.each([
		{
			variantTitle: 'Visible label with feedback on label',
			data: visibleLabelWithFeedbackOnLabel,
			template: componentTemplate
		},
		{
			variantTitle: 'Hidden label with feedback on button',
			data: hiddenLabelWithFeedbackOnButton,
			template: componentTemplate
		},
		{
			variantTitle: 'Copy from external paragraph source',
			data: copyFromExternalParagraphSource,
			template: `
			<div
				role="status"
				aria-live="polite"
				class="u-visually-hidden"
				{{#with feedback}}
					data-live-region-text-on-success="{{liveRegionTextOnSuccess}}"
					data-live-region-text-on-error="{{liveRegionTextOnError}}"
				{{/with}}
				data-component-copytoclipboard-live-region="{{componentUID}}">
			</div>
			<p id="text-to-copy-to-clipboard" data-component-copytoclipboard-text-to-copy="{{componentUID}}">
				Our recent study published in Nature Aging reveals how the gut microbiota metabolite phenylacetylglutamine (PAGln) accelerates cellular senescence, inducing DNA damage and mitochondrial dysfunction. This insight could lead to potential anti-aging therapies.
			</p>
			{{> eds-c-copy-to-clipboard }}
			`
		},
		{
			variantTitle: 'Copy from external textarea source',
			data: copyFromExternalTextareaSource,
			template: `
			<div>
				<label for="research-brief-input">Research brief</label>
				<div
					role="status"
					aria-live="polite"
					class="u-visually-hidden"
					{{#with feedback}}
						data-live-region-text-on-success="{{liveRegionTextOnSuccess}}"
						data-live-region-text-on-error="{{liveRegionTextOnError}}"
					{{/with}}
					data-component-copytoclipboard-live-region="{{componentUID}}">
				</div>
				<textarea id="research-brief-input" cols="55" rows="10" data-component-copytoclipboard-text-to-copy="{{componentUID}}">
					The heterogeneity of human aging is not fully explained by
			genetic variation, suggesting that external factors like gut
			microbiota may influence the aging process. Previous studies have
			shown that gut microbiota changes with age, potentially affecting
			the development of age-related diseases. However, the impact of
			microbiota-related metabolites on physiological aging remains
			unclear. Now in our new article, we explore the role of the gut
			microbiota-derived metabolite phenylacetylglutamine (PAGln) in
			promoting cellular senescence and its potential as a target for
			anti-aging therapies...
				</textarea>
			</div>
			{{> eds-c-copy-to-clipboard }}
			`
		}
	])('Variant: $variantTitle', ({ _variantTitle, data, template }) => {
		test('passes basic HTML accessibility requirements', async () => {
			const hbsTemplate = handlebars.compile(template);
			document.body.innerHTML = hbsTemplate(data);

			expect(document.body.innerHTML.length).not.toBe(0);
			expect(await axe(document.body)).toHaveNoViolations();
		});
	});
});
