import type { Component } from 'solid-js'
import type { DivProps } from '../ui/utils-ui'
import { Logger } from 'besonders-logger'
import { createMemo, Show } from 'solid-js'
import { ApplogView } from '../components/ApplogView'
import { ResourceSpinner } from '../components/mini-components'
import { useSingleUrlParam } from '../ui/utils-ui'
import { useSubResource } from './MainPage'

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

export const InspectPage: Component<DivProps & {}> = (restProps) => {
	const pubFromUrl = createMemo(() => useSingleUrlParam('pub')[0]() || useSingleUrlParam('preview')[0]())

	// const appThread = useRawThread()
	const [subResource, { refetch }] = useSubResource(() => pubFromUrl())
	const subData = createMemo(() => pubFromUrl() && subResource.state === 'ready' && subResource())

	return (
		<div>
			<ResourceSpinner resource={subResource}>
				<Show when={subData()?.thread} fallback='No data - check ?pub in URL'>
					<ApplogView
						thread={subData().thread}
						alwaysOpen={true}
						{...restProps}
					/>
				</Show>
			</ResourceSpinner>
			<pre mt-12 style={{ 'font-size': '10px' }}>{JSON.stringify(subResource(), undefined, 4)}</pre>
		</div>
	)
}