import { Fragment } from 'preact';
import { IncludesResponses } from './ResponsesPage';
import { IncludesGenerator } from './GeneratorPage';
import { useContext } from 'preact/hooks';

export interface PageFooterProps {
	creditsUrl: string
}

export function reconstituteFooterProps(footer: HTMLElement, partial: Partial<PageFooterProps> = {}): PageFooterProps {
	return {
		creditsUrl: partial.creditsUrl ?? footer.querySelector<HTMLAnchorElement>(".creditsLink")!.href,
	}
}

export function PageFooter({creditsUrl}: PageFooterProps) {
	const includesGenerator = useContext(IncludesGenerator)
	const includesResponses = useContext(IncludesResponses)
	return <footer>
		{includesGenerator
			? <Fragment>
					<noscript class="jsOffHint">
						<p>⚠️ Certain features - copy, select-all/select-none{
							includesResponses ? ", reroll offline, select response" : ""
						} - are currently disabled because JavaScript is disabled.</p>
					</noscript>
					{includesResponses
						? <p class="requiresJs saveHint">💡 You can save this page to be able to generate scenarios offline!</p>
						: null}
				</Fragment>
			: null}
		<p>
			<a class="creditsLink" href={creditsUrl} rel="external nofollow noreferrer">Project credits/instructions/source code/license</a>
		</p>
	</footer>
}