import { track } from 'ripple';

export component StaticHtml() {
	const html = '<p><strong>Bold</strong> text</p>';
	<div>{html html}</div>
}

export component DynamicHtml() {
	const content = '<p>Dynamic <span>HTML</span> content</p>';
	<div>{html content}</div>
}

export component EmptyHtml() {
	const html = '';
	<div>{html html}</div>
}

export component ComplexHtml() {
	const html = '<div class="nested"><span>Nested <em>content</em></span></div>';
	<section>{html html}</section>
}

export component MultipleHtml() {
	const html1 = '<p>First paragraph</p>';
	const html2 = '<p>Second paragraph</p>';
	<div>
		{html html1}
		{html html2}
	</div>
}

export component HtmlWithReactivity() {
	<div>
		{html '<p>Count: 0</p>'}
		<button>{'Increment'}</button>
	</div>
}

export component HtmlWrapper({ children }: { children: any }) {
	<div class="wrapper">
		<div class="inner">{children}</div>
	</div>
}

export component HtmlInChildren() {
	const content = '<p><strong>Bold</strong> text</p>';
	<HtmlWrapper>
		<div class="vp-doc">{html content}</div>
	</HtmlWrapper>
}

export component HtmlInChildrenWithSiblings() {
	const content = '<p>Dynamic content</p>';
	<HtmlWrapper>
		<h1>{'Title'}</h1>
		<div class="content">{html content}</div>
	</HtmlWrapper>
}

export component MultipleHtmlInChildren() {
	const html1 = '<p>First</p>';
	const html2 = '<p>Second</p>';
	<HtmlWrapper>
		<div class="doc">
			{html html1}
			{html html2}
		</div>
	</HtmlWrapper>
}

export component HtmlWithComments() {
	const content = '<p>Before comment</p><!-- TODO: Elaborate --><p>After comment</p>';
	<div>{html content}</div>
}

export component HtmlWithEmptyComment() {
	const content = '<p>Before</p><!----><p>After</p>';
	<div>{html content}</div>
}

export component HtmlWithCommentsInChildren() {
	const content = '<h2 id="intro">Introduction</h2><p>Some text</p><!-- TODO --><p>More text</p>';
	<HtmlWrapper>
		<div class="vp-doc">{html content}</div>
	</HtmlWrapper>
}

component DocFooter() {
	<footer class="doc-footer">{'Footer content'}</footer>
}

export component DocLayout({
	children,
	editPath = '',
	nextLink = null,
	toc = [],
}: {
	children: any;
	editPath?: string;
	nextLink?: { href: string; text: string } | null;
	toc?: { href: string; text: string }[];
}) {
	<div class="layout">
		<div class="content-container">
			<article>
				<div>{children}</div>
			</article>
			if (editPath) {
				<div class="edit-link">
					<a href={`https://github.com/edit/${editPath}`}>{'Edit'}</a>
				</div>
			}
			if (nextLink) {
				<nav class="prev-next">
					<a href={nextLink.href}>{nextLink.text}</a>
				</nav>
			}
			<DocFooter />
		</div>
		<aside>
			if (toc.length > 0) {
				<div class="toc">
					<ul>
						for (const item of toc) {
							<li>
								<a href={item.href}>{item.text}</a>
							</li>
						}
					</ul>
				</div>
			}
		</aside>
	</div>
}

export component HtmlWithServerData() {
	const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
	<DocLayout
		editPath="docs/introduction.md"
		nextLink={{ href: '/docs/quick-start', text: 'Quick Start' }}
		toc={[
			{ href: '#intro', text: 'Introduction' },
			{ href: '#features', text: 'Features' },
		]}
	>
		<div class="vp-doc">{html content}</div>
	</DocLayout>
}

export component HtmlWithClientDefaults() {
	const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
	<DocLayout>
		<div class="vp-doc">{html content}</div>
	</DocLayout>
}

export component HtmlWithUndefinedContent() {
	const content: string | undefined = undefined;
	<DocLayout>
		<div class="vp-doc">{html content}</div>
	</DocLayout>
}

component DynamicHeading({ level, children }: { level: number; children: any }) {
	switch (level) {
		case 1: {
			<h1 class="heading">{children}</h1>
		}
		case 2: {
			<h2 class="heading">{children}</h2>
		}
	}
}

component CodeBlock({ code }: { code: string }) {
	const highlighted = `<pre class="shiki"><code>${code}</code></pre>`;
	<div class="code-block">
		<div class="header">
			<button>{'Copy'}</button>
			<span class="lang">{'js'}</span>
		</div>
		<div class="content">{html highlighted}</div>
	</div>
}

component ContentWrapper({ children }: { children: any }) {
	<div class="wrapper">
		<div class="inner">{children}</div>
	</div>
}

export component HtmlAfterSwitchInChildren() {
	<ContentWrapper>
		<DynamicHeading level={1}>{'Title'}</DynamicHeading>
		<p>{'First paragraph'}</p>
		<p>{'Second paragraph'}</p>
		<CodeBlock code="const x = 1;" />
		<p>{'After code'}</p>
	</ContentWrapper>
}

