vore-scenario-generator/src/common/template/GeneratedResult.tsx

import {
	Attribution,
	type AttributionPropsEmpty, type AttributionPropsFull,
	type PartialAttributionProps, type PartialAttributionPropsEmpty,
	reconstituteAttribution,
} from './Attribution';
import { responseIdPrefix } from './util';
import {
	reconstituteResultText,
	ResultText,
	type ResultTextPropsFull,
	type ResultTextPropsLimited
} from './ResultText';
import { Button } from './Button';

export type GeneratedResultPropsFull = {
	includesResponses: boolean
} & AttributionPropsFull & ResultTextPropsFull

export type GeneratedResultPropsLimited = {
	includesResponses?: null
} & AttributionPropsEmpty & ResultTextPropsLimited

export type GeneratedResultProps = GeneratedResultPropsFull|GeneratedResultPropsLimited


export type PartialGeneratedResultPropsFull = {
	includesResponses?: boolean
} & PartialAttributionProps & Partial<ResultTextPropsFull>

export type PartialGeneratedResultPropsLimited = {
	includesResponses?: null
} & PartialAttributionPropsEmpty & Partial<ResultTextPropsLimited>

export type PartialGeneratedResultProps = PartialGeneratedResultPropsFull|PartialGeneratedResultPropsLimited

export function reconstituteGeneratedResult(div: HTMLDivElement, partial?: PartialGeneratedResultProps): GeneratedResultProps {
	const result =
		reconstituteResultText(div.querySelector(".resultText")!, partial)
	const attribution =
		reconstituteAttribution(div.querySelector(".attribution")!, partial)
	if (result.updated && attribution.set) {
		return {
			includesResponses: !!div.querySelector(".jumpToResponse"),
			...attribution,
			...result,
		}
	} else {
		return {
			text: result.text
		}
	}
}

export function GeneratedResult(props: GeneratedResultProps) {
	return <div class="generatedResult attributed">
		<ResultText {...props} />
		<Attribution {...props}>
			{props.includesResponses
				? <p><Button class={"jumpToResponse"} href={`#${responseIdPrefix}${props.mappingId}`}>Jump to Result in List</Button></p>
				: null}
		</Attribution>
	</div>
}