import type { EntityID } from '@wovin/core/applog'
import type { Accessor, Component } from 'solid-js'
import type { SortableBlockItem } from './SortableBlocks'
import { observableArrayMap } from '@wovin/core/query'
import { Logger } from 'besonders-logger'
import classNames from 'classnames'
import { createMemo, For, Show, untrack } from 'solid-js'
import { SurveySlider } from '../../../ui-solid-showcase/src/components/SurveySlider'
import { useBlk } from '../data/VMs/BlockVM'
import { useRel } from '../data/VMs/RelationVM'
import { useKidRelations, useRawThread, withDS } from '../ui/reactive'
import { BlockItem } from './BlockContent'
import { SortableBlocks } from './SortableBlocks'
import { TreeItem } from './TreeItem'
import '../../../ui-solid-showcase/src/components/SurveySlider.css'

const { WARN, LOG, DEBUG, VERBOSE, ERROR } = Logger.setup(Logger.DEBUG)

export const KidsAsSurvey: Component<{
	blockID?: EntityID
	disabled?: boolean
	class?: string
	items: readonly SortableBlockItem[]
}> = (props) => {
	DEBUG(`<KidsAsSurvey> created`, untrack(() => ({ ...props })))
	const rawThread = useRawThread()

	return (
		<div class={classNames(props.class, 'w-full p-2 space-y-6')}>
			<For each={props.items}>
				{(surveyItem, index: Accessor<number>) => {
					const blockVM = useBlk(surveyItem.blockID)
					const kidRelationIDs = surveyItem.blockID
						&& observableArrayMap(() => withDS(rawThread, () => useKidRelations(surveyItem.blockID).map(({ en }) => en)))
					const kidsForThisQuestion = createMemo(function kidItemsFromRelations() {
						if (kidRelationIDs) {
							return kidRelationIDs.map((relationID) => {
								const rel = useRel(relationID)
								const block = useBlk(rel.block)
								if (!block) WARN('rel refers to missing block', { block, rel })
								return ({
									id: relationID,
									relationID,
									blockID: rel.block,
									type: block?.type,
								})
							}) satisfies SortableBlockItem[]
						}
					})

					return (
						<div class='survey-question border-2 border-slate-300 rounded-xl bg-slate-100 p-6 space-y-4'>
							{/* <!-- Question row, no expand icon --> */}
							<BlockItem
								blockID={surveyItem.blockID}
								relationID={surveyItem.relationID}
								hasKids={false}
								isExpanded={() => false}
								setExpanded={() => {}}
								class='mb-4'
							/>
							<div class='slider-container mx-auto max-w-70%'>
								<SurveySlider
									plugin_question_title={blockVM.contentPlaintext}
									range={[-50, 50]}
									onChange={val => DEBUG('Survey response for', surveyItem.blockID, val)}
								/>
							</div>
							<Show when={kidsForThisQuestion()?.length}>
								<div class='responses ml-8 mt-4'>
									<SortableBlocks
										class='rounded py-2 pr-1'
										blockID={surveyItem.blockID}
										items={kidsForThisQuestion()}
									>
										{item => (
											<TreeItem {...item} />
										)}
									</SortableBlocks>
								</div>
							</Show>
						</div>
					)
				}}
			</For>
		</div>
	)
}