1<script lang="ts">
 2	import * as Dialog from '$lib/components/ui/dialog';
 3	import { ConversationSelection } from '$lib/components/app';
 4
 5	interface Props {
 6		conversations: DatabaseConversation[];
 7		messageCountMap?: Map<string, number>;
 8		mode: 'export' | 'import';
 9		onCancel: () => void;
10		onConfirm: (selectedConversations: DatabaseConversation[]) => void;
11		open?: boolean;
12	}
13
14	let {
15		conversations,
16		messageCountMap = new Map(),
17		mode,
18		onCancel,
19		onConfirm,
20		open = $bindable(false)
21	}: Props = $props();
22
23	let conversationSelectionRef: ConversationSelection | undefined = $state();
24
25	let previousOpen = $state(false);
26
27	$effect(() => {
28		if (open && !previousOpen && conversationSelectionRef) {
29			conversationSelectionRef.reset();
30		} else if (!open && previousOpen) {
31			onCancel();
32		}
33
34		previousOpen = open;
35	});
36</script>
37
38<Dialog.Root bind:open>
39	<Dialog.Portal>
40		<Dialog.Overlay class="z-[1000000]" />
41
42		<Dialog.Content class="z-[1000001] max-w-2xl">
43			<Dialog.Header>
44				<Dialog.Title>
45					Select Conversations to {mode === 'export' ? 'Export' : 'Import'}
46				</Dialog.Title>
47				<Dialog.Description>
48					{#if mode === 'export'}
49						Choose which conversations you want to export. Selected conversations will be downloaded
50						as a JSON file.
51					{:else}
52						Choose which conversations you want to import. Selected conversations will be merged
53						with your existing conversations.
54					{/if}
55				</Dialog.Description>
56			</Dialog.Header>
57
58			<ConversationSelection
59				bind:this={conversationSelectionRef}
60				{conversations}
61				{messageCountMap}
62				{mode}
63				{onCancel}
64				{onConfirm}
65			/>
66		</Dialog.Content>
67	</Dialog.Portal>
68</Dialog.Root>