<script lang="ts">
import { liveQuery } from 'dexie';
import { events_func } from '$lib/ae_events/ae_events_functions';
import { ae_api } from '$lib/stores/ae_stores';
import { events_slct } from '$lib/stores/ae_events_stores';
import Comp_badge_obj_view from '../[badge_id]/ae_comp__badge_obj_view.svelte';
import type { ae_EventBadge } from '$lib/types/ae_types';
import { ArrowLeft, Printer } from '@lucide/svelte';
interface Props {
    data: any; // PageData from SvelteKit
}

let { data }: Props = $props();

let event_id = $derived(data.params.event_id);
let printed_status_filter = $derived(
    data.url.searchParams.get('printed_status')
);
let badge_type_code_filter = $derived(
    data.url.searchParams.get('badge_type_code')
);

let lq__filtered_badges = $derived(
    liveQuery(async () => {
        const filters: {
            printed_status?: 'all' | 'printed' | 'not_printed';
            type_code?: string;
        } = {};
        if (printed_status_filter)
            filters.printed_status = printed_status_filter as any;
        if (badge_type_code_filter) filters.type_code = badge_type_code_filter;

        // Fetch badges using the search function, with a high limit for bulk printing
        const result = await events_func.search__event_badge({
            api_cfg: $ae_api,
            event_id: event_id,
            limit: 5000, // A high limit to fetch all relevant badges for printing
            ...filters,
            log_lvl: 0
        });
        return (result || []) as ae_EventBadge[];
    })
);

// Function to trigger browser print
function trigger_print() {
    window.print();
}
</script>

<svelte:head>
    <title>Bulk Print Badges for Event {event_id}</title>
    <style>
    /* Print-specific styles */
    @media print {
        body {
            margin: 0;
            padding: 0;
        }
        .print-button {
            display: none;
        }
        /* Customize how badges are laid out for printing */
        .badge-print-container {
            page-break-after: always; /* Each badge on a new page or arrange multiple per page */
            /* Adjust width/height for optimal badge size on print media */
            width: 4in; /* Example width */
            height: 6in; /* Example height */
            margin: 0.25in; /* Example margin */
            border: 1px solid #ccc; /* Optional: for visual separation on print */
        }
    }
    </style>
</svelte:head>

<section class="p-4">
    <h1 class="h1">Bulk Print Badges</h1>

    <div class="print-button my-4">
        <button type="button" class="btn btn-primary" onclick={trigger_print}>
            <Printer size="1em" class="mr-2" /> Print Badges
        </button>
        <a href={`/events/${event_id}/badges`} class="btn btn-tertiary ml-2">
            <ArrowLeft size="1em" class="mr-2" /> Back to Search
        </a>
    </div>

    {#if $lq__filtered_badges}
        {#if $lq__filtered_badges.length > 0}
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
                {#each $lq__filtered_badges as badge_obj (badge_obj.event_badge_id)}
                    <div class="badge-print-container">
                        <Comp_badge_obj_view
                            {event_id}
                            event_badge_id={badge_obj.event_badge_id}
                            lq__event_badge_obj={badge_obj}
                            is_review_mode={false}
                            log_lvl={0} />
                    </div>
                {/each}
            </div>
        {:else}
            <p>No badges found matching your criteria for printing.</p>
        {/if}
    {:else}
        <p>Loading badges for printing...</p>
    {/if}
</section>