component NavItem({
	href,
	text: label,
	active = false,
}: {
	href: string;
	text: string;
	active?: boolean;
}) {
	<div class={`nav-item${active ? ' active' : ''}`}>
		if (active) {
			<div class="indicator" />
		}
		<a {href}>
			<span>{label}</span>
		</a>
	</div>
}

component SidebarSection({ title, children }: { title: string; children: any }) {
	let &[expanded] = track(true);
	<section class="sidebar-section">
		<div class="section-header">
			<h2>{title}</h2>
			<button onClick={() => (expanded = !expanded)}>{'Toggle'}</button>
		</div>
		if (expanded) {
			<div class="section-items">{children}</div>
		}
	</section>
}

component SideNav({ currentPath }: { currentPath: string }) {
	<aside class="sidebar">
		<nav>
			<div class="group">
				<SidebarSection title="Getting Started">
					<NavItem href="/intro" text="Introduction" active={currentPath === '/intro'} />
					<NavItem href="/start" text="Quick Start" active={currentPath === '/start'} />
				</SidebarSection>
			</div>
			<div class="group">
				<SidebarSection title="Guide">
					<NavItem href="/guide/app" text="Application" active={currentPath === '/guide/app'} />
					<NavItem href="/guide/syntax" text="Syntax" active={currentPath === '/guide/syntax'} />
				</SidebarSection>
			</div>
		</nav>
	</aside>
}

component PageHeader() {
	<header class="page-header">
		<div class="logo">{'MyApp'}</div>
	</header>
}

export component LayoutWithSidebarAndMain() {
	<div class="layout">
		<PageHeader />
		<div class="content-wrapper">
			<SideNav currentPath="/intro" />
			<main class="main-content">
				<div class="article">
					<div>
						<h1>{'Introduction'}</h1>
						<p>{'Welcome to the docs.'}</p>
					</div>
				</div>
				if (true) {
					<div class="edit-link">
						<a href="/edit">{'Edit'}</a>
					</div>
				}
				<PageHeader />
			</main>
		</div>
	</div>
}

component ArticleWrapper({ children }: { children: any }) {
	<article class="doc-content">
		<div>{children}</div>
	</article>
}

component SimpleFooter() {
	<footer class="doc-footer">{'Footer'}</footer>
}

export component ArticleWithChildrenThenSibling() {
	<div class="content-container">
		<ArticleWrapper>
			<h1>{'Title'}</h1>
			<p>{'Content goes here.'}</p>
		</ArticleWrapper>
		if (true) {
			<div class="edit-link">
				<a href="/edit">{'Edit'}</a>
			</div>
		}
		if (true) {
			<nav class="prev-next">
				<a href="/prev">{'Previous'}</a>
			</nav>
		}
		<SimpleFooter />
	</div>
}

export component ArticleWithHtmlChildThenSibling() {
	const htmlContent = '<pre><code>const x = 1;</code></pre>';
	<div class="content-container">
		<ArticleWrapper>
			<div class="doc-content">{html htmlContent}</div>
		</ArticleWrapper>
		if (true) {
			<div class="edit-link">
				<a href="/edit">{'Edit'}</a>
			</div>
		}
		<SimpleFooter />
	</div>
}

component InlineArticleLayout({ children }: { children: any }) {
	<div class="content-container">
		<article class="doc-content">
			<div>{children}</div>
		</article>
		if (true) {
			<div class="edit-link">
				<a href="/edit">{'Edit'}</a>
			</div>
		}
		<SimpleFooter />
	</div>
}

export component InlineArticleWithHtmlChild() {
	const htmlContent = '<pre><code>const x = 1;</code></pre>';
	<InlineArticleLayout>
		<div class="doc-content">{html htmlContent}</div>
	</InlineArticleLayout>
}

component HeaderStub() {
	<header class="header">{'Header'}</header>
}

component SidebarStub() {
	<aside class="sidebar">{'Sidebar'}</aside>
}

component FooterStub() {
	<footer class="footer">{'Footer'}</footer>
}

component DocsLayoutInner({
	children,
	editPath = '',
	nextLink = null,
}: {
	children: any;
	editPath?: string;
	nextLink?: { href: string; text: string } | null;
}) {
	<div class="layout">
		<HeaderStub />
		<div class="docs-wrapper">
			<SidebarStub />
			<main class="docs-main">
				<div class="docs-container">
					<div class="content">
						<div class="content-container">
							<article class="doc-content">
								<div>{children}</div>
							</article>
							if (editPath) {
								<div class="edit-link">
									<a href="/edit">{'Edit on GitHub'}</a>
								</div>
							}
							if (nextLink) {
								<nav class="prev-next">
									<a href={nextLink.href}>{nextLink.text}</a>
								</nav>
							}
							<FooterStub />
						</div>
					</div>
				</div>
			</main>
		</div>
	</div>
}

