import { lastWriteWins } from '@wovin/core'
import { trace } from '@wovin/core/mobx'
import { Logger } from 'besonders-logger'
import { createSignal } from 'solid-js'
import { ApplogView } from '../components/ApplogView'

// import '../ui/shoelace'
// import '@shoelace-style/shoelace/dist/themes/dark.css'

import { getApplogDB, insertApplogsInAppDB } from '../data/ApplogDB'

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

export default (props) => {
	LOG('!!! TESTPAGE RERENDER !!!')
	trace(true)
	const ds = lastWriteWins(getApplogDB())
	// const db = untracked(() => getApplogDB())
	// const deletionLogs = rollingFilter(db, { at: ['isDeleted', 'relation/isDeleted', 'block/isDeleted'], vl: true }, {
	// 	name: 'isDeleted',
	// })
	// autorun(() => {
	// 	DEBUG(`deletionLogs: ${JSON.stringify(deletionLogs)}`)
	// })

	// const focus = useFocus()

	// const block = useBlock(focus() /* HACK: reactive to ID? */)
	// const roots = useRoots()

	const [id, setID] = createSignal(null as string | null)
	function testChange() {
		if (!id()) {
			setID(new Date().toTimeString())
		}
		insertApplogsInAppDB([
			// {'en': id,'at': 'block/content','vl': 'test root ' + new Date() },
			{ en: `blk-${id().replaceAll(' ', '').toLowerCase()}`, at: 'block/content', vl: `test content ${new Date()}` },
		])
	}
	function testDelete() {
		insertApplogsInAppDB([
			{ en: id(), at: 'isDeleted', vl: true },
		])
		setID(null)
	}

	return (
		<div>
			<h1>Test</h1>
			<button onClick={testChange}>CHANGE</button>
			<button onClick={testDelete}>TOGGLE DEL</button>
			{/* <pre>{JSON.stringify(roots, undefined, 2)}</pre> */}
			{/* <pre>{JSON.stringify(block, undefined, 2)}</pre> */}
			{
				/* <pre>{deletionLogs.name} - {deletionLogs.size}</pre>
			<pre>{deletionLogs.applogs.map(log => JSON.stringify(log/* , undefined, 2 * /)).join('\n')}</pre> */
			}

			<ApplogView mt-4 thread={ds} max-h-42vh />
		</div>
	)
}