import { createContext } from 'preact';
import { responseListIdPrefix, ResponseType, type ResponseTypeProps } from './ResponseType';
import { IncludesGenerator } from './GeneratorPage';
import { LinkButton } from './Button';
import { TableEmoji, tableIdentifier, TableName } from './TableHeader';
import { useContext } from 'preact/hooks';

export const IncludesResponses = createContext(false)

export interface ResponsesProps {
	types: ResponseTypeProps[]
}

export interface ResponsesEvents {
	onSelectResponse: (tableId: number, mappingId: number) => void
}

// TODO: add a "reconstitute" function for ResponsesPage

export function ResponsesPage({ types, onSelectResponse }: ResponsesProps & ResponsesEvents) {
	const includesGenerator = useContext(IncludesGenerator);
	return <div id="responses" class="page">
		<header id="responsesHeader" class="window">
			<h1 id="responsesHead">Possible Responses</h1>
			<nav id="responsesHeaderNav" class="buttons">
				{types.map(type =>
					<LinkButton key={tableIdentifier(type.table)} href={`#${responseListIdPrefix}${tableIdentifier(type.table)}`} external={false}>
						<TableEmoji emoji={type.table.emoji} />{' '}<TableName name={type.table.name} />
					</LinkButton>)}
				{includesGenerator
					? <LinkButton href={"#generator"} external={false} id="returnToGenerator">Return to Generator</LinkButton>
					: null}
			</nav>
		</header>
		<ul id="responseLists">
			{types.map(type =>
				<ResponseType key={tableIdentifier(type.table)}
											onSelectResponse={onSelectResponse}
											{...type} />)}
		</ul>
	</div>
}