<script lang="ts">
import type { SvelteComponent } from 'svelte';
import { onMount } from 'svelte';


// This works and uses local storage:
// store_current_tab must be prefixed with $ to be reactive.
import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, RadioGroup, RadioItem, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
import type { Writable } from 'svelte/store';

import { ae_util } from '$lib/ae_utils';
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';

// Stores

// Props
/** Exposes parent props to this component. */
export let parent: SvelteComponent;
console.log(`Parent:`, parent);
export let container_class_li = '';


const modalStore = getModalStore();


if ($slct.event_presenter_id) {
    console.log(`Presenter ID selected: ${$slct.event_presenter_id}`);
    console.log(`Presenter object selected:`, $slct.event_presenter_obj);

    $slct_trigger = 'load__event_presenter_obj';
}

onMount(() => {
    console.log('** Component Mounted: ** View Modal - Presenter Obj');
});

</script>

<!-- @component This is the Presenters modal view form. -->

{#if $modalStore[0]}
<section class="svelte_component ae_view_modal ae_obj__event_presenter {container_class_li} p-4 space-y-4">

<header class={parent.regionHeader}>
    {@html $slct.event_presenter_obj.full_name}

    <button class="btn variant-glass-primary float-end" on:click={parent.onClose}>
        <span class="fas fa-times mx-1"></span>
        Close
    </button>
</header>

<p>This quick view of a presenter's information is customizable or can be hidden completely.</p>

<div class="event_presenter__content space-y-4">
    <div
        class="event_presenter_biography biography"
        >
        <h2 class="h4">Biography:</h2>
        <pre class="event_presenter__biography pre_wrap">{@html $slct.event_presenter_obj.biography ? $slct.event_presenter_obj.biography : '-- No Bio Given --'}</pre>
    </div>

    <div
        class="event_presenter__professional_title"
        >
        <span class="ae_label">Professional Title:</span>
        <span class="ae_value">{@html $slct.event_presenter_obj.professional_title ? $slct.event_presenter_obj.professional_title : '-- No Title Given --'}</span>
    </div>

    <div
        class="event_presenter__affiliations"
        >
        <span class="ae_label">Affiliations:</span>
        <span class="ae_value">{@html $slct.event_presenter_obj.affiliations ? $slct.event_presenter_obj.affiliations : '-- No Affiliations Given --'}</span>
    </div>

    <div
        class="event_presenter__email"
        >
        <span class="ae_label">Email:</span>
        <span class="ae_value"><span class="fas fa-envelope"></span>
        <a href="mailto:{$slct.event_presenter_obj.email}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.event_presenter_obj.email}</a></span>
    </div>

    <div
        class:ae_d_none={!$slct.event_presenter_obj.phone_mobile}
        class="event_presenter_phone_mobile"
        >
        <span class="ae_label">Phone:</span>
        <span class="ae_value"><span class="fas fa-phone"></span> {$slct.event_presenter_obj.phone_mobile} &mdash; {$slct.event_presenter_obj.phone_mobile}</span>
    </div>

    <!-- <div>
        <span class="ae_label">Approved:</span>
        <span class="ae_value">
            {$slct.event_presenter_obj.approve ? 'Yes, marked as approved' : 'Not yet marked as approved'}
        </span>
    </div> -->


    <!-- <div class="ae_list event_presenter__guests">
        <h2>More Information</h2>

        <div class="ae_warning">More info can go here</div>

    </div> -->


    <section class="card-footer ae_section ae_meta event_presenter__meta">
        <div class="ae_group">
            <span
                class="event_presenter__id"
                class:ae_d_none={!$ae_loc.administrator_access}>
                ID:
                {$slct.event_presenter_obj.event_presenter_id_random}
            </span>
            <span
                class="event_presenter__created_on"
                >
                Created on: {ae_util.iso_datetime_formatter($slct.event_presenter_obj.created_on, 'datetime_short')}
            </span>
            <span
                class="event_presenter__updated_on"
                class:ae_d_none={!$slct.event_presenter_obj.updated_on}
                >
                Updated on: {ae_util.iso_datetime_formatter($slct.event_presenter_obj.updated_on, 'datetime_short')}
            </span>
        </div>
    </section>


</div>

<footer class="{parent.regionFooter}">

    {#if $ae_loc.trusted_access}
        <span class="ae_options mx-1">
            <button
                class="btn variant-glass-warning mx-1"
                on:click={() => {
                    if (!confirm(`Are you sure you want to send this email to ${$slct.event_presenter_obj.email}?`)) {return false;}

                    api.send_email({
                        api_cfg: $ae_api,
                        from_email: 'scott.idem+from@oneskyit.com',
                        from_name: 'Scott Idem',
                        to_email: $slct.event_presenter_obj.email,
                        subject: 'Test Email',
                        body_html: 'This is a test email from the AE system.',
                    });

                    }}
                >
                <span class="fas fa-paper-plane mx-1"></span>
                Send Email
            </button>

            <button
                on:click={() => {
                    $ae_loc.mod.events.show_edit__event_presenter_obj = true;
                    $ae_loc.mod.events.show_view__event_presenter_obj = false;
                    parent.onClose();
                    $slct_trigger = 'show_edit__event_presenter_obj';
                }}
                class="btn variant-glass-warning mx-1"
                title={`Edit presenter: ${$slct.event_presenter_obj.name}`}
                >
                <span class="fas fa-edit mx-1"></span> Edit
            </button>
        </span>
    {/if}

    <button class="btn variant-glass-primary" on:click={parent.onClose}>
        <span class="fas fa-times mx-1"></span>
        Close
    </button>

</footer>

</section>
{/if}


<style>
.ae_label {
    font-size: smaller;
}
.ae_value {
    font-weight: bold;
}

.event_presenter__user_timezone {
    font-size: smaller;
    font-style: italic;
}

.event_presenter_obj .ae_meta {
    flex-direction: column;
    /* justify-content: space-between; */
}

.event_presenter_obj .ae_meta .ae_group {
    flex-direction: row;
}

.event_presenter_obj .ae_meta .ae_options {
    flex-direction: row;
    justify-content: space-between;
}

/* a {
    color: #82B6E1;
} */
</style>
