<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { fade } from 'svelte/transition';
import dayjs from 'dayjs';

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

export let container_class_li = [];

const dispatch = createEventDispatcher();

if ($slct.sponsorship_id) {
    console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
    console.log(`Sponsorship Object selected: ${$slct.sponsorship_obj}`)

    $slct_trigger = 'load__sponsorship_obj';
}

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


// dayjs.extend(window.dayjs_plugin_utc)
// dayjs.extend(window.dayjs_plugin_timezone);
// console.log(`UTC offset: ${dayjs().utcOffset()}`);
// console.log(`TZ offset: ${dayjs().utcOffset('US/Pacific')}`);
// // let test_time = dayjs.utc('2024-01-08 11:55').tz('Asia/Taipei');
// // let test_time = dayjs.utc('2024-01-08 14:15').tz('America/New_York');
// let test_time = dayjs.tz('2024-01-08 14:15', 'US/Pacific');
// console.log(test_time.format('YYYY-MM-DD HH:mm'));
// let adjusted_to_local_tz = test_time.tz('America/New_York');
// console.log(adjusted_to_local_tz.format('YYYY-MM-DD HH:mm'));

// let adjusted_to_local_tz_v2 = dayjs.tz('2024-01-08 14:15', 'US/Pacific').tz('America/New_York');
// console.log(adjusted_to_local_tz_v2);

</script>


<section class="svelte_component ae_section ae_view sponsorship_obj view__sponsorship_obj {container_class_li.join(' ')}">

<div class="sponsorship__header">
    <h2 class="sponsorship__name">{@html $slct.sponsorship_obj.name}</h2>
</div>

<div class="sponsorship__content">
    <div
        class="sponsorship_description description"
        >
        <div class="ae_label sponsorship__description">Description:</div>
        <pre class="ae_value sponsorship__description">{@html $slct.sponsorship_obj.description ? $slct.sponsorship_obj.description : '-- No Description Given --'}</pre>
    </div>

    <div
        class:ae_d_none={!$slct.sponsorship_obj.level_num}
        class="sponsorship_level"
        >
        <span class="ae_label">Level of Sponsorship:</span>
        <span class="ae_value"><span class="fas fa-gem"></span> {$slct.sponsorship_obj.level_num} &mdash; {$slct.sponsorship_obj.level_str}</span>
    </div>

    <div>
        <span class="ae_label">Paid:</span>
        $
        <span class="ae_value">
            {$slct.sponsorship_obj.paid ? 'Yes, marked as paid' : 'Not yet marked as paid'}
        </span>
    </div>



    <div class="ae_list sponsorship__guests">
        <h2>Guest List</h2>

        {#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length && $slct.sponsorship_obj.guest_li_json[0].full_name}
        <ul>
            {#each $slct.sponsorship_obj.guest_li_json as guest, index}
            <li class="sponsorship__guest"
                class:ae_d_none={!$slct.sponsorship_obj.guest_li_json[index].full_name}
                >
                <span class="ae_label">
                    <span class="fas fa-user"></span> Contact:
                </span>
                {$slct.sponsorship_obj.guest_li_json[index].full_name}
                {#if $slct.sponsorship_obj.guest_li_json[index].email}
                    | <a href="mailto:{$slct.sponsorship_obj.guest_li_json[index].email}?Subject={$slct.sponsorship_obj.full_name}">{$slct.sponsorship_obj.guest_li_json[index].email}</a>
                {/if}
                {#if $slct.sponsorship_obj.guest_li_json[index].phone_mobile}
                    <span class="ae_label">| Mobile:</span>
                    <a href="tel:{$slct.sponsorship_obj.guest_li_json[index].phone_mobile}">{$slct.sponsorship_obj.guest_li_json[index].phone_mobile}</a>
                    {/if}
                {#if $slct.sponsorship_obj.guest_li_json[index].phone_home}
                    <span class="ae_label">| Home:</span>
                    <a href="tel:{$slct.sponsorship_obj.guest_li_json[index].phone_home}">{$slct.sponsorship_obj.guest_li_json[index].phone_home}</a>
                {/if}
                {#if $slct.sponsorship_obj.guest_li_json[index].phone_office}
                    <span class="ae_label">| Office:</span>
                    <a href="tel:{$slct.sponsorship_obj.guest_li_json[index].phone_office}">{$slct.sponsorship_obj.guest_li_json[index].phone_office}</a>
                {/if}
                {#if $slct.sponsorship_obj.guest_li_json[index].other_text}| {$slct.sponsorship_obj.guest_li_json[index].other_text}{/if}
            </li>
            {/each}
        </ul>
        {:else}
            <div class="ae_warning">No guest list found!</div>
        {/if}

    </div>

    <section class="ae_section ae_meta sponsorship__meta">
        <div class="ae_group">
            <span
                class="sponsorship__id"
                class:ae_d_none={!$ae_loc.administrator_access}>
                ID:
                {$slct.sponsorship_obj.sponsorship_id_random}
            </span>
            <span
                class="sponsorship__created_on"
                >
                Created on: {ae_util.iso_datetime_formatter($slct.sponsorship_obj.created_on, 'datetime_short')}
            </span>
            <span
                class="sponsorship__updated_on"
                class:ae_d_none={!$slct.sponsorship_obj.updated_on}
                >
                Updated on: {ae_util.iso_datetime_formatter($slct.sponsorship_obj.updated_on, 'datetime_short')}
            </span>
        </div>

        {#if $ae_loc.trusted_access || $slct.sponsorship_obj.external_person_id === $ae_loc.novi_uuid || $slct.sponsorship_obj.contact_1_email === $ae_loc.novi_email}
        <div class="ae_options">
            <button
                on:click={() => {
                    // $slct.sponsorship_id = $slct.sponsorship_obj.sponsorship_id_random;
                    // $slct.sponsorship_obj = $slct.sponsorship_obj;

                    // const url = new URL(location);
                    // url.searchParams.set('sponsorship_id', $slct.sponsorship_obj.sponsorship_id_random);
                    // history.pushState({}, '', url);

                    // $ae_loc.mod.sponsorships.show_main__options = true;
                    // $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li = true;
                    $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
                    $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
                }}
                class="btn btn-xs btn-secondary"
                title={`Edit sponsorship: ${$slct.sponsorship_obj.name}`}
                >
                <span class="fas fa-edit"></span> Edit
            </button>
        </div>
        {/if}
    </section>

</div>

</section>


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

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

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

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

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

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