/**
 * This work is licensed under the W3C Software and Document License
 * (http://www.w3.org/Consortium/Legal/2015/copyright-software-and-document).
 */
class MediaAffordancesElement extends HTMLElement {
	constructor() {
		super()

		this.mqls = []
		this.observers = []
		this.supportedAffordances = new Set()
	}

	observeAffordanceChange(cb) {
		this.observers.push(cb)
	}

	notifyChange() {
		let intersection = new Set()

		for (let elem of this.mqls) {
			if (elem.matches && this.supportedAffordances.has(elem.__affordance)) {
				intersection.add(elem.__affordance)
			}
		}

		let arr = [...intersection]

		if (arr.length > 0) {
			this.setAttribute('mq-matched', arr.join(' '))
		} else {
			this.removeAttribute('mq-matched')
		}

		let affordance = arr[0]

		if (affordance) {
			this.setAttribute('affordance', affordance)
		} else {
			this.removeAttribute('affordance')
		}

		this.observers.forEach((cb) => {
			cb(intersection, this.__matching)
		})
	}

	static get observedAttributes() {
		return ['mq-affordances']
	}

	connectedCallback() {
		let newValue = getComputedStyle(this).getPropertyValue('--const-mq-affordances')

		this.connectListeners(newValue)
	}

	connectListeners(newValue = '') {
		if (newValue.trim().length === 0) {
			return
		}

		newValue.split('|').forEach((segment) => {
			let mq = segment.trim().match(/\[([^\]]*)/)[1]
			let names = segment.replace(`[${mq}]`, '').trim().split(' ')
			let mql = window.matchMedia(mq)

			mql.__affordance = names[0] // one for now
			mql.onchange = () => this.notifyChange()

			this.mqls.push(mql)
		}, this)

		this.notifyChange()
	}

	attributeChangedCallback(name, oldValue, newValue) {
		this.connectListeners(newValue)
	}
}

// ----------------------------------------------------

