<script lang="ts">
	import { Alert, Button, Input, InputGroup } from "@sveltestrap/sveltestrap";
	import type { PageData } from "./$types";
	import { fastFetch, type ApiError } from "$lib/api";
	import { addToast } from "$lib/toast";
	import { goto } from "$app/navigation";

	export let data: PageData;

	let guildName: string = "";

	const deleteData = async () => {
		try {
			await fastFetch("POST", `/api/guilds/${data.guild.id}/leave`, {
				name: guildName,
			});
			addToast({
				header: "Left server",
				body: `Successfully left ${data.guild.name} and deleted all data related to it.`,
			});

			await goto("/dash");
		} catch (e) {
			addToast({
				header: "Error leaving server",
				body: (e as ApiError).message || "Unknown error",
			});
		}
	};
</script>

<h3>Delete this server's data</h3>

<p>
	To make Catalogger leave your server and delete all data from your server,
	fill its name in below and press "Delete".
	<br />
	<strong>
		This is irreversible. If you change your mind later, your data cannot be
		restored.
	</strong>
	<br />
	If you just want to make Catalogger leave your server but not delete data, simply
	kick it via Discord.
</p>

<Alert color="danger">
	<h4 class="alert-heading">This is irreversible!</h4>

	We <strong>cannot</strong> help you recover data deleted in this way.
</Alert>

<p>
	<InputGroup>
		<Input type="text" placeholder="Server name" bind:value={guildName} />
		<Button
			color="danger"
			disabled={guildName !== data.guild.name}
			on:click={deleteData}
		>
			Delete
		</Button>
	</InputGroup>
</p>
