<script lang="ts">
// export let data;
// console.log(`ae_events_leads exhibit [slug] leads_manage.svelte data:`, data);

import { ae_util } from '$lib/ae_utils';
import { liveQuery } from "dexie";
import { db_events } from "$lib/db_events";
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';

// let param_slug_event_exhibit_id = data.params.slug;

let event_exhibit_obj = liveQuery(
    () => db_events.exhibits.get($events_slct.exhibit_id)
);


// Updated 2022-04-22
export let get_event_exhibit_tracking_export = async function get_event_exhibit_tracking_export({event_exhibit_id, file_type='CSV', return_file=true, filename=null, auto_download=false, params={}, log_lvl=0}) {
    console.log('*** stores_event_api.js: get_event_exhibit_tracking_export() ***');

    const endpoint = `/event/exhibit/${event_exhibit_id}/tracking/export`;
    if (file_type == 'CSV' || file_type == 'Excel') {
        params['file_type'] = file_type;
    }
    params['return_file'] = true;

    let event_exhibit_tracking_export_file_get_promise = await api.get_object({api_cfg: ae_api, endpoint: endpoint, params: params, return_blob: true, filename: filename, auto_download: auto_download, log_lvl: log_lvl});
    // console.log(event_exhibit_tracking_export_file_get_promise);
    return event_exhibit_tracking_export_file_get_promise;
}
</script>


<section class="tab__manage flex flex-col wrap justify-center items-center space-y-4 ae_h_scrollfix">

<h2 class="h3">
    <!-- <span class="fas fa-download"></span> -->
    Login and License
</h2>

{#if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}

    <div>
        <strong>Logged in and using license for:</strong>
        {#if $event_exhibit_obj?.license_li_json}
        <!-- <div class="flex flex-row wrap gap-1"> -->
        {#each $event_exhibit_obj?.license_li_json as license, index}
            {#if license.email === $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
            <div class="flex flex-row items-center space-x-2">
                <span class="ae_label">Name:</span>
                <span class="ae_value">{license.full_name}</span>
            </div>
            {/if}
        {/each}
        <!-- </div> -->
        {/if}
        <div class="flex flex-row items-center space-x-2">
            <span class="ae_label">Email:</span>
            <span class="ae_value">{$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
        </div>
        <div class="flex flex-row items-center space-x-2">
        <span class="ae_label">Started:</span>
        <span class="ae_value">{ae_util.iso_datetime_formatter($events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].updated_on, 'datetime_long')}</span>
        </div>
        <!-- Show the full_name of the person associated with that license key email address. The license information is stored in an array. The license key is not the index number value in the array. Ideally I was planning to make the key the email address, not an array index number. -->
        <button
            type="button"
            class="btn btn-sm variant-soft-warning w-48"
            on:click={() => {
                $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key = null;
            }}
            >
            <span class="fas fa-times mx-1"></span>
            Clear License
        </button>

        <button
            type="button"
            on:click={() => {
                console.log('Log Out');
                $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] = null;
            }}
            title="Log out"
            class="btn btn-sm variant-soft-warning w-48"
            >
            <span class="fas fa-sign-out-alt mx-1"></span>
            Log Out
        </button>
    </div>

{:else if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
    <div class="variant-soft-warning">You are logged in using the shared passcode for the exhibit. You will want to select a license to fully use this lead retrieval service. Please go to the Main tab and select a license to use.</div>

    <button
        type="button"
        on:click={() => {
            console.log('Log Out');
            $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] = null;
        }}
        title="Log out"
        class="btn btn-sm variant-soft-warning w-48"
        >
        <span class="fas fa-sign-out-alt mx-1"></span>
        Log Out
    </button>
{:else}
    <div class="variant-soft-warning">Please go to the Main tab to login using the shared staff passcode for this exhibit. Then select a license to use.</div>
{/if}


{#if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}


<hr class="border w-full">

<h2 class="h3">
    <!-- <span class="fas fa-download"></span> -->
    Export Data
</h2>

<p>Use this to export the leads data for this exhibit to an Excel file format. The data can be downloaded at anytime using the export button below.</p>
<button
    type="button"
    on:click={() => {
        if (!confirm('Download exported data Excel file?')) {
            return false;
        }
        get_event_exhibit_tracking_export({ 'event_exhibit_id': $events_slct.exhibit_id, file_type: 'Excel', 'return_file': true, filename: `lead_retrieval_export_${$events_slct.exhibit_obj.name.replaceAll(' ', '_')}.xlsx`, auto_download: true, log_lvl: 2 });
        // .replace(' ', '_')

    }}
    disabled={true}
    class="btn btn-sm variant-soft-primary w-48 mb-1 export_data_btn"
    title={`TEMPORARILY DISABLED: Download leads data for ${$events_slct.exhibit_obj.name}`}
    >
    <span class="fas fa-download mx-1"></span> Export Data
</button>

{/if} <!-- $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id].key -->


<hr class="border w-full">

<h2 class="h3">
    <!-- <span class="fas fa-cogs"></span> -->
    Additional Settings
</h2>

{#if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id]}

    Turn on iframe mode:
    <button
        type="button"
        on:click={() => {
            console.log('Turn on iframe mode');
            $ae_loc.iframe = !$ae_loc.iframe;
        }}
        class="btn btn-sm variant-soft w-48"
        >
        <span class="fas fa-compress mx-1"></span>
        Turn {$ae_loc.iframe ? 'off' : 'on'} iframe mode
    </button>

    Show or hide additional details:
    <button
        type="button"
        on:click={() => {
            console.log('Show/Hide Details');
            $events_loc.show_details = !$events_loc.show_details;
        }}
        class="btn btn-sm variant-soft w-48"
        >
        <span class="fas fa-eye mx-1"></span>
        Show/Hide Details
    </button>

    <!-- {#if $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
    <button
        type="button"
        on:click={() => {
            console.log('Log Out');
            $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] = null;
        }}
        title="Log out"
        class="btn variant-soft-primary w-48"
        >
        <span class="fas fa-sign-out-alt mx-1"></span>
        Log Out
    </button>
    <p>To use the lead retrieval service, please select a license from the list on the Main tab.</p>
    {/if} -->

{:else}
    <div>You must be logged in to view this tab.</div>
{/if} <!-- $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] -->

</section>
