<script lang="ts">
	import { Button, Label } from "@sveltestrap/sveltestrap";
	import type { PageData } from "./$types";
	import ChannelSelect from "./ChannelSelect.svelte";
	import apiFetch, { type ApiError, type ChannelConfig } from "$lib/api";
	import { addToast } from "$lib/toast";

	export let data: PageData;

	$: channels = data.guild.channels;

	// This only saves log channels. All other pages are lists and are saved immediately upon adding/removing an entry.
	const save = async () => {
		try {
			const resp = await apiFetch<ChannelConfig>(
				"PATCH",
				`/api/guilds/${data.guild.id}`,
				channels,
			);
			channels = resp;

			addToast({
				header: "Saved log channels.",
				body: "Successfully edited log channels.",
			});
		} catch (e) {
			addToast({
				header: "Error saving changes to log channels",
				body:
					(e as ApiError).message || "Unknown error. Please try again later.",
			});
		}
	};
</script>

<div class="d-flex">
	<h3>Log channels</h3>
	<Button on:click={save} class="ms-2">Save changes</Button>
</div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
	<div class="p-2">
		<Label><strong>Server changes</strong></Label>
		<ChannelSelect bind:value={channels.guild_update} options={data.options} />
	</div>
	<div class="p-2">
		<Label><strong>Changes to emotes</strong></Label>
		<ChannelSelect
			bind:value={channels.guild_emojis_update}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>New roles</strong></Label>
		<ChannelSelect
			bind:value={channels.guild_role_create}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>Changes to roles</strong></Label>
		<ChannelSelect
			bind:value={channels.guild_role_update}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>Deleted roles</strong></Label>
		<ChannelSelect
			bind:value={channels.guild_role_delete}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>New channels</strong></Label>
		<ChannelSelect
			bind:value={channels.channel_create}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>Changes to channels</strong></Label>
		<ChannelSelect
			bind:value={channels.channel_update}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>Deleted channels</strong></Label>
		<ChannelSelect
			bind:value={channels.channel_delete}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>Users joining</strong></Label>
		<ChannelSelect
			bind:value={channels.guild_member_add}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>Users leaving</strong></Label>
		<ChannelSelect
			bind:value={channels.guild_member_remove}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>Changes to key roles</strong></Label>
		<ChannelSelect
			bind:value={channels.guild_key_role_update}
			options={data.options}
		/>
		<small>
			Key roles can be designated with the <code>/key-roles</code> command or the
			"Key roles" tab above.
		</small>
	</div>
	<div class="p-2">
		<Label><strong>Member name changes</strong></Label>
		<ChannelSelect
			bind:value={channels.guild_member_nick_update}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>Member icon changes</strong></Label>
		<ChannelSelect
			bind:value={channels.guild_member_avatar_update}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>Timeouts</strong></Label>
		<ChannelSelect
			bind:value={channels.guild_member_timeout}
			options={data.options}
		/>
		<small> Note that this will not log timeouts naturally expiring. </small>
	</div>
	<div class="p-2">
		<Label><strong>Kicked users</strong></Label>
		<ChannelSelect
			bind:value={channels.guild_member_kick}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>Banned users</strong></Label>
		<ChannelSelect bind:value={channels.guild_ban_add} options={data.options} />
	</div>
	<div class="p-2">
		<Label><strong>Unbanned users</strong></Label>
		<ChannelSelect
			bind:value={channels.guild_ban_remove}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>New invites</strong></Label>
		<ChannelSelect bind:value={channels.invite_create} options={data.options} />
	</div>
	<div class="p-2">
		<Label><strong>Deleted invites</strong></Label>
		<ChannelSelect bind:value={channels.invite_delete} options={data.options} />
	</div>
	<div class="p-2">
		<Label><strong>Edited messages</strong></Label>
		<ChannelSelect
			bind:value={channels.message_update}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>Deleted messages</strong></Label>
		<ChannelSelect
			bind:value={channels.message_delete}
			options={data.options}
		/>
	</div>
	<div class="p-2">
		<Label><strong>Bulk deleted messages</strong></Label>
		<ChannelSelect
			bind:value={channels.message_delete_bulk}
			options={data.options}
		/>
		<small> This will only be triggered by bots, not normal users. </small>
	</div>
</div>
