<script>
	import { _ } from "svelte-i18n";
	import { clickOutside } from "../base/outsideclick";

	import {
		DonationService,
		DonorService,
		RunnerService,
	} from "@odit/lfk-client-js";
	import Select from "svelte-select";
	import { createEventDispatcher, onMount } from "svelte";
	import toast from "svelte-french-toast";
	export let modal_open;
	const dispatch = createEventDispatcher();
	const getDonorLabel = (option) =>
		option.firstname + " " + (option.middlename || "") + " " + option.lastname;
	const filterDonors = (label, filterText, option) =>
		label.toLowerCase().includes(filterText.toLowerCase()) ||
		option.value.id.toString().startsWith(filterText.toLowerCase());
	$: donor = 0;
	$: runner = 0;
	$: donors = [];
	$: runners = [];
	$: type = "distance";
	$: is_paid = false;
	$: amount_input = 0;
	$: processed_last_submit = true;
	$: is_amount_valid = amount_input > 0;
	$: createbtnenabled = is_amount_valid;
	(() => {
		document.onkeydown = (e) => {
			e = e || window.event;
			if (e.key === "Escape") {
				modal_open = false;
			}
			if (e.keyCode === 13) {
				if (createbtnenabled === true) {
					createbtnenabled = false;
					submit();
				}
			}
		};
	})();
	function submit() {
		if (processed_last_submit === true) {
			let amount_cent = Math.floor(amount_input * 100);
			processed_last_submit = false;
			toast.loading($_("adding-donation"));
			if (type === "fixed") {
				let postdata = {
					donor,
					amount: amount_cent,
					paidAmount: 0,
				};
				if (is_paid) {
					postdata.paidAmount = amount_cent;
				}
				DonationService.donationControllerPostFixed(postdata)
					.then((result) => {
						donor = donors[0].id || 0;
						runner = runners[0].id || 0;
						amount_input = 0;
						modal_open = false;
						//
						toast.dismiss();
						toast.success($_("donation_added"));
						dispatch("created", { donations: [result] });
					})
					.catch((err) => {
						//
					})
					.finally(() => {
						processed_last_submit = true;
					});
			} else if (type === "anonymous") {
				let postdata = {
					amount: amount_cent,
				};
				DonationService.donationControllerPostAnonymous(postdata)
					.then((result) => {
						amount_input = 0;
						modal_open = false;
						//
						toast.dismiss();
						toast.success($_("donation_added"));
						dispatch("created", { donations: [result] });
					})
					.catch((err) => {
						//
					})
					.finally(() => {
						processed_last_submit = true;
					});
			} else if (type === "distance") {
				let postdata = {
					donor,
					runner,
					amountPerDistance: amount_cent,
				};
				DonationService.donationControllerPostDistance(postdata)
					.then((result) => {
						donor = donors[0].id || 0;
						runner = runners[0].id || 0;
						amount_input = 0;
						modal_open = false;
						//
						toast.dismiss();
						toast.success($_("donation_added"));
						dispatch("created", { donations: [result] });
					})
					.catch((err) => {
						//
					})
					.finally(() => {
						processed_last_submit = true;
					});
			}
		}
	}

	onMount(async () => {
		donors = (await DonorService.donorControllerGetAll()).map((r) => {
			return { label: getDonorLabel(r), value: r };
		});
		runners = (await RunnerService.runnerControllerGetAll()).map((r) => {
			return { label: getDonorLabel(r), value: r };
		});
	});
</script>

{#if modal_open}
	<div
		class="fixed z-10 inset-0 overflow-y-hidden"
		use:clickOutside
		on:click_outside={() => {
			modal_open = false;
		}}
	>
		<div
			class="flex items-end justify-center h-screen text-center sm:block p-0 lg:p-4"
		>
			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
				<div
					class="absolute inset-0 bg-neutral-500 opacity-75"
					data-id="modal_backdrop"
				/>
			</div>
			<span
				class="hidden sm:inline-block sm:align-middle sm:h-screen"
				aria-hidden="true">&#8203;</span
			>
			<div
				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
				role="dialog"
				aria-modal="true"
				aria-labelledby="modal-headline"
			>
				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
					<div class="">
						<div
							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
						>
							<svg
								class="size-6 text-blue-600"
								fill="currentColor"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 24 24"
								width="24"
								height="24"
								><path fill="none" d="M0 0h24v24H0z" />
								<path
									d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
								/></svg
							>
						</div>
						<div class="mt-3">
              <h3 class="text-xl leading-6 font-medium text-neutral-900">
                {$_("add-donation")}
              </h3>
							<nav
								class="relative z-0 flex border border-neutral-200 rounded-xl overflow-hidden mb-2"
							>
								<button
									on:click={() => {
										type = "distance";
									}}
									type="button"
									id="bar-with-underline-item-1"
									class:donation_active_tab={type === "distance"}
									class:donation_inactive_tab={type !== "distance"}
									aria-selected={type === "distance"}
									role="tab"
								>
									{$_("spende_pro_km")}
								</button>
								<button
									on:click={() => {
										type = "fixed";
									}}
									type="button"
									id="bar-with-underline-item-2"
									class:donation_active_tab={type === "fixed"}
									class:donation_inactive_tab={type !== "fixed"}
									aria-selected={type === "fixed"}
									role="tab"
								>
									{$_("festbetrag")}
								</button>
								<button
									on:click={() => {
										type = "anonymous";
									}}
									type="button"
									id="bar-with-underline-item-3"
									class:donation_active_tab={type === "anonymous"}
									class:donation_inactive_tab={type !== "anonymous"}
									aria-selected={type === "anonymous"}
									role="tab"
								>
									{$_("anonyme_spende")}
								</button>
							</nav>

							<div class="grid grid-cols-6 gap-2 lg:gap-6 text-left">
								{#if type === "anonymous"}
									<div class="col-span-6">
										<label
											for="donation_amount_eur"
											class="block text-sm font-medium text-neutral-900"
										>
											{$_("donation-amount")}</label
										>
										<div class="mt-1 flex rounded-md shadow-sm">
											<input
												autocomplete="off"
												class:border-red-500={!is_amount_valid}
												class:focus:border-red-500={!is_amount_valid}
												class:focus:ring-red-500={!is_amount_valid}
												bind:value={amount_input}
												type="number"
												step="0.01"
												name="donation_amount_eur"
												class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
												placeholder="2.00"
											/>
											<span
												class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm"
												>€</span
											>
										</div>
										{#if !is_amount_valid}
											<span
												class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
											>
												{$_("donation-amount-must-be-greater-that-0-00eur")}
											</span>
										{/if}
									</div>
								{:else}
									<div class="col-span-6">
										<label
											for="donor"
											class="block text-sm font-medium text-neutral-900"
											>{$_("donor")}</label
										>
										<Select
											containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 rounded-md p-2"
											itemFilter={(label, filterText, option) =>
												filterDonors(label, filterText, option)}
											items={donors}
											showChevron={true}
											placeholder={$_("search-for-donor-name-or-id")}
											noOptionsMessage={$_("no-donors-found")}
											on:select={(selectedValue) =>
												(donor = selectedValue.detail.value.id)}
											on:clear={() => (donors = null)}
										/>
									</div>
									{#if type === "distance"}
										<div class="col-span-6">
											<label
												for="donor"
												class="block text-sm font-medium text-neutral-900"
												>{$_("runner")}</label
											>
											<Select
												containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 rounded-md p-2"
												itemFilter={(label, filterText, option) =>
													filterDonors(label, filterText, option)}
												items={runners}
												showChevron={true}
												placeholder={$_("search-for-runner-by-name-or-id")}
												noOptionsMessage={$_("no-runners-found")}
												on:select={(selectedValue) =>
													(runner = selectedValue.detail.value.id)}
												on:clear={() => (runner = null)}
											/>
										</div>
									{/if}
									<div class="col-span-6">
										<label
											for="donation_amount_eur"
											class="block text-sm font-medium text-neutral-900"
										>
											{#if type === "fixed"}
												{$_("donation-amount")}
											{:else}{$_("amount-per-kilometer")}{/if}</label
										>
										<div class="mt-1 flex rounded-md shadow-sm">
											<input
												autocomplete="off"
												class:border-red-500={!is_amount_valid}
												class:focus:border-red-500={!is_amount_valid}
												class:focus:ring-red-500={!is_amount_valid}
												bind:value={amount_input}
												type="number"
												step="0.01"
												name="donation_amount_eur"
												class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
												placeholder="2.00"
											/>
											<span
												class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm"
												>€</span
											>
										</div>
										{#if !is_amount_valid}
											<span
												class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
											>
												{$_("donation-amount-must-be-greater-that-0-00eur")}
											</span>
										{/if}
									</div>
								{/if}
								{#if type === "fixed"}
									<div class="flex">
										<input
											bind:checked={is_paid}
											type="checkbox"
											class="shrink-0 mt-0.5 border-neutral-200 rounded-sm text-blue-600 focus:ring-blue-500 checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none"
											id="hs-default-checkbox"
										/>
										<label
											for="hs-default-checkbox"
											class="text-base text-neutral-900 ms-2 font-medium"
											>{$_("already-paid")}</label
										>
									</div>
								{/if}
							</div>
						</div>
					</div>
				</div>
				<div
					class="bg-neutral-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10"
				>
					<button
						disabled={!createbtnenabled}
						class:opacity-50={!createbtnenabled}
						on:click={submit}
						type="button"
						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
					>
						{$_("create")}
					</button>
					<button
						on:click={() => {
							modal_open = false;
						}}
						type="button"
						class="w-full justify-center rounded-md border border-neutral-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-neutral-900 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
					>
						{$_("cancel")}
					</button>
				</div>
			</div>
		</div>
	</div>
{/if}
