<script>
	import Footer from '$lib/components/Footer.svelte';
	import '../theme.postcss';
	import '@skeletonlabs/skeleton/styles/skeleton.css';
	import '../app.css';
	import Navbar from './Navbar.svelte';
	import 'tw-elements/dist/css/tw-elements.min.css';
	// import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
	// import '@fortawesome/fontawesome-free/css/solid.css';
</script>

<Navbar />

<div class="mx-auto text-center">
	<slot />
</div>

<Footer />

<script>
	import FieldError from '$lib/components/form-fields/FieldError.svelte';

	export let /** @type string */ name;
	export let /** @type string */ id;
	export let /** @type string */ label;
	export let /** @type string */ value = '';
	export let /** @type string */ error;
</script>

<!--
  @component
  This is a custom `input` component that provides a material design
  with a floating placeholder/label

  ...
-->
<div class="relative">
	<input
		class="peer input variant-form-material border-0 border-b-2 !border-blackcoffee-300 bg-surface-500/10 pb-1 pl-4 pt-3 placeholder-transparent outline-0 placeholder-shown:py-2"
		{id}
		{name}
		placeholder={label}
		bind:value
	/>
	<label
		for={name}
		class="peer-placeholder-shown:text-blackcoffee-500/60; absolute left-4 top-0 text-xs font-semibold text-blackcoffee-500/70 transition-all duration-200 peer-placeholder-shown:top-[0.55rem] peer-placeholder-shown:text-base peer-placeholder-shown:font-normal"
		>{label}</label
	>

	<FieldError {error} />
</div>

<script>
	export let /** @type string */ id;
	export let /** @type string */ name;
	export let /** @type string */ label;
	export let /** @type string */ value = '';
</script>

<!--
  @component
  This is a custom `textarea` component that provides a material design
  with a floating placeholder/label

  ...
-->
<div class="relative mb-14 sm:mb-8 md:col-span-2">
	<textarea
		class="peer input variant-form-material border-0 border-b-2 !border-blackcoffee-300 bg-surface-500/10 pb-1 pl-4 pt-3 placeholder-transparent placeholder-shown:py-2"
		{id}
		{name}
		rows="4"
		placeholder={label}
		bind:value
	/>
	<label
		for={name}
		class="peer-placeholder-shown:text-blackcoffee-500/60; absolute left-4 top-0 text-xs font-semibold text-blackcoffee-500/70 transition-all duration-200 peer-placeholder-shown:top-[0.55rem] peer-placeholder-shown:text-base peer-placeholder-shown:font-normal"
		>{label}</label
	>
	<div class="absolute w-full text-sm text-blackcoffee/70 peer-focus:text-blackcoffee/70">
		Who will be taking part in the shoot? Include name, age, and any special accommodation info
	</div>
</div>

<script>
	/**
	 * @typedef RadioOption
	 * @property {string} id
	 * @property {string} value
	 * @property {string} [display]
	 * @property {boolean} [checked]
	 */

	export let /** @type string */ label = 'Select';
	export let /** @type string */ name;
	export let /** @type RadioOption[] */ options;
	export let /** @type string */ value = '';

	// set default value
	options.forEach((option) => {
		if (option.checked) value = option.value;
	});

	/**
	 * @param event {Event & { currentTarget: EventTarget & HTMLInputElement }}
	 */
	function handleChange(event) {
		value = event.currentTarget.value;
	}
</script>

<!--
  @component
  This is a custom `radio` component that provides a material design
  with a floating placeholder/label.

  ...
