<script>"use strict";
import { afterUpdate, onMount } from "svelte";
import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell } from ".";
import Checkbox from "./Checkbox.svelte";
import Button from "./Button.svelte";
import Badge from "./Badge.svelte";
import Pagination from "./Pagination.svelte";
import * as Prism from "prismjs";
import "prismjs/themes/prism.css";
import "prismjs/themes/prism-coy.css";
import TableFooter from "./TableFooter.svelte";
let role = "checkbox";
let ariaChecked = void 0;
let disabled = false;
let containsCheckbox = true;
let codeSnippet = "";
function updateCodeSnippet() {
  codeSnippet = `
<TableContainer>
	<Table>
		<TableHead>
			<TableRow role="checkbox">
				<TableCell containsCheckbox={${containsCheckbox}}><Checkbox size="sm" /></TableCell>
				<TableCell>Item Title</TableCell>
				<TableCell>Item Title</TableCell>
				<TableCell>Item Title</TableCell>
				<TableCell>Item Title</TableCell>
				<TableCell></TableCell>
			</TableRow>
		</TableHead>
		<TableBody>
			<TableRow role={${role}} ariaChecked={${ariaChecked}} disabled={${disabled}}>
				<TableCell containsCheckbox={${containsCheckbox}}><Checkbox size="sm" /></TableCell>
				<TableCell>Item Title</TableCell>
				<TableCell>Item Title</TableCell>
				<TableCell>Item Title</TableCell>
				<TableCell><Badge color="emerald" leadingIcon="check" label="Live" /></TableCell>
				<TableCell className="flex">
					<Button variant="text" leadingIcon={{ iconName: 'menu', size: 'sm' }} />
					<Button variant="text" leadingIcon={{ iconName: 'percent', size: 'sm' }} />
					<Button variant="text" leadingIcon={{ iconName: 'activity', size: 'sm' }} />
				</TableCell>
			</TableRow>
		</TableBody>
	</Table>
	<TableFooter>
		<span class="text-stone-400 text-2xl">Showing 1-10 of total number of items</span>
		<Pagination currentPage={0} totalPages={5} />
	</TableFooter>
</TableContainer>`.trim();
}
onMount(() => {
  updateCodeSnippet();
  Prism.highlightAll();
});
afterUpdate(() => {
  updateCodeSnippet();
  const codeElement = document.getElementById("table-code-snippet");
  if (codeElement) {
    codeElement.textContent = codeSnippet;
    Prism.highlightElement(codeElement);
  }
});
</script>

<div class="flex flex-col justify-center items-center">
	<div class="w-3/4">
		<!-- Display the code snippet -->
		<p>
			<strong>Note:</strong> Ensure <code class="language-js">{`<TableContainer />`}</code> is imported
			at the root level.
		</p>
		<pre><code class="language-js" id="table-code-snippet">{codeSnippet}</code></pre>
	</div>

	<!-- Form to customize the table -->
	<form on:submit|preventDefault class="flex flex-col justify-center items-start gap-4 my-4">
		<p>
			<label>
				Role:
				<select bind:value={role}>
					<option value="row">Row</option>
					<option value="checkbox">Checkbox</option>
				</select>
			</label>
		</p>
		<p>
			<label>
				Aria Checked:
				<select bind:value={ariaChecked}>
					<option value={undefined}>Undefined</option>
					<option value={true}>True</option>
					<option value={false}>False</option>
				</select>
			</label>
		</p>
		<p>
			<label>
				Disabled:
				<input type="checkbox" bind:checked={disabled} />
			</label>
		</p>
		<p>
			<label>
				Contains Checkbox:
				<input type="checkbox" bind:checked={containsCheckbox} />
			</label>
		</p>
	</form>

	<TableContainer>
		<Table>
			<TableHead>
				<TableRow {role}>
					<TableCell {containsCheckbox}><Checkbox size="sm" /></TableCell>
					<TableCell>Item Title</TableCell>
					<TableCell>Item Title</TableCell>
					<TableCell>Item Title</TableCell>
					<TableCell>Item Title</TableCell>
					<TableCell></TableCell>
				</TableRow>
			</TableHead>
			<TableBody>
				<TableRow {role} {disabled} {ariaChecked}>
					<TableCell {containsCheckbox}><Checkbox size="sm" /></TableCell>
					<TableCell>Item Title fweiopfejipoj</TableCell>
					<TableCell>Item Title</TableCell>
					<TableCell>Item Title</TableCell>
					<TableCell><Badge color="emerald" leadingIcon="check" label="Live" /></TableCell>
					<TableCell className="flex">
						<Button variant="text" leadingIcon={{ iconName: 'menu', size: 'sm' }} />
						<Button variant="text" leadingIcon={{ iconName: 'percent', size: 'sm' }} />
						<Button variant="text" leadingIcon={{ iconName: 'activity', size: 'sm' }} />
					</TableCell>
				</TableRow>
			</TableBody>
		</Table>
		<TableFooter>
			<span class="text-stone-400 text-2xl">Showing 1-10 of total number of items</span>
			<Pagination currentPage={0} totalPages={5} />
		</TableFooter>
	</TableContainer>
</div>
