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

import { ae } from 'aether_npm_lib';
import { slct, slct_trigger, ae_app } from './stores';

export let container_class_li = [];

const dispatch = createEventDispatcher();

if ($slct.event_id) {
    console.log(`Event ID selected: ${$slct.event_id}`);
    console.log(`Event Object selected: ${$slct.event_obj}`)

    $slct_trigger = 'load__event_obj';
}

onMount(() => {
    console.log('** Component Mounted: ** View - Event 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 event_obj view__event_obj {container_class_li.join(' ')}">

<!-- <div class="event__header">
    <h2 class="event__name">{@html $slct.event_obj.name}</h2>
</div> -->

<div class="event__content">
    <div
        class="meeting_description description"
        >
        <div class="ae_label event__description">Description:</div>
        <pre class="ae_value event__description">{@html $slct.event_obj.description}</pre>
    </div>

    <div
        class:ae_d_none={!$slct.event_obj.type}
        class="meeting_type"
        >
        <span class="ae_label">Type of Recovery Meeting:</span>
        <span class="ae_value">{$slct.event_obj.type}</span>
    </div>

    <div class="meeting_physical_virtual how_to_attended">

        <div class="col-6 meeting_physical"
            class:ae_d_none={(!$slct.event_obj.address_city && !$slct.event_obj.location_address_json) || ($slct.event_obj.location_address_json && !$slct.event_obj.location_address_json.city && !$slct.event_obj.location_address_json.country_subdivision_code && !$slct.event_obj.location_address_json.postal_code)}
            >
            <div class="meeting_address_location">
                Address:
                <address class="ae_value event__address">
                    {#if $slct.event_obj.location_address_json}

                        {#if $slct.event_obj.physical}
                            {#if $slct.event_obj.location_address_json.name}{$slct.event_obj.location_address_json.name}<br>{/if}
                            {#if $slct.event_obj.location_address_json.line_1}{$slct.event_obj.location_address_json.line_1}<br>{/if}
                            {#if $slct.event_obj.location_address_json.line_2}{$slct.event_obj.location_address_json.line_2}<br>{/if}
                            {#if $slct.event_obj.location_address_json.line_3}{$slct.event_obj.location_address_json.line_3}<br>{/if}
                        {/if}
                        {#if $slct.event_obj.location_address_json.city}{$slct.event_obj.location_address_json.city}, {/if}
                        {#if $slct.event_obj.location_address_json.state_province}{$slct.event_obj.location_address_json.state_province}{/if}
                        {#if $slct.event_obj.physical}
                        {#if $slct.event_obj.location_address_json.postal_code}{$slct.event_obj.location_address_json.postal_code}{/if}
                        {/if}
                        {#if $slct.event_obj.location_address_json.country}
                            <br>
                            {$slct.event_obj.location_address_json.country}
                        {/if}

                    {:else}

                        {#if $slct.event_obj.physical}
                            {#if $slct.event_obj.address_name}{$slct.event_obj.address_name}<br>{/if}
                            {#if $slct.event_obj.address_line_1}{$slct.event_obj.address_line_1}<br>{/if}
                            {#if $slct.event_obj.address_line_2}{$slct.event_obj.address_line_2}<br>{/if}
                            {#if $slct.event_obj.address_line_3}{$slct.event_obj.address_line_3}<br>{/if}
                        {/if}
                        {#if $slct.event_obj.address_city}{$slct.event_obj.address_city}, {/if}
                        {#if $slct.event_obj.address_country_subdivision_name}{$slct.event_obj.address_country_subdivision_name}{/if}
                        {#if $slct.event_obj.physical}
                        {#if $slct.event_obj.address_postal_code}{$slct.event_obj.address_postal_code}{/if}
                        {/if}
                        {#if $slct.event_obj.address_country_name}
                            <br>
                            {$slct.event_obj.address_country_name}
                        {/if}

                    {/if}
                </address>
                {#if $slct.event_obj.physical}
                <div
                    class:ae_d_none={!$slct.event_obj.location_text}
                    >
                    Additional information: {@html $slct.event_obj.location_text}
                </div>
                {/if}
            </div>
        </div>

        <div class="col-6"
            class:meeting_virtual={$slct.event_obj.virtual}
            class:ae_d_none={!$slct.event_obj.virtual}
            >
            <div class="meeting_attend_url"
                class:ae_d_none={!$slct.event_obj.attend_url}
                >
                <span class="ae_label">
                    <span class="fas fa-link"></span>
                    URL:
                </span>
                <span class="ae_value">
                    <a href="{$slct.event_obj.attend_url}">{$slct.event_obj.attend_url}</a>
                </span>
                <span class="ae_label">
                    <span class="fas fa-lock"></span>
                    Passcode:
                </span>
                <span class="ae_value">
                    {$slct.event_obj.attend_url_passcode}
                </span>
            </div>
            <div class="meeting_attend_phone"
                class:ae_d_none={!$slct.event_obj.attend_phone}
                >
                <span class="ae_label">
                    <span class="fas fa-phone"></span>
                    Phone:
                </span>
                <span class="ae_value">
                    <a href="tel:{$slct.event_obj.attend_phone}">{$slct.event_obj.attend_phone}</a>
                </span>
                <span class="ae_label">
                    <span class="fas fa-lock"></span>
                    Passcode:
                </span>
                <span class="ae_value">
                    {$slct.event_obj.attend_phone_passcode}
                </span>
            </div>
            <div class="attend_text"
                class:ae_d_none={!$slct.event_obj.attend_text}
                >
                Additional information: {@html $slct.event_obj.attend_text}
            </div>
        </div>

    </div>

    <div class="meeting_when">

        <div class="meeting_recurring"
            class:ae_d_none={!$slct.event_obj.recurring}
            >
            <div class="meeting_recurring_text">
                <span class="ae_label">
                    <span class="fas fa-calendar-alt"></span>
                    Frequency:
                </span>
                {#if $slct.event_obj.recurring_pattern == 'weekly'}<span>Weekly</span>
                {:else if $slct.event_obj.recurring_pattern == 'monthly'}<span>Monthly</span>
                {:else if $slct.event_obj.recurring_pattern == 'every other week'}<span>Every Other Week</span>
                {:else if $slct.event_obj.recurring_pattern == 'other'}<span>Other</span>
                {/if}
                {#if $slct.event_obj.recurring_text && $slct.event_obj.recurring_text.length > 0}
                    {#if $slct.event_obj.recurring_text.includes('*gen*') && $ae_app.administrator_access}
                        <span class="ae_value ae_highlight">{@html $slct.event_obj.recurring_text}</span>
                    {:else if (!$slct.event_obj.recurring_text.includes('*gen*'))}
                        <span class="ae_value">{@html $slct.event_obj.recurring_text}</span>
                    {/if}
                <!-- - <span class="ae_value">{@html $slct.event_obj.recurring_text}</span> -->
                {/if}
            </div>
            <div class="meeting_recurring_days_of_week">
                <span class="ae_label">
                    <span class="fas fa-calendar-week"></span>
                    Days of week:
                </span>
                {#if $slct.event_obj.weekday_sunday}<span class="ae_value">Sunday</span>{/if}
                {#if $slct.event_obj.weekday_monday}<span class="ae_value">Monday</span>{/if}
                {#if $slct.event_obj.weekday_tuesday}<span class="ae_value">Tuesday</span>{/if}
                {#if $slct.event_obj.weekday_wednesday}<span class="ae_value">Wednesday</span>{/if}
                {#if $slct.event_obj.weekday_thursday}<span class="ae_value">Thursday</span>{/if}
                {#if $slct.event_obj.weekday_friday}<span class="ae_value">Friday</span>{/if}
                {#if $slct.event_obj.weekday_saturday}<span class="ae_value">Saturday</span>{/if}
            </div>
            <div class="meeting_recurring_time">
                {#if $slct.event_obj.recurring_start_time}
                <span class="meeting_recurring_start_time">
                    <span class="ae_label">
                        <span class="fas fa-clock"></span> Start time:
                    </span>
                    <span class="ae_value">{ae.util.iso_datetime_formatter(`2024-01-01 ${$slct.event_obj.recurring_start_time}`, 'time_short')}</span>
                </span>
                <span
                    class:ae_d_none={!$slct.event_obj.recurring_end_time}
                    >
                    - <span class="meeting_recurring_end_time">
                        <span class="ae_label">End time:</span>
                        <span class="ae_value">{ae.util.iso_datetime_formatter(`2024-01-01 ${$slct.event_obj.recurring_end_time}`, 'time_short')}
                        </span>
                    </span>
                </span>
                <span
                    class:ae_d_none={!$slct.event_obj.timezone}
                    >
                    - <span class="meeting_timezone">
                        <span class="ae_label">Timezone:</span>
                        <span class="ae_value">{$slct.event_obj.timezone}</span>
                    </span>
                </span>
                {#if $slct.event_obj.timezone}
                <span class="event__user_timezone">
                    (
                    <span class="ae_label">Your TZ:</span>
                    <span class="ae_value">
                        {dayjs.tz(`${$ae_app.current_date_str} ${$slct.event_obj.recurring_start_time}`, $slct.event_obj.timezone).tz($ae_app.current_timezone).format('hh:mm A')} {$ae_app.current_timezone}
                    </span>
                    )
                </span>
                {/if}
                {:else}
                    <span class="meeting_recurring_no_time">No times set</span>
                {/if}



                <!-- {dayjs.tz(`2024-01-08 20:00`, $slct.event_obj.timezone).format('hh:mm A')} -->
            </div>
        </div>

    </div>


    <div class="ae_list event__contacts">

        {#if $slct.event_obj.contact_li_json && $slct.event_obj.contact_li_json.length && $slct.event_obj.contact_li_json[0].full_name}
        <div class="event__contact"
            class:ae_d_none={!$slct.event_obj.contact_li_json[0].full_name}
            >
            <span class="ae_label">
                <span class="fas fa-user"></span> Contact:
            </span>
            {$slct.event_obj.contact_li_json[0].full_name}
            {#if $slct.event_obj.contact_li_json[0].email}
                | <a href="mailto:{$slct.event_obj.contact_li_json[0].email}?Subject={$slct.event_obj.full_name}">{$slct.event_obj.contact_li_json[0].email}</a>
            {/if}
            {#if $slct.event_obj.contact_li_json[0].phone_mobile}
                <span class="ae_label">| Mobile:</span>
                <a href="tel:{$slct.event_obj.contact_li_json[0].phone_mobile}">{$slct.event_obj.contact_li_json[0].phone_mobile}</a>
            {/if}
            {#if $slct.event_obj.contact_li_json[0].phone_home}
                <span class="ae_label">| Home:</span>
                <a href="tel:{$slct.event_obj.contact_li_json[0].phone_home}">{$slct.event_obj.contact_li_json[0].phone_home}</a>
            {/if}
            {#if $slct.event_obj.contact_li_json[0].phone_office}
                <span class="ae_label">| Office:</span>
                <a href="tel:{$slct.event_obj.contact_li_json[0].phone_office}">{$slct.event_obj.contact_li_json[0].phone_office}</a>
            {/if}
            {#if $slct.event_obj.contact_li_json[0].other_text}| {$slct.event_obj.contact_li_json[0].other_text}{/if}
        </div>
        {:else if $slct.event_obj.contact_1_id_random}
        <div class="event__contact"
            class:ae_d_none={!$slct.event_obj.contact_1_name}
            >
            <span class="ae_label">
                <span class="fas fa-user"></span> Contact:
            </span>
            {$slct.event_obj.contact_1_name}
            {#if $slct.event_obj.contact_1_email}
                | <a href="mailto:{$slct.event_obj.contact_1_email}?Subject={$slct.event_obj.name}">{$slct.event_obj.contact_1_email}</a>
            {/if}
            {#if $slct.event_obj.contact_1_phone_mobile}
                <span class="ae_label">| Mobile:</span>
                <a href="tel:{$slct.event_obj.contact_1_phone_mobile}">{$slct.event_obj.contact_1_phone_mobile}</a>
            {/if}
            {#if $slct.event_obj.contact_1_phone_home}
                <span class="ae_label">| Home:</span>
                <a href="tel:{$slct.event_obj.contact_1_phone_home}">{$slct.event_obj.contact_1_phone_home}</a>
            {/if}
            {#if $slct.event_obj.contact_1_phone_office}
                <span class="ae_label">| Office:</span>
                <a href="tel:{$slct.event_obj.contact_1_phone_office}">{$slct.event_obj.contact_1_phone_office}</a>
            {/if}
            {#if $slct.event_obj.contact_1_other_text}| {$slct.event_obj.contact_1_other_text}{/if}
        </div>
        {/if}

        {#if $slct.event_obj.contact_li_json && $slct.event_obj.contact_li_json.length && $slct.event_obj.contact_li_json[1].full_name}
        <div class="event__contact"
            class:ae_d_none={!$slct.event_obj.contact_li_json[1].full_name}
            >
            <span class="ae_label">
                <span class="fas fa-user"></span> Contact:
            </span>
            {$slct.event_obj.contact_li_json[1].full_name}
            {#if $slct.event_obj.contact_li_json[1].email}
                | <a href="mailto:{$slct.event_obj.contact_li_json[1].email}?Subject={$slct.event_obj.full_name}">{$slct.event_obj.contact_li_json[1].email}</a>
            {/if}
            {#if $slct.event_obj.contact_li_json[1].phone_mobile}
                <span class="ae_label">| Mobile:</span>
                <a href="tel:{$slct.event_obj.contact_li_json[1].phone_mobile}">{$slct.event_obj.contact_li_json[1].phone_mobile}</a>
                {/if}
            {#if $slct.event_obj.contact_li_json[1].phone_home}
                <span class="ae_label">| Home:</span>
                <a href="tel:{$slct.event_obj.contact_li_json[1].phone_home}">{$slct.event_obj.contact_li_json[1].phone_home}</a>
            {/if}
            {#if $slct.event_obj.contact_li_json[1].phone_office}
                <span class="ae_label">| Office:</span>
                <a href="tel:{$slct.event_obj.contact_li_json[1].phone_office}">{$slct.event_obj.contact_li_json[1].phone_office}</a>
            {/if}
            {#if $slct.event_obj.contact_li_json[1].other_text}| {$slct.event_obj.contact_li_json[1].other_text}{/if}
        </div>
        {:else if $slct.event_obj.contact_2_id_random}
        <div class="event__contact"
            class:ae_d_none={!$slct.event_obj.contact_2_name}
            >
            <span class="ae_label">
                <span class="fas fa-user"></span> Contact:
            </span>
            {$slct.event_obj.contact_2_name}
            {#if $slct.event_obj.contact_2_email}
                | <a href="mailto:{$slct.event_obj.contact_2_email}?Subject={$slct.event_obj.name}">{$slct.event_obj.contact_2_email}</a>
            {/if}
            {#if $slct.event_obj.contact_2_phone_mobile}
                <span class="ae_label">| Mobile:</span>
                <a href="tel:{$slct.event_obj.contact_2_phone_mobile}">{$slct.event_obj.contact_2_phone_mobile}</a>
                {/if}
            {#if $slct.event_obj.contact_2_phone_home}
                <span class="ae_label">| Home:</span>
                <a href="tel:{$slct.event_obj.contact_2_phone_home}">{$slct.event_obj.contact_2_phone_home}</a>
            {/if}
            {#if $slct.event_obj.contact_2_phone_office}
                <span class="ae_label">| Office:</span>
                <a href="tel:{$slct.event_obj.contact_2_phone_office}">{$slct.event_obj.contact_2_phone_office}</a>
            {/if}
            {#if $slct.event_obj.contact_2_other_text}| {$slct.event_obj.contact_2_other_text}{/if}
        </div>
        {/if}

        {#if !$slct.event_obj.contact_1_id_random && !$slct.event_obj.contact_2_id_random}
            <div class="event__contact ae_warning">No contact information was given!</div>
        {/if}

    </div>

    <section class="ae_section ae_meta event__meta">
        <div class="ae_group">
            <span
                class="event__id"
                class:ae_d_none={!$ae_app.administrator_access}>
                ID:
                {$slct.event_obj.event_id_random}
            </span>
            <span
                class="event__created_on"
                >
                Created on: {ae.util.iso_datetime_formatter($slct.event_obj.created_on, 'datetime_short')}
            </span>
            <span
                class="event__updated_on"
                class:ae_d_none={!$slct.event_obj.updated_on}
                >
                Updated on: {ae.util.iso_datetime_formatter($slct.event_obj.updated_on, 'datetime_short')}
            </span>
        </div>

        {#if $ae_app.trusted_access || $slct.event_obj.external_person_id === $ae_app.novi_uuid || $slct.event_obj.contact_1_email === $ae_app.novi_email}
        <div class="ae_options">
            <button
                on:click={() => {
                    // $slct.event_id = $slct.event_obj.event_id_random;
                    // $slct.event_obj = $slct.event_obj;

                    // const url = new URL(location);
                    // url.searchParams.set('event_id', $slct.event_obj.event_id_random);
                    // history.pushState({}, '', url);

                    // $ae_app.events.show_main__options = true;
                    // $ae_app.events.show_list__event_obj_li = true;
                    $ae_app.events.show_view__event_obj = false;
                    $ae_app.events.show_edit__event_obj = true;
                }}
                class="btn btn-xs btn-secondary"
                title={`Edit meeting: ${$slct.event_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;
}

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

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

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

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

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