-->
<div class="relative flex flex-wrap justify-between px-4">
	<label for={name} class="text-left text-blackcoffee/70">{label} </label>
	<div class="flex gap-8">
		{#each options as option}
			<label class="flex items-center space-x-2">
				<input
					type="radio"
					class="bg-blackcoffee-300 text-blackcoffee-300 checked:bg-blackcoffee-300 focus:outline-2 focus:outline-blackcoffee-300/90"
					{name}
					id={option.id}
					value={option.value}
					checked={option.checked}
					on:change={handleChange}
				/>
				<p>{option.display ? option.display : option.value}</p>
			</label>
		{/each}
	</div>
</div>

<script>
	import SveltyPicker from 'svelty-picker';
	import FieldError from '$lib/components/form-fields/FieldError.svelte';

	function handleOpen() {
		picker.classList.remove('invisible');
	}

	/**
	 * Handle input changed events from underlying svelty-picker
	 * @param {CustomEvent | {detail: string}} e
	 */
	function handleInput(e) {
		value = e.detail;
		handleClose();
	}

	function handleClose() {
		picker.classList.add('invisible');
	}

	export let /** @type string */ id;
	export let /** @type string */ name;
	export let /** @type string */ label = 'Select date';
	export let /** @type string */ format = 'mm-dd-yyyy';
	export let /** @type string */ value = '';
	export let /** @type string */ error;

	let /** @type {HTMLElement}*/ picker;
</script>

<!--
  @component
  This is a custom date picker component that provides a material design
  with a floating placeholder/label, by wrapping a normal `input` element
  and providing a floating date picker UI

  ...
-->
<div class="relative">
	<input
		type="text"
		{id}
		{name}
		class="peer input variant-form-material border-0 border-b-2 !border-blackcoffee-300 bg-surface-500/10 pb-1 pl-4 pt-3 placeholder-transparent placeholder-shown:py-2"
		placeholder={label}
		bind:value
		autocomplete="off"
		on:click={handleOpen}
		on:focus={handleOpen}
		on:focusout={handleClose}
		on:keypress|preventDefault
		on:keydown|preventDefault
	/>
	<label
		for={name}
		class="absolute left-4 top-0 text-xs font-semibold text-blackcoffee-500/70 transition-all duration-200 peer-placeholder-shown:top-[0.55rem] peer-placeholder-shown:text-base peer-placeholder-shown:font-normal peer-placeholder-shown:text-blackcoffee-500/60"
		>{label}</label
	>
	<span class="invisible absolute left-0 top-11 z-10" bind:this={picker}
		><SveltyPicker
			pickerOnly={true}
			mode="date"
			{format}
			on:input={handleInput}
			on:blur={handleClose}
			on:mousedown={handleOpen}
		/></span
	>

	<FieldError {error} />
</div>

<script>
	import SveltyPicker from 'svelty-picker';
	import FieldError from '$lib/components/form-fields/FieldError.svelte';

	function handleOpen() {
		picker.classList.remove('invisible');
	}

	/**
	 * Handle input changed events from underlying svelty-picker
	 * @param {CustomEvent | {detail: string}} e
	 */
	function handleInput(e) {
		value = e.detail;
		handleClose();
	}

	function handleClose() {
		picker.classList.add('invisible');
	}

	export let /** @type string */ id;
	export let /** @type string */ name;
	export let /** @type string */ label = 'Select time';
	export let /** @type string */ format = 'HH:ii P';
	export let /** @type string */ value = '';
	export let /** @type string */ error;

	let /** @type {HTMLElement}*/ picker;
</script>

<!--
  @component
  This is a custom time picker component that provides a material design
  with a floating placeholder/label, by wrapping a normal `input` element
  and providing a floating time picker UI

  ...
-->
<div class="relative">
	<input
		type="text"
		{id}
		{name}
		class="peer input variant-form-material border-0 border-b-2 !border-blackcoffee-300 bg-surface-500/10 pb-1 pl-4 pt-3 placeholder-transparent placeholder-shown:py-2"
		placeholder={label}
		bind:value
		autocomplete="off"
		on:click={handleOpen}
		on:focus={handleOpen}
		on:focusout={handleClose}
		on:keypress|preventDefault
		on:keydown|preventDefault
	/>
	<label
		for={name}
		class="absolute left-4 top-0 text-xs font-semibold text-blackcoffee-500/70 transition-all duration-200 peer-placeholder-shown:top-[0.55rem] peer-placeholder-shown:text-base peer-placeholder-shown:font-normal peer-placeholder-shown:text-blackcoffee-500/60"
		>{label}</label
	>
	<span class="invisible absolute left-0 top-11 z-10" bind:this={picker}>
		<SveltyPicker
			pickerOnly={true}
			mode="time"
			{format}
			autocommit={false}
			on:input={handleInput}
			on:blur={handleClose}
			on:mousedown={handleOpen}
		/>
	</span>

	<FieldError {error} />
</div>

<script>
	import FieldError from '$lib/components/form-fields/FieldError.svelte';
	import { clickOutside } from '$lib/actions';
	/**
	 * @typedef {Object} SelectOption
	 * @property {string} value
	 * @property {string} display
	 * @property {string} [secondary]
	 * @property {string} [description]
	 */

	function toggleOptionsShown() {
		isOpen = !isOpen;
	}

	function closeOptions() {
		isOpen = false;
	}

	/**
	 * @param {KeyboardEvent  & { currentTarget: EventTarget & HTMLDivElement }} event
	 */
	function handleSelectKeypress(event) {
		throw new Error('Function not implemented.');
	}

	/**
	 * @param {KeyboardEvent  & { currentTarget: EventTarget & HTMLDivElement }} event
	 */
	function handleOptionKeypress(event) {
		throw new Error('Function not implemented.');
	}

	let isOpen = false;
	export let /** @type string */ id;
	export let /** @type string */ name;
	export let /** @type string */ placeholder = 'Select a value';
	export let /** @type SelectOption[] */ options;
	export let /** @type string */ value = '';
	export let /** @type string */ error;

	$: isPlaceholderShown = value === '';
</script>

<!--
  @component
  This is a custom `select` component that provides a material design
  with a floating placeholder/label, and a customizable option list.

  ...
-->
<div class="relative" use:clickOutside on:click_outside={closeOptions}>
	<!-- Hidden select element that will store the selected item. -->
	<select {id} {name} {value} class="hidden">
		<option value="" />
		{#each options as option}
			<option value={option.value}>{option.display}</option>
		{/each}
	</select>

	<!-- Custom listbox implementation that will update the hidden select field. -->
	<div
		role="listbox"
		class="select variant-form-material border-blackcoffee-300 pb-1 pl-4 pt-3 text-left text-blackcoffee/70 after:absolute after:right-4 after:top-4 after:h-2 after:w-2 after:border-b-[0.175rem] after:border-r-[0.127rem] after:border-blackcoffee-300 after:content-[''] focus:border-blackcoffee-300 focus:outline-none"
		class:open={isOpen}
		class:selected={!isPlaceholderShown}
		on:click={toggleOptionsShown}
		on:keypress={handleSelectKeypress}
		tabindex="0"
	>
		{isPlaceholderShown ? placeholder : value}
	</div>

	<!-- Options list container -->
	<div
		class="options rounded-b-md border-[1px] border-t-0 border-blackcoffee-300 bg-surface-400"
		class:hide={!isOpen}
	>
		{#each options as option}
			<!-- Option item container -->
			<div
				class="border-b-[1px] border-blackcoffee-300 p-2 pl-4 text-left last:rounded-b-md last:border-none hover:bg-surface-500"
				role="option"
				tabindex="0"
				aria-selected={option.value === value}
				on:click={() => {
					value = option.value;
					toggleOptionsShown();
				}}
				on:keypress={handleOptionKeypress}
			>
				<!-- Secondary text, shown in semi-bold font weight-->
				{#if option.secondary}
					<span class="font-semibold">
						{option.secondary}
					</span>
				{/if}

				<!-- Primary display text, shown in bold ONLY IF there is secondary text -->
				<span class:font-bold={option.secondary}>
					{option.display}
				</span>

				<!-- Description Container, allows me to provide custom HTML. -->
				{#if option.description}
					<span class="block text-sm leading-3 tracking-tight text-blackcoffee/70"
						>{@html option.description}</span
					>
				{/if}
			</div>
		{/each}
	</div>

	<label
		for="session"
		class="absolute left-4 top-3 hidden text-base font-normal"
		class:floating={!isPlaceholderShown}>{placeholder}</label
	>

	<FieldError {error} />
</div>

<style lang="postcss">
	.select.selected {
		@apply text-primary-500;
	}

	/*chevron inside select box*/
	.select:after {
		transform: rotate(45deg);
	}

	/*point the chevron upwards when options list shown:*/
	.select.open:after {
		transform: translateY(0.25rem) rotate(-135deg);
	}

	/*prevent select of options and current selected*/
	.options div,
	.select {
		user-select: none;
	}

	.hide {
		display: none;
	}

	.options {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 99;
	}

	label.floating {
		transition-property: all;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 200ms;
		@apply text-blackcoffee-500/70;
	}
</style>

<script>
	let shown = false;
	export function show() {
		shown = true;
	}

	export let /** @type string */ name;
</script>

<div class="fixed inset-0 bg-blackcoffee/60" class:hidden={!shown} />
<div
	class=" fixed left-0 right-0 z-50 mx-8 rounded-lg bg-gradient-to-b from-eggshell to-eggshell px-4 py-10 shadow-2xl shadow-black drop-shadow-2xl sm:mx-auto sm:max-w-lg sm:!px-20 sm:!py-20"
	class:hidden={!shown}
>
	<h3 class="text-4xl uppercase">Thank you</h3>
	{#if name}
		<h3 class="text-4xl uppercase">{name}</h3>
	{/if}
	<p class="mt-6 text-xl leading-8 tracking-tight text-blackcoffee/70">
		We have received your booking inquiry and will reach out soon to finalize!
	</p>
	<button
		class="btn variant-soft-success mt-8 text-lg"
		on:click={() => {
			shown = false;
		}}>Continue</button
	>
</div>