<script lang="ts">
	import { PostCreatedStore } from '$lib/post/adapter/presenter/postCreatedStore';
	import CreatePostDialog, {
		type CreatePostDialogFormParams,
	} from '$lib/post/framework/ui/CreatePostDialog.svelte';
	import { getContext } from 'svelte';
	import { toast } from 'svelte-sonner';

	const store = getContext<PostCreatedStore>(PostCreatedStore.name);
	const state = $derived($store);
	const { trigger: createPost } = store;

	async function onCreatePostDialogSubmit(params: CreatePostDialogFormParams) {
		const state = await createPost(params);

		if (state.isSuccess()) {
			toast.success(`Post created successfully with ID: ${state.data.id}`);
		} else if (state.isError()) {
			toast.error('Failed to create post', {
				description: state.error.message,
			});
		}
	}
</script>

<div class="dashboard-container mb-10">
	<div class="flex flex-row items-center justify-between">
		<h1 class="py-16 text-5xl font-bold text-gray-800">Post</h1>
		<CreatePostDialog disabled={state.isLoading()} onSubmit={onCreatePostDialogSubmit} />
	</div>
	<p></p>
</div>