export component DocsLayoutWithData() {
	const htmlContent = '<h1>Title</h1><p>Content</p>';
	<DocsLayoutInner editPath="docs/styling.md" nextLink={{ href: '/next', text: 'Next' }}>
		<div class="doc-content">{html htmlContent}</div>
	</DocsLayoutInner>
}

export component DocsLayoutWithoutData() {
	const htmlContent: string | undefined = undefined;
	<DocsLayoutInner>
		<div class="doc-content">{html htmlContent}</div>
	</DocsLayoutInner>
}

component DocsLayoutExact({
	children,
	editPath = '',
	prevLink = null,
	nextLink = null,
	toc = [],
}: {
	children: any;
	editPath?: string;
	prevLink?: { href: string; text: string } | null;
	nextLink?: { href: string; text: string } | null;
	toc?: { href: string; text: string }[];
}) {
	<div class="layout">
		<HeaderStub />
		<div class="docs-wrapper">
			<SidebarStub />
			<main class="docs-main">
				<div class="docs-container">
					<div class="content">
						<div class="content-container">
							<article class="doc-content">
								<div>{children}</div>
							</article>
							if (editPath) {
								<div class="edit-link">
									<a href={`/edit/${editPath}`}>{'Edit on GitHub'}</a>
								</div>
							}
							if (prevLink || nextLink) {
								<nav class="prev-next">
									if (prevLink) {
										<a href={prevLink.href} class="pager prev">
											<span class="title">{prevLink.text}</span>
										</a>
									} else {
										<span />
									}
									if (nextLink) {
										<a href={nextLink.href} class="pager next">
											<span class="title">{nextLink.text}</span>
										</a>
									}
								</nav>
							}
							<FooterStub />
						</div>
					</div>
					<aside class="aside">
						if (toc.length > 0) {
							<div class="aside-content">
								<nav class="outline">
									for (const item of toc) {
										<a href={item.href}>{item.text}</a>
									}
								</nav>
							</div>
						}
					</aside>
				</div>
			</main>
		</div>
	</div>
}

export component DocsLayoutExactWithData() {
	const htmlContent = '<h1>Styling Guide</h1><p>Content</p>';
	<DocsLayoutExact
		editPath="docs/guide/styling.md"
		prevLink={{ href: '/prev', text: 'Previous' }}
		nextLink={{ href: '/next', text: 'Next' }}
		toc={[
			{ href: '#intro', text: 'Introduction' },
			{ href: '#usage', text: 'Usage' },
		]}
	>
		<div class="doc-content">{html htmlContent}</div>
	</DocsLayoutExact>
}

export component DocsLayoutExactWithoutData() {
	const htmlContent: string | undefined = undefined;
	const editPath: string | undefined = undefined;
	const prevLink: { href: string; text: string } | null | undefined = undefined;
	const nextLink: { href: string; text: string } | null | undefined = undefined;
	const toc: { href: string; text: string }[] | undefined = undefined;

	<DocsLayoutExact {editPath} {prevLink} {nextLink} {toc}>
		<div class="doc-content">{html htmlContent}</div>
	</DocsLayoutExact>
}

export component TemplateWithHtmlContent() {
	const data = { title: 'Test', value: 42 };
	<div>
		<template id="t1">{html JSON.stringify(data)}</template>
		<p class="content">{'Main content'}</p>
	</div>
}

export component TemplateWithHtmlAndSiblings() {
	const data = { name: 'Ripple', version: '1.0' };
	<div class="wrapper">
		<h1>{'Title'}</h1>
		<template id="data-template">{html JSON.stringify(data)}</template>
		<p class="after-template">{'Content after template'}</p>
	</div>
}

component LayoutWithTemplate({ children, data }: { children: any; data: object }) {
	<div class="layout">
		<template id="page-data">{html JSON.stringify(data)}</template>
		<main>{children}</main>
	</div>
}

export component NestedTemplateInLayout() {
	const doc = { title: 'Comparison', html: '<p>Content</p>' };
	<LayoutWithTemplate data={doc}>
		<div class="doc-content">{html doc.html}</div>
	</LayoutWithTemplate>
}

export component HtmlCodeBlocksWithSiblingChain() {
	const html1 = '<span class="kw">const</span> <span class="id">a</span> = 1;';
	const html2 = '<span class="kw">const</span> <span class="id">b</span> = 2;';
	const html3 = '<span class="kw">const</span> <span class="id">c</span> = 3;';

	<section class="readable-section">
		<p>{'Ergonomics'}</p>
		<h2>{'Sibling traversal pattern'}</h2>
		<p>{'Before first block'}</p>
		<p>{'Before second block'}</p>
		<pre class="code-block">
			<code>{html html1}</code>
		</pre>
		<p>{'Between one and two'}</p>
		<pre class="code-block">
			<code>{html html2}</code>
		</pre>
		<p>{'Between two and three'}</p>
		<pre class="code-block">
			<code>{html html3}</code>
		</pre>
	</section>
}