<script>"use strict";
import { onMount, afterUpdate } from "svelte";
import * as Prism from "prismjs";
import "prismjs/themes/prism.css";
import Dialog from "./Dialog.svelte";
import DialogHeader from "./DialogHeader.svelte";
import DialogTitle from "./DialogTitle.svelte";
import DialogBody from "./DialogBody.svelte";
import DialogContent from "./DialogContent.svelte";
import DialogFooter from "./DialogFooter.svelte";
import Button from "./Button.svelte";
let open = false;
let closeButton = true;
let dismissible = true;
let size = "md";
let codeSnippet = "";
function updateCodeSnippet() {
  codeSnippet = `<Dialog
  open={${open}}
  closeButton={${closeButton}}
  dismissible={${dismissible}}
  size="${size}"
  onClose={() => { /* Your close logic here */ }}
>
  <DialogHeader>
		<DialogTitle>Modal Title</DialogTitle>
	</DialogHeader>
	<DialogBody>
		<DialogContent>
			With less than a month to go before the European Union enacts new consumer privacy laws for
			its citizens, companies around the world are updating their terms of service agreements to
			comply.
		</DialogContent>
	</DialogBody>
	<DialogFooter>
		<Button>Action</Button>
	</DialogFooter>
</Dialog>`.trim();
}
function handleOpenModal() {
  open = true;
}
function handleCloseModal() {
  open = false;
}
onMount(() => {
  updateCodeSnippet();
  Prism.highlightAll();
});
afterUpdate(() => {
  updateCodeSnippet();
  const codeElement = document.getElementById("modal-code-snippet");
  if (codeElement) {
    codeElement.textContent = codeSnippet;
    Prism.highlightElement(codeElement);
  }
});
</script>

<Dialog {open} {closeButton} {dismissible} {size} onClose={handleCloseModal}>
	<DialogHeader>
		<DialogTitle>Modal Title</DialogTitle>
	</DialogHeader>
	<DialogBody>
		<DialogContent>
			With less than a month to go before the European Union enacts new consumer privacy laws for
			its citizens, companies around the world are updating their terms of service agreements to
			comply.
		</DialogContent>
	</DialogBody>
	<DialogFooter>
		<Button>Action</Button>
	</DialogFooter>
</Dialog>

<div class="flex flex-col items-center gap-4 mt-4">
	<button class="py-2 px-4 bg-blue-500 text-white rounded-md" on:click={handleOpenModal}>
		Open Modal
	</button>

	<div class="w-full max-w-lg">
		<!-- Display the code snippet -->
		<p>
			<strong>Code Snippet:</strong>
		</p>
		<pre><code class="language-html" id="modal-code-snippet">{codeSnippet}</code></pre>
	</div>

	<form on:submit|preventDefault class="flex flex-col gap-2">
		<label>
			<input type="checkbox" bind:checked={closeButton} />
			Show Close Button
		</label>
		<label>
			<input type="checkbox" bind:checked={dismissible} />
			Dismissible (Close on Backdrop Click)
		</label>
		<label>
			Size:
			<select bind:value={size}>
				<option value="sm">Small</option>
				<option value="md">Medium</option>
				<option value="lg">Large</option>
			</select>
		</label>
	</form>
</div>
