<script lang="ts">
    // import { createEventDispatcher } from 'svelte';
    import type { key_val } from '$lib/stores/ae_stores';
    import { events_func } from '$lib/ae_events_functions';
    import { ae_api } from '$lib/stores/ae_stores';

    interface Props {
        event_id: string;
        onsuccess?: (badge: any) => void;
        oncancel?: () => void;
    }

    let { event_id, onsuccess, oncancel }: Props = $props();

    // const dispatch = createEventDispatcher();

    let full_name_override: string = $state('');
    let professional_title_override: string = $state('');
    let affiliations_override: string = $state('');
    let location_override: string = $state('');
    let email: string = $state('');
    let allow_tracking: boolean = $state(false);
    let badge_type_code: string = $state('');

    let submit_status: string = $state('idle'); // idle, loading, success, error

    // Example badge type codes (from ae_comp__badge_search.svelte)
    let badge_type_code_li = [
        { code: 'current_member', name: 'Member' },
        { code: 'inactive_member', name: 'Non-Member' },
        { code: 'current_member_trainee', name: 'Trainee Member' },
        { code: 'inactive_member_trainee', name: 'Trainee Non-Member' },
        { code: 'ex_all', name: 'Exhibitor All Access' },
        { code: 'ex_booth', name: 'Exhibitor Booth Staff' },
        { code: 'hftx', name: 'HFTX Master Academy' },
        { code: 'mcs', name: 'MCS Master Academy' },
        { code: 'pediatric', name: 'Pediatric' },
        { code: 'guest', name: 'Guest' },
        { code: 'staff', name: 'Staff' },
        { code: 'volunteer', name: 'Volunteer' },
        { code: 'test', name: 'Test' }
    ];

    async function handle_submit(event: Event) {
        event.preventDefault();
        submit_status = 'loading';
        const data_to_create: key_val = {
            full_name_override,
            professional_title_override,
            affiliations_override,
            location_override,
            email,
            allow_tracking,
            badge_type_code
        };

        try {
            const new_badge = await events_func.create_ae_obj__event_badge({
                api_cfg: $ae_api,
                event_id: event_id,
                data_kv: data_to_create
            });
            if (new_badge) {
                submit_status = 'success';
                // dispatch('success', new_badge);
                if (onsuccess) onsuccess(new_badge);
            } else {
                submit_status = 'error';
                // dispatch('error', 'Failed to create badge');
            }
        } catch (error) {
            submit_status = 'error';
            console.error('Error creating badge:', error);
            // dispatch('error', error);
        }
    }

    function handle_cancel() {
        // dispatch('cancel');
        if (oncancel) oncancel();
    }
</script>

<form onsubmit={handle_submit} class="p-4 space-y-4">
    <label class="label">
        <span>Full Name Override</span>
        <input type="text" bind:value={full_name_override} class="input" />
    </label>
    <label class="label">
        <span>Professional Title Override</span>
        <input
            type="text"
            bind:value={professional_title_override}
            class="input"
        />
    </label>
    <label class="label">
        <span>Affiliations Override</span>
        <textarea bind:value={affiliations_override} class="textarea" rows="2"
        ></textarea>
    </label>
    <label class="label">
        <span>Location Override</span>
        <input type="text" bind:value={location_override} class="input" />
    </label>
    <label class="label">
        <span>Email</span>
        <input type="email" bind:value={email} class="input" />
    </label>
    <label class="label flex items-center gap-2">
        <input type="checkbox" bind:checked={allow_tracking} class="checkbox" />
        <span>Allow Tracking</span>
    </label>
    <label class="label">
        <span>Badge Type</span>
        <select bind:value={badge_type_code} class="select">
            <option value="">-- Select Badge Type --</option>
            {#each badge_type_code_li as type_code_item (type_code_item.code)}
                <option value={type_code_item.code}
                    >{type_code_item.name}</option
                >
            {/each}
        </select>
    </label>

    <div class="flex justify-end gap-2">
        <button
            type="button"
            class="btn variant-filled-tertiary"
            onclick={handle_cancel}>Cancel</button
        >
        <button
            type="submit"
            class="btn variant-filled-primary"
            disabled={submit_status === 'loading'}
        >
            {#if submit_status === 'loading'}
                <span class="fas fa-spinner fa-spin mr-2"></span>
            {/if}
            Create Badge
        </button>
    </div>
</form>

{#if submit_status === 'success'}
    <p class="text-green-500">Badge created successfully!</p>
{:else if submit_status === 'error'}
    <p class="text-red-500">Error creating badge. Please try again.</p>
{/if}
