<script>"use strict";
import { afterUpdate, onMount } from "svelte";
import { addToast } from "../toastStore";
import Toasts from "./Toasts.svelte";
import * as Prism from "prismjs";
import "prismjs/themes/prism.css";
import "prismjs/themes/prism-coy.css";
let variant = "success";
let leadingIcon = false;
let title = "Oh snap !";
let content = "Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.";
let dismissible = true;
let types = ["success", "info", "action", "warning", "danger", "base"];
let autoDismissAfter = 0;
let codeSnippet = "";
function updateCodeSnippet() {
  codeSnippet = `addToast({
  variant: '${variant}',
  title: '${title}',
  content: '${content}',
  dismissible: ${dismissible},
  autoDismissAfter: ${autoDismissAfter},
  leadingIcon: ${leadingIcon}
});`.trim();
}
function handleAddToast() {
  addToast({ variant, title, content, dismissible, autoDismissAfter, leadingIcon });
}
onMount(() => {
  updateCodeSnippet();
  Prism.highlightAll();
});
afterUpdate(() => {
  updateCodeSnippet();
  const codeElement = document.getElementById("toast-code-snippet");
  if (codeElement) {
    codeElement.textContent = codeSnippet;
    Prism.highlightElement(codeElement);
  }
});
</script>

<Toasts />

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

	<form on:submit|preventDefault class="flex flex-col justify-center items-start gap-2">
		<p>
			<label>
				Title:
				<input bind:value={title} />
			</label>
		</p>
		<p>
			<label>
				Content:
				<input bind:value={content} />
			</label>
		</p>
		<p>
			<label>
				<input bind:checked={leadingIcon} type="checkbox" />
				Leading Icon?
			</label>
		</p>
		<p>
			<label>
				Timeout (ms):
				<input bind:value={autoDismissAfter} type="number" />
			</label>
		</p>
		<p>
			<label>
				Type:
				<select bind:value={variant}>
					{#each types as type}
						<option value={type}>{type}</option>
					{/each}
				</select>
			</label>
		</p>
		<p>
			<label>
				<input bind:checked={dismissible} type="checkbox" />
				Dismissible?
			</label>
		</p>
		<button on:click={handleAddToast} class="w-full py-2 px-4 bg-sky-500 rounded-md text-base-50">
			Add toast
		</button>
	</form>
</div>