(() => {
	let lastUId = 0

	let nextUId = () => {
		return `cp${++lastUId}`
	}

	let getLabels = (regionset) => {
		return [...regionset.children].filter((el) => /^H\d$/.test(el.tagName) || el.tagName === 'SPICY-H')
	}

	let getContentEls = (regionset) => {
		return [...regionset.children].filter((el) => !/^H\d$/.test(el.tagName))
	}

	let ensureId = (el) => {
		el.id = el.id || nextUId()
		return el.id
	}

	let style = document.createElement('style')
	style.innerHTML = `
	:where(spicy-sections > [affordance*="collapse"])::before { 
		content: ' ';
		display: inline-block;
		width: 0.5em;
		height: 0.75em;
		margin: 0 0.4em 0 0;
		transform: rotate(90deg);
		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='10px' height='10px' viewBox='0 0 270 240' enable-background='new 0 0 270 240' xml:space='preserve'%3e%3cpolygon fill='black' points='5,235 135,10 265,235 '/%3e%3c/svg%3e ");
		background-size: 100% 100%;
	} 

	:where(spicy-sections > .hide) {
		display: none !important;
	} 

	:where(spicy-sections > [affordance*="collapse"][aria-expanded="true"])::before, 
	:where(spicy-sections > [affordance*="collapse"][aria-expanded="true"])::after {
		transform: rotate(180deg);
	}
	`

	document.head.prepend(style)

	const template = `
	<style>
		:root {
			font-size: 1rem;
		}

		:host([hidden]),
		::slotted([hidden]) {
			display: none;
		}
		
		::slotted(spicy-h) {
			display: block;
		}

		::slotted(h1),
		::slotted(h2),
		::slotted(h3),
		::slotted(h4),
		::slotted(h5),
		::slotted(h6),
		::slotted(spicy-h){
			margin-right: 1rem;
		}

		[part="tab-bar"] ::slotted([tabindex="0"]) {
			border-bottom: 1px solid blue;
		}

		.hide {
			display: none;
		}
		
		[part="tab-list"] { 
			display: flex; 
			overflow: hidden;
			white-space: nowrap;
		}
	</style>
	<div part="tab-bar">
		<!-- The region/tablist should have a label -->
		<div part="tab-list" role="tablist"><slot name="tabListSlot"></slot></div>
	</div>
	<content part="content-panels">
		<slot default></slot>
	</content>
	`

	class RegionSet extends MediaAffordancesElement {
		__defaults
		__tabListEl

		// tabs and exclusive collapses should have the same affordance object?
		__affordanceConf = {
			collapse: {
				// can take a condition to force, check-like
				toggle: (label, condition) => {
					let state = typeof condition === 'boolean' ? condition : !label.affordanceState.expanded

					let contentEl = label.nextElementSibling

					label.affordanceState.expanded = state
					label.affordanceState.nonExclusiveExpanded = state

					label.setAttribute('aria-expanded', state)

					if (state) {
						label.setAttribute('expanded', '')

						contentEl.classList.remove('hide')
					} else {
						label.removeAttribute('expanded')

						contentEl.classList.add('hide')
					}
				},
			},
			'exclusive-collapse': {
				// ignores condition, radio-like
				toggle: (label) => {
					let labels = getLabels(label.parentElement)
					let siblings = labels.filter((c) => c !== label)
					let index = labels.findIndex((c) => c === label)

					siblings.forEach((sibLabel, i) => {
						let relatedContent = sibLabel.nextElementSibling

						relatedContent.classList.add('hide')

						sibLabel.tabIndex = -1
						sibLabel.setAttribute('aria-expanded', 'false')
						sibLabel.affordanceState.exclusiveExpanded = false
					})

					label.tabIndex = 0
					label.parentElement.affordanceState.exclusiveSelection.index = index // TODO: nope, fix/remove this?
					label.nextElementSibling.classList.remove('hide')
					label.setAttribute('aria-expanded', 'true')
					label.affordanceState.exclusiveExpanded = true
					label.focus()
				},
			},
			'tab-bar': {
				// ignores condition, radio-like
				toggle: (label) => {
					let labels = getLabels(label.parentElement)
					let siblings = labels.filter((c) => c !== label)
					let index = labels.findIndex((c) => c === label)

					siblings.forEach((sibLabel, i) => {
						let relatedContent = sibLabel.nextElementSibling

						relatedContent.classList.add('hide')

						sibLabel.tabIndex = -1
						sibLabel.setAttribute('aria-selected', 'false')
						sibLabel.affordanceState.exclusiveExpanded = false
					})

					label.tabIndex = 0
					label.parentElement.affordanceState.exclusiveSelection.index = index
					label.nextElementSibling.classList.remove('hide')
					label.setAttribute('aria-selected', 'true')
					label.affordanceState.exclusiveExpanded = true
					label.focus()
				},
			},
		}

		__setSize = (labelEls, contentEls) => {
			this.__size = Math.min(labelEls.length, contentEls.length)

			if (labelEls.length !== this.__size) {
				console.warn('mismatch in tab-set label/content pairs...')
			}

			labelEls.forEach((labelEl, i) => {
				let contentEl = contentEls[i]

				if (!labelEl.initialized) {
					labelEl.initialized = true // TODO: this used to be shadow, do i need it?

					let defs = this.__defaults.defaultActive

					// this assumes it is about collapses
					labelEl.affordanceState = {
						expanded: defs.includes(labelEl),
						active: false,
						// activate in the current mode
						activate: () => {
							if (this.affordanceState.current) {
								this.__affordanceConf[this.affordanceState.current].toggle(labelEl)
							}
						},
					}

					let defaultExclusive = defs.length === 0 ? labelEls[0] : defs[defs.length - 1]

					this.affordanceState.exclusiveSelection.index = labelEls.indexOf(defaultExclusive)
				}
				labelEl.setMode = (mode) => {
					if (mode === 'non-exclusive') {
						let isExpanded = labelEl.affordanceState.expanded

						labelEl.setAttribute('affordance', 'collapse')
						labelEl.setAttribute('tabindex', '0')
						labelEl.setAttribute('aria-controls', contentEl.id)
						labelEl.setAttribute('role', 'button')
						labelEl.setAttribute('aria-expanded', isExpanded)

						labelEl.nextElementSibling.classList.toggle('hide', !isExpanded)
					} else if (mode === 'exclusive') {
						let isExpanded = labelEls.indexOf(labelEl) === this.affordanceState.exclusiveSelection.index

						labelEl.setAttribute('affordance', 'collapse')
						labelEl.setAttribute('tabindex', isExpanded ? 0 : -1)
						labelEl.setAttribute('role', 'button')
						labelEl.setAttribute('aria-expanded', isExpanded)
						labelEl.setAttribute('aria-controls', contentEl.id)

						labelEl.nextElementSibling.classList.toggle('hide', !isExpanded)
					} else {
						labelEl.removeAttribute('tabIndex')
						labelEl.removeAttribute('affordance')
						labelEl.removeAttribute('aria-expanded')
						labelEl.removeAttribute('role')
					}
				}
			})
		}

		__projectTabBar = () => {
			this.__removeProjections()

			getLabels(this).forEach((tabSource, i) => {
				let selected = false
				let tabIndex = -1

				tabSource.setMode()
				tabSource.slot = 'tabListSlot'
				tabSource.setAttribute('role', 'tab')

				let contentSource = tabSource.nextElementSibling

				contentSource.tabIndex = 0

				tabSource.setAttribute('aria-controls', ensureId(contentSource))

				contentSource.setAttribute('role', 'tabpanel')
				contentSource.setAttribute('aria-labelledby', tabSource.id)

				if (i === this.affordanceState.exclusiveSelection.index) {
					tabIndex = 0
					selected = true
				}

				tabSource.setAttribute('aria-selected', selected)
				tabSource.tabIndex = tabIndex

				contentSource.classList.toggle('hide', !selected)

				// TODO: aria-orientation :(
			})
		}

		__projectCollapses = (exclusive) => {
			// TODO: remove projections and... ??
			this.__removeProjections()

			getLabels(this).forEach((label) => {
				label.setMode(exclusive ? 'exclusive' : 'non-exclusive')
			})
		}

		__removeProjections = () => {
			Array.from(this.children, (child) => {
				child.removeAttribute('slot')
				child.removeAttribute('affordance')
				child.removeAttribute('role')
				child.removeAttribute('aria-selected')
				child.removeAttribute('aria-controls')
				child.removeAttribute('tabindex')
				child.removeAttribute('aria-expanded')

				child.classList.remove('hide')
			})
		}

		// matching pairs
		__size = 0

		__configure = () => {
			// hmmm

			this.__setSize(getLabels(this), getContentEls(this))

			if (this.affordanceState.current === 'tab-bar') {
				this.affordanceState.currentMode = 'exclusive'
				this.__projectTabBar()
			} else if (this.affordanceState.current === 'collapse') {
				this.affordanceState.currentMode = 'non-exclusive'
				this.__projectCollapses()
			} else if (this.affordanceState.current === 'exclusive-collapse') {
				this.affordanceState.currentMode = 'exclusive'
				this.__projectCollapses(true)
			} else {
				this.affordanceState.currentMode = undefined
				this.__removeProjections()
			}

			// TODO: hmm, these are DOM changes, we could cache them
			let labelEls = getLabels(this)

			for (let i = 0; i < this.__size; i++) {
				let label = labelEls[i]

				// probably add one handler that decides
				if (!label._inited) {
					label.addEventListener('click', (evt) => {
						evt.target.affordanceState.activate()
					})

					label._inited = true
				}
			}
		}

		__childListObserver = new MutationObserver((mutationList) => {
			// we have to wire up new elements
			let labelEls = getLabels(this)
			let contentEls = getContentEls(this)

			// what if there is a mismatch?
			this.__setSize(labelEls, contentEls)
			this.__configure()
		})

		__tabset

		affordanceState = {
			exclusiveSelection: { index: undefined },
			current: undefined,
			currentMode: undefined,
			getLabels: () => {
				return getLabels(this)
			},
		}

		honourFragmentLink = () => {
			let labels = getLabels(this)

			if (location.hash && this.querySelector(location.hash)) {
				// try to find a label with this ID, or controlled content
				// that contains an element with this ID
				for (let i = 0; i < labels.length; i++) {
					let relevantContent = labels[i].getAttribute('aria-controls') && this.querySelector(`#${labels[i].getAttribute('aria-controls')}`)

					if (labels[i] === this.querySelector(location.hash) || (relevantContent && relevantContent.querySelector(location.hash))) {
						labels[i].affordanceState.activate()

						return
					}
				}
			}
		}

		// wires up supported affordances
		constructor() {
			super()

			this.supportedAffordances.add('tab-bar')
			this.supportedAffordances.add('collapse')
			this.supportedAffordances.add('exclusive-collapse')

			let checkDefaults = () => {
				if (!this.__defaults) {
					this.__defaults = {
						onMatch: this.hasAttribute('defaults-on-match'),
						defaultActive: getLabels(this).filter((l) => l.hasAttribute('default-activate')),
					}
				}
			}

			this.observeAffordanceChange((matching, all) => {
				if (!this.__defaults) {
					this.__defaults = {
						onMatch: this.hasAttribute('defaults-on-match'),
						defaultActive: getLabels(this).filter((l) => l.hasAttribute('default-activate')),
					}
				}

				this.affordanceState.current = this.getAttribute('affordance')
				this.__configure()
			})

			this.setActiveAffordance = (matching, all) => {
				checkDefaults()

				this.setAttribute('affordance', matching)

				this.affordanceState.current = matching

				this.__configure()
			}

			this.attachShadow({ mode: 'open' })

			this.shadowRoot.innerHTML = template

			this.__tabListEl = this.shadowRoot.querySelector("[part='tab-list']")

			this.addEventListener('keydown', (evt) => {
				let labels = getLabels(this)
				let size = labels.length
				let cur = this.affordanceState.exclusiveSelection.index
				let prev = cur === 0 ? size - 1 : cur - 1
				let next = cur === size - 1 ? 0 : cur + 1

				// don't trap nested handling
				if (evt.target.parentElement !== evt.currentTarget) {
					return
				}

				if (this.affordanceState.current === 'tab-bar' || this.affordanceState.current === 'exclusive-collapse') {
					if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {
						labels[prev].affordanceState.activate()
						evt.preventDefault()
					} else if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {
						labels[next].affordanceState.activate()
						evt.preventDefault()
					}
				} else if (evt.key === ' ' && this.affordanceState.current === 'collapse') {
					evt.preventDefault()
				}
			}, false)

			this.addEventListener('keyup', (evt) => {
				if (evt.key === ' ' && this.affordanceState.current === 'collapse') {
					evt.target.closest('[affordance]').affordanceState.activate()

					evt.preventDefault()
				}
			})
		}

		connectedCallback() {
			super.connectedCallback()

			// TODO: handle selection
			if (location.hash) {
				setTimeout(this.honourFragmentLink, 1)
			}

			window.addEventListener('hashchange', this.honourFragmentLink)

			// if you append a fragment with a pair, it should work
			this.__childListObserver.observe(this, { childList: true })
		}
	}

	customElements.define('spicy-sections', RegionSet)
})()