'use strict';

/* eslint-disable max-nested-callbacks */

const fixture = `
	<div class="eds-c-accordion">
		<div class="eds-c-accordion__button-container">
			<button class="eds-c-accordion__button" type="button" data-eds-c-accordion 
				aria-expanded="false"
				aria-controls="test-content" id="test-button">
				<div class="eds-c-accordion__header" role="heading" aria-level="2">
					<span class="eds-c-accordion__title">Test Accordion</span>
					<svg class="eds-c-accordion__icon" aria-hidden="true" focusable="false">
						<use xlink:href="#icon"></use>
					</svg>
				</div>
			</button>
			<div class="eds-c-accordion__strip"></div>
		</div>
		<div id="test-content" aria-labelledby="test-button"
			class="eds-c-accordion__content eds-c-accordion__content--grouped"
			data-eds-c-accordion-expandable
			data-show-more-height="300"
			data-show-more-text="Show more"
			data-show-less-text="Show less"
			data-icon-url="#chevron">
			<div style="height: 500px;">
				<a href="#link1">Link 1</a>
				<a href="#link2">Link 2</a>
				<a href="#link3">Link 3</a>
				<button type="button">Button 1</button>
				<input type="text" id="input1" />
			</div>
		</div>
	</div>
`;

const shortContentFixture = `
	<div class="eds-c-accordion">
		<div class="eds-c-accordion__button-container">
			<button class="eds-c-accordion__button" type="button" data-eds-c-accordion 
				aria-expanded="false"
				aria-controls="short-content" id="short-button">
				<div class="eds-c-accordion__header" role="heading" aria-level="2">
					<span class="eds-c-accordion__title">Short Content</span>
				</div>
			</button>
		</div>
		<div id="short-content" aria-labelledby="short-button"
			class="eds-c-accordion__content"
			data-eds-c-accordion-expandable
			data-show-more-height="300"
			data-show-more-text="Show more"
			data-show-less-text="Show less">
			<div style="height: 100px;">
				<p>Short content that doesn't need show more</p>
			</div>
		</div>
	</div>
`;

describe('EDS Component Accordion JavaScript Functionality', () => {
	let accordion;
	let EdsCAccordion;

	beforeAll(async () => {
		const module = await import('./eds-c-accordion.js');
		EdsCAccordion = module.default;
	});

	afterEach(() => {
		document.body.innerHTML = '';
		jest.clearAllMocks();
		jest.restoreAllMocks();
	});

	describe('Initialization', () => {
		test('should initialize with default options', () => {
			document.body.innerHTML = fixture;
			accordion = new EdsCAccordion();
			
			expect(accordion.options.showMoreHeight).toBe(300);
		});

		test('should initialize with custom options', () => {
			document.body.innerHTML = fixture;
			accordion = new EdsCAccordion('data-eds-c-accordion', {
				showMoreHeight: 250
			});
			
			expect(accordion.options.showMoreHeight).toBe(250);
		});

		test('should initialize accordion triggers on init', () => {
			document.body.innerHTML = fixture;
			accordion = new EdsCAccordion();
			accordion.init();

			const trigger = document.querySelector('[data-eds-c-accordion]');
			expect(trigger).toBeTruthy();
		});
	});

	describe('Show More/Less Feature', () => {
		beforeEach(() => {
			document.body.innerHTML = fixture;
			
			// Mock scrollHeight to simulate content exceeding threshold
			Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
				configurable: true,
				get: function() {
					return this.style.height ? parseInt(this.style.height) : 500;
				}
			});
		});

		test('should create show more button when content exceeds threshold', () => {
			accordion = new EdsCAccordion();
			accordion.init();

			const button = document.querySelector('[data-eds-c-accordion-toggle]');
			expect(button).toBeTruthy();
			expect(button.getAttribute('aria-expanded')).toBe('false');
		});

		test('should not create show more button when content is below threshold', () => {
			document.body.innerHTML = shortContentFixture;
			
			// Mock scrollHeight for short content
			Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
				configurable: true,
				get: function() {
					return 100;
				}
			});

			accordion = new EdsCAccordion();
			accordion.init();

			const button = document.querySelector('[data-eds-c-accordion-toggle]');
			expect(button).toBeNull();
		});

		test('should use height threshold from data attribute', () => {
			accordion = new EdsCAccordion();
			const contentWrapper = document.querySelector('[data-eds-c-accordion-expandable]');
			const heightThreshold = accordion.getHeightThreshold(contentWrapper);

			expect(heightThreshold).toBe(300);
		});

		test('should use height threshold from options when data attribute is missing', () => {
			document.body.innerHTML = fixture;
			const contentWrapper = document.querySelector('[data-eds-c-accordion-expandable]');
			contentWrapper.removeAttribute('data-show-more-height');

			accordion = new EdsCAccordion('data-eds-c-accordion', {
				showMoreHeight: 250
			});

			const heightThreshold = accordion.getHeightThreshold(contentWrapper);
			expect(heightThreshold).toBe(250);
		});

		test('should add has-show-more class to content when button is created', () => {
			accordion = new EdsCAccordion();
			accordion.init();

			const contentWrapper = document.querySelector('[data-eds-c-accordion-expandable]');
			expect(contentWrapper.classList.contains('eds-c-accordion__content--has-show-more')).toBe(true);
		});

		test('should include icon in button when iconURL is provided', () => {
			accordion = new EdsCAccordion();
			accordion.init();

			const button = document.querySelector('[data-eds-c-accordion-toggle]');
			const icon = button.querySelector('.eds-c-accordion__btn-show-more-icon');
			expect(icon).toBeTruthy();
			expect(icon.querySelector('use').getAttribute('xlink:href')).toBe('#chevron');
		});

		test('should expand content when show more button is clicked', () => {
			accordion = new EdsCAccordion();
			accordion.init();

			const button = document.querySelector('[data-eds-c-accordion-toggle]');
			const contentWrapper = document.querySelector('[data-eds-c-accordion-expandable]');

			button.click();

			expect(button.getAttribute('aria-expanded')).toBe('true');
			expect(contentWrapper.classList.contains('is-expanded')).toBe(true);
		});

		test('should collapse content when show less button is clicked', () => {
			accordion = new EdsCAccordion();
			accordion.init();

			const button = document.querySelector('[data-eds-c-accordion-toggle]');
			const contentWrapper = document.querySelector('[data-eds-c-accordion-expandable]');

			// Expand first
			button.click();
			expect(contentWrapper.classList.contains('is-expanded')).toBe(true);

			// Then collapse
			button.click();
			expect(button.getAttribute('aria-expanded')).toBe('false');
			expect(contentWrapper.classList.contains('is-expanded')).toBe(false);
		});
	});
});
