import type { Component } from 'solid-js'
import { Logger } from 'besonders-logger'
import { createSignal } from 'solid-js'
import { useAgent } from '../../data/agent/AgentState'
import { useSearchContext } from '../../data/search'
import { useAtTags, useHashTags, usePlusTags } from '../../ui/reactive'
import { TagSettingsDialog } from '../bars/Sidebar'
import { TagsList } from '../TagsList'

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

export const TagSettings: Component<{}> = () => {
	DEBUG('Creating <AgentSettings>') // HACK used to render twice and sideEffects should only happen once if possible
	const agent = useAgent() // ? are there reactivity reasons not to destructure here?

	const plusTags = usePlusTags()
	const hashTags = useHashTags()
	const atTags = useAtTags()

	const [search, setSearch] = useSearchContext()
	const [sort, setSort] = createSignal<'count' | 'name'>('count')
	const [chosenTagString, setTagString] = createSignal('')
	const [settingsOpen, setOpen] = createSignal(false)

	const onClickTagSettings = (tagType: string, tag: string) => {
		// TODO avoid this code duplication (if possible: without terribly awkward signal prop passing)
		const tagWithPrefix = `${tagType}${tag}`
		LOG('onClickTagSettings', tagWithPrefix)
		setTagString(tagWithPrefix)
		setOpen(true)
	}
	function onClickTag(type: string, tag: string) {
		setSearch(type + tag)
	}

	return (
		<div flex='~ col' gap-4>
			<h3>Sort by:</h3>
			<sl-button-group label='Alignment'>
				<sl-button onClick={() => setSort('count')} variant={sort() === 'count' ? 'primary' : 'default'}>Count</sl-button>
				<sl-button onClick={() => setSort('name')} variant={sort() === 'name' ? 'primary' : 'default'}>Name</sl-button>
			</sl-button-group>
			<sl-card class='card-header' style={{ '--border-colly': '#ffffff77', '--padding': 'var(--sl-spacing-medium)' }}>
				{
					/* <div slot='header'>
					Your tags{/*  {`(${agent.ag})`} * /}
				</div> */
				}

				{/* <div mb-2>Mergable Tags</div> */}

				<div gap-4 flex='~ justify-around wrap' items='start'>
					<TagsList sort={sort()} symbol='+' tags={plusTags} {...{ onClickTag, onClickTagSettings }} />

					<TagsList sort={sort()} symbol='#' tags={hashTags} {...{ onClickTag, onClickTagSettings }} />

					<TagsList sort={sort()} symbol='@' tags={atTags} {...{ onClickTag, onClickTagSettings }} />

					<TagSettingsDialog open={settingsOpen} setOpen={setOpen} tagString={chosenTagString} />
				</div>

				<div slot='footer' flex='~ justify-end md:justify-start' gap-2>
					Footer ?
				</div>
			</sl-card>
		</div>
	)
}