<script>
	import Apiclient from './Apiclient';

	$: targetUrl = '';
	$: customShortcode = '';
	$: shortcode = '';
	$: error = '';

	function createUrl() {
		console.log('here');
		Apiclient.createUrl(targetUrl, shortcode).then((res) => {
			console.log(res);
			if (res.status != 200) {
				error = res.data;
			} else {
				shortcode = res.data.shortcode;
			}
		});
	}

	function resetInput() {
		error = '';
		shortcode = '';
		customShortcode = '';
		targetUrl = '';
	}
</script>

<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-100 pb-3">Create new url</h2>
{#if error != ''}
	<div class="rounded-md bg-red-100 p-4 hidden" id="error_container">
		<div class="flex">
			<div class="flex-shrink-0">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-5 w-5 text-red-600"
					viewBox="0 0 20 20"
					fill="currentColor"
				>
					<path
						fill-rule="evenodd"
						d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
						clip-rule="evenodd"
					/>
				</svg>
			</div>
			<div class="ml-3">
				<p class="text-sm font-medium text-red-800" id="error_text">
					{error}
				</p>
			</div>
			<div class="ml-auto pl-3">
				<div class="-mx-1.5 -my-1.5">
					<button
						on:click={() => {
							error = '';
						}}
						class="inline-flex bg-red-100 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600"
					>
						<span class="sr-only">Dismiss</span>
						<svg
							class="h-5 w-5"
							x-description="Heroicon name: x"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-hidden="true"
						>
							<path
								fill-rule="evenodd"
								d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
								clip-rule="evenodd"
							/>
						</svg>
					</button>
				</div>
			</div>
		</div>
	</div>
{/if}
{#if shortcode == ''}
	<div>
		<div class="mx-auto lg:w-1/3 w-full mt-1 flex rounded-md shadow-sm">
			<input
				type="url"
				required
				class="flex-1 min-w-0 block border rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
				placeholder="https://target.url"
			/>
		</div>
		<div class="mt-1 flex rounded-md shadow-sm mx-auto lg:w-1/3 w-full">
			<span
				class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 dark:bg-gray-900 dark:text-gray-300 text-gray-500 sm:text-sm dark:border-gray-600"
			>
				https://kauf.es/
			</span>
			<input
				type="text"
				class="flex-1 min-w-0 block w-full px-3 py-2 border-t border-b border-r rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
				placeholder="custom_code"
			/>
		</div>
	</div>
{:else}
	<!-- TODO: -->
{/if}
<div class="mt-3 mx-auto text-center lg:w-1/3 w-full">
	{#if shortcode == ''}
		<button
			on:click={createUrl}
			class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
		>
			Create shorturl
		</button>
	{:else}
		<button
			on:click={resetInput}
			class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
		>
			Add another url
		</button>
	{/if}
</div>
