import { useParams } from '@solidjs/router'
import { Logger } from 'besonders-logger'
import { createEffect, createMemo, Show } from 'solid-js'
import { AppSettings } from '../components/settings/AppSettings'
import { SharesSettings } from '../components/settings/SharesSettings'
import { StorageSettings } from '../components/settings/StorageSettings'
import { SubscriptionsSettings } from '../components/settings/SubscriptionsSettings'
import { TagSettings } from '../components/settings/TagSettings'
import { useGlobalInputHandlers } from '../data/keybindings'
import { useLocationNavigate } from '../ui/utils-ui'

const { WARN, LOG, DEBUG, VERBOSE, ERROR } = Logger.setup(Logger.INFO) // eslint-disable-line unused-imports/no-unused-vars

export default () => {
	const params = useParams()
	const { locnav, location, navigate } = useLocationNavigate()
	DEBUG('!!! <SETTINGSPAGE> RENDER !!!', params)
	// trace(true)
	useGlobalInputHandlers()

	const active = createMemo(() => {
		const [section, ...sectionParams] = params.section?.split('/')
		const normalizedSection = section === 'publications' ? 'shares' : section
		const storedTab = localStorage.getItem('note3.settings.lastTab')
		const normalizedStoredTab = storedTab === 'publications' ? 'shares' : storedTab
		DEBUG(`Section?`, params.section, '->', { section: normalizedSection, sectionParams, localStorage: normalizedStoredTab })
		return {
			section: normalizedSection || normalizedStoredTab,
			params: sectionParams,
		}
	})
	const activeParams = createMemo(() => active().params) // ? possibly simpler
	const activeSection = createMemo(() => active().section || 'app')
	const setActive = (evt: CustomEvent) => {
		DEBUG(`Tab activated`, evt, active())
		localStorage.setItem('note3.settings.lastTab', evt.detail.name)
		if (activeSection() !== evt.detail.name) {
			navigate(`/settings/${evt.detail.name}`, {
				replace: location.pathname === '/settings',
			})
		}
	}
	createEffect(() => DEBUG(`active settings section:`, { ...active() }))

	let tabGroupRef
	// (i) we need both: the effect in case we have a section change while the component is mounted, and the active={} on the tab for the initial page load
	createEffect(() => tabGroupRef?.show(activeSection()))

	return (
		<div flex='~ col' w-full>
			<sl-tab-group onsl-tab-show={setActive} ref={tabGroupRef}>
				<sl-tab slot='nav' panel='app' active={activeSection() === 'app'}>App</sl-tab>
				{/* <sl-tab slot='nav' panel='agent' active={activeSection() === 'agent'}>Agent</sl-tab> */}
				<sl-tab slot='nav' panel='storage' active={activeSection() === 'storage'}>Storage</sl-tab>
				<sl-tab slot='nav' panel='tags' active={activeSection() === 'tags'}>Tags</sl-tab>
				<sl-tab slot='nav' panel='shares' active={activeSection() === 'shares'}>Shares</sl-tab>
				<sl-tab slot='nav' panel='subscriptions' active={activeSection() === 'subscriptions'}>Subscriptions</sl-tab>

				{
					/* <sl-tab-panel name='agent'>
					<Show when={activeSection() === 'agent'}>
						<AgentSettings />
					</Show>
				</sl-tab-panel> */
				}
				<sl-tab-panel name='app'>
					<Show when={activeSection() === 'app'}>
						<AppSettings />
					</Show>
				</sl-tab-panel>
				<sl-tab-panel name='storage'>
					{/* <Show when={activeSection() === 'storage'}> */}
					<StorageSettings />
					{/* </Show> */}
				</sl-tab-panel>
				<sl-tab-panel name='tags'>
					<Show when={activeSection() === 'tags'}>
						<TagSettings />
					</Show>
				</sl-tab-panel>
				<sl-tab-panel name='shares'>
					<Show when={activeSection() === 'shares'}>
						<SharesSettings navigate={navigate} activeSection={activeSection} params={activeParams} />
					</Show>
				</sl-tab-panel>
				<sl-tab-panel name='subscriptions'>
					<SubscriptionsSettings activeSection={activeSection} params={activeParams} />
				</sl-tab-panel>
			</sl-tab-group>
		</div>
	)
}