<script lang="ts">
// *** Import Svelte specific

// *** Import other supporting libraries

// *** Import Aether specific variables and functions
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
    ae_snip,
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
import {
    idaa_loc,
    idaa_sess,
    idaa_slct,
    idaa_trig
} from '$lib/stores/ae_idaa_stores';
import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';

interface Props {
    lq__event_obj: any;
}

let { lq__event_obj }: Props = $props();

if ($idaa_slct.event_id) {
    console.log(`Event ID selected: ${$idaa_slct.event_id}`);
    console.log(`Event Object selected: ${$lq__event_obj}`);
    console.log(`Event Object name: ${$lq__event_obj?.name}`);
}
</script>

<section
    class="svelte_component ae_section ae_view event_obj view__event_obj space-y-2">
    <div class="rounded-lg bg-white p-2 shadow-md">
        <div
            class="meeting_description description mb-4"
            class:hidden={!$lq__event_obj?.description}>
            <div class="ae_label event__description mb-2">Description:</div>
            <pre
                class="ae_value_semi event__description font-normal text-wrap whitespace-pre-wrap">{@html $lq__event_obj?.description}</pre>
        </div>

        <div class:hidden={!$lq__event_obj?.type} class="meeting_type mb-4">
            <span class="ae_label">Type of Recovery Meeting:</span>
            <span class="ae_value ml-2">{$lq__event_obj?.type}</span>
        </div>
    </div>

    <div
        class="meeting_physical_virtual how_to_attended rounded-lg bg-white p-2 shadow-md">
        <div
            class="meeting_physical col-6"
            class:hidden={(!$lq__event_obj?.address_city &&
                !$lq__event_obj?.location_address_json) ||
                ($lq__event_obj?.location_address_json &&
                    !$lq__event_obj?.location_address_json.city &&
                    !$lq__event_obj?.location_address_json
                        .country_subdivision_code &&
                    !$lq__event_obj?.location_address_json.postal_code)}>
            <div class="meeting_address_location">
                <span class="ae_label"> Address: </span>
                <address class="ae_value_semi event__address">
                    {#if $lq__event_obj?.location_address_json}
                        {#if $lq__event_obj?.physical}
                            {#if $lq__event_obj?.location_address_json.name}{$lq__event_obj
                                    ?.location_address_json.name}<br />{/if}
                            {#if $lq__event_obj?.location_address_json.line_1}{$lq__event_obj
                                    ?.location_address_json.line_1}<br />{/if}
                            {#if $lq__event_obj?.location_address_json.line_2}{$lq__event_obj
                                    ?.location_address_json.line_2}<br />{/if}
                            {#if $lq__event_obj?.location_address_json.line_3}{$lq__event_obj
                                    ?.location_address_json.line_3}<br />{/if}
                        {/if}
                        {#if $lq__event_obj?.location_address_json.city}{$lq__event_obj
                                ?.location_address_json.city},
                        {/if}
                        {#if $lq__event_obj?.location_address_json.state_province}{$lq__event_obj
                                ?.location_address_json.state_province}{/if}
                        {#if $lq__event_obj?.physical}
                            {#if $lq__event_obj?.location_address_json.postal_code}{$lq__event_obj
                                    ?.location_address_json.postal_code}{/if}
                        {/if}
                        {#if $lq__event_obj?.location_address_json.country}
                            <br />
                            {$lq__event_obj?.location_address_json.country}
                        {/if}
                    {:else}
                        {#if $lq__event_obj?.physical}
                            {#if $lq__event_obj?.address_name}{$lq__event_obj?.address_name}<br />{/if}
                            {#if $lq__event_obj?.address_line_1}{$lq__event_obj?.address_line_1}<br />{/if}
                            {#if $lq__event_obj?.address_line_2}{$lq__event_obj?.address_line_2}<br />{/if}
                            {#if $lq__event_obj?.address_line_3}{$lq__event_obj?.address_line_3}<br />{/if}
                        {/if}
                        {#if $lq__event_obj?.address_city}{$lq__event_obj?.address_city},
                        {/if}
                        {#if $lq__event_obj?.address_country_subdivision_name}{$lq__event_obj?.address_country_subdivision_name}{/if}
                        {#if $lq__event_obj?.physical}
                            {#if $lq__event_obj?.address_postal_code}{$lq__event_obj?.address_postal_code}{/if}
                        {/if}
                        {#if $lq__event_obj?.address_country_name}
                            <br />
                            {$lq__event_obj?.address_country_name}
                        {/if}
                    {/if}
                </address>
                {#if $lq__event_obj?.physical}
                    <div class:hidden={!$lq__event_obj?.location_text}>
                        <span class="ae_label"> Additional information: </span>
                        <span class="ae_value_semi"
                            >{@html $lq__event_obj?.location_text}</span>
                    </div>
                {/if}
            </div>
        </div>

        <div
            class="col-6"
            class:meeting_virtual={$lq__event_obj?.virtual}
            class:hidden={!$lq__event_obj?.virtual}>
            {#if $lq__event_obj?.attend_json?.zoom}
                <div
                    class="event__attend flex flex-row flex-wrap items-center justify-start gap-2"
                    class:ae_d_none={!$lq__event_obj?.attend_json?.zoom
                        ?.full_url}>
                    <span class="ae_label">
                        <span class="fas fa-video m-1"></span>
                        Zoom Meeting:
                    </span>
                    <span class="ae_value">
                        <!-- text-blue-800 hover:underline -->
                        <a
                            href={$lq__event_obj?.attend_json?.zoom?.full_url}
                            target="_blank"
                            class="
                            novi_btn btn-default
                            btn btn-sm
                            preset-outlined-tertiary-800-200
                            preset-filled-tertiary-200-800
                            hover:preset-filled-tertiary-600-400
                            transition
                            ">
                            <span class="fas fa-link m-1"></span>
                            <!-- {$lq__event_obj?.attend_json?.zoom?.full_url} -->
                            Join: Zoom ID {$lq__event_obj?.attend_json?.zoom
                                ?.meeting_id}
                            {#if $lq__event_obj?.attend_json?.zoom?.passcode}
                                | Passcode: {$lq__event_obj?.attend_json?.zoom
                                    ?.passcode}
                            {/if}
                        </a>
                    </span>

                    {#if $ae_loc.manager_access}
                        <MyClipboard
                            value={$lq__event_obj?.attend_json?.zoom?.full_url}
                            btn_text="Copy Zoom Link"
                            btn_title="Copy Zoom link to clipboard"
                            btn_class="
                        novi_btn
                        btn btn-sm
                        preset-outlined-tertiary-800-200
                        preset-filled-tertiary-200-800
                        hover:preset-filled-tertiary-600-400
                        transition
                        "></MyClipboard>
                    {/if}
                </div>
            {:else if $lq__event_obj?.attend_json?.jitsi}
                <div
                    class="event__attend flex flex-row flex-wrap items-center justify-start gap-2"
                    class:ae_d_none={!$lq__event_obj?.attend_json?.jitsi
                        ?.full_url}>
                    <span class="ae_label">
                        <span class="fas fa-video m-1"></span>
                        Jitsi Meeting:
                    </span>
                    <span class="ae_value">
                        <!-- text-blue-800 hover:underline -->
                        <a
                            href={$lq__event_obj?.attend_json?.jitsi?.full_url}
                            target="_blank"
                            class="
                            novi_btn btn-default
                            btn btn-sm
                            preset-outlined-tertiary-800-200
                            preset-filled-tertiary-200-800
                            hover:preset-filled-tertiary-600-400
                            transition
                            ">
                            <span class="fas fa-link m-1"></span>
                            <!-- {$lq__event_obj?.attend_json?.jitsi?.full_url} -->
                            Join: {$lq__event_obj?.attend_json?.jitsi?.name ??
                                'Jitsi Meeting'}
                            {#if $lq__event_obj?.attend_json?.jitsi?.passcode}
                                | Passcode: {$lq__event_obj?.attend_json?.jitsi
                                    ?.passcode}
                            {/if}
                        </a>
                    </span>

                    {#if $ae_loc.manager_access}
                        <MyClipboard
                            value={$lq__event_obj?.attend_json?.jitsi?.full_url}
                            btn_text="Copy Jitsi Link"
                            btn_title="Copy Jitsi link to clipboard"
                            btn_class="
                        novi_btn
                        btn btn-sm
                        preset-outlined-tertiary-800-200
                        preset-filled-tertiary-200-800
                        hover:preset-filled-tertiary-600-400
                        transition
                        "></MyClipboard>
                    {/if}
                </div>
            {:else}
                <div
                    class="meeting_attend_url"
                    class:hidden={!$lq__event_obj?.attend_url}>
                    <span class="ae_label">
                        <span class="fas fa-link"></span>
                        URL:
                    </span>
                    <span class="ae_value">
                        <a
                            href={$lq__event_obj?.attend_url}
                            class="text-blue-800 hover:underline"
                            >{$lq__event_obj?.attend_url}</a>
                    </span>
                    <span class:hidden={!$lq__event_obj?.attend_url_passcode}>
                        <span class="ae_label">
                            <span class="fas fa-lock"></span>
                            Passcode:
                        </span>
                        <span class="ae_value">
                            {$lq__event_obj?.attend_url_passcode}
                        </span>
                    </span>
                </div>
            {/if}
            <div
                class="meeting_attend_phone"
                class:hidden={!$lq__event_obj?.attend_phone}>
                <span class="ae_label">
                    <span class="fas fa-phone"></span>
                    Phone:
                </span>
                <span class="ae_value">
                    <a href="tel:{$lq__event_obj?.attend_phone}"
                        >{$lq__event_obj?.attend_phone}</a>
                </span>
                <span class="ae_label">
                    <span class="fas fa-lock"></span>
                    Passcode:
                </span>
                <span class="ae_value">
                    {$lq__event_obj?.attend_phone_passcode}
                </span>
            </div>
            <div
                class="attend_text"
                class:hidden={!$lq__event_obj?.attend_text}>
                <span class="ae_label"> Additional information: </span>
                <span class="ae_value_semi"
                    >{@html $lq__event_obj?.attend_text}</span>
            </div>
        </div>
    </div>

    <div class="meeting_when rounded-lg bg-white p-2 shadow-md">
        <div
            class="meeting_recurring"
            class:hidden={!$lq__event_obj?.recurring}>
            <div class="meeting_recurring_text">
                <span class="ae_label">
                    <span class="fas fa-calendar-alt"></span>
                    Frequency:
                </span>
                {#if $lq__event_obj?.recurring_pattern == 'weekly'}<span
                        >Weekly</span>
                {:else if $lq__event_obj?.recurring_pattern == 'monthly'}<span
                        >Monthly</span>
                {:else if $lq__event_obj?.recurring_pattern == 'every other week'}<span
                        >Every Other Week</span>
                {:else if $lq__event_obj?.recurring_pattern == 'other'}<span
                        >Other</span>
                {/if}
                {#if $lq__event_obj?.recurring_text && $lq__event_obj?.recurring_text.length > 0}
                    {#if $lq__event_obj?.recurring_text.includes('*gen*') && $ae_loc.administrator_access}
                        <span class="ae_value ae_highlight"
                            >{@html $lq__event_obj?.recurring_text}</span>
                    {:else if !$lq__event_obj?.recurring_text.includes('*gen*')}
                        <span class="ae_value"
                            >{@html $lq__event_obj?.recurring_text}</span>
                    {/if}
                    <!-- - <span class="ae_value">{@html $lq__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 $lq__event_obj?.weekday_sunday}<span class="ae_value"
                        >Sunday</span
                    >{/if}
                {#if $lq__event_obj?.weekday_monday}<span class="ae_value"
                        >Monday</span
                    >{/if}
                {#if $lq__event_obj?.weekday_tuesday}<span class="ae_value"
                        >Tuesday</span
                    >{/if}
                {#if $lq__event_obj?.weekday_wednesday}<span class="ae_value"
                        >Wednesday</span
                    >{/if}
                {#if $lq__event_obj?.weekday_thursday}<span class="ae_value"
                        >Thursday</span
                    >{/if}
                {#if $lq__event_obj?.weekday_friday}<span class="ae_value"
                        >Friday</span
                    >{/if}
                {#if $lq__event_obj?.weekday_saturday}<span class="ae_value"
                        >Saturday</span
                    >{/if}
            </div>
            <div class="meeting_recurring_time">
                {#if $lq__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 ${$lq__event_obj?.recurring_start_time}`,
                                'time_12_short'
                            )}</span>
                    </span>
                    <span class:hidden={!$lq__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 ${$lq__event_obj?.recurring_end_time}`,
                                    'time_12_short'
                                )}
                            </span>
                        </span>
                    </span>
                    <span class:hidden={!$lq__event_obj?.timezone}>
                        <span class="meeting_timezone">
                            <span class="ae_label">Timezone:</span>
                            <span class="ae_value"
                                >{$lq__event_obj?.timezone}</span>
                        </span>
                    </span>
                    {#if $lq__event_obj?.timezone && $ae_loc.current_timezone}
                        <span class="event__user_timezone">
                            (
                            <span class="ae_label">Your TZ:</span>
                            <span class="ae_value">
                                <!-- {dayjs.tz(`${$ae_loc.current_date_str} ${$lq__event_obj?.recurring_start_time}`, $lq__event_obj?.timezone).tz($ae_loc.current_timezone).format('hh:mm A')} {$ae_loc.current_timezone} -->
                                <!-- DAYJS DISABLED -->
                                {$ae_loc.current_timezone}
                            </span>
                            )
                        </span>
                    {/if}
                {:else}
                    <span class="meeting_recurring_no_time">No times set</span>
                {/if}

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

    <div class="ae_list event__contacts rounded-lg bg-white p-2 shadow-md">
        <a
            href="https://docs.google.com/forms/d/e/1FAIpQLSe7ICzsIA6XhW3jzxtM29xuC7nx5GFQ6qvasDMQvU-9bOrSqA/viewform"
            target="_blank"
            class="
                novi_btn btn-warning novi_smaller
                btn
                btn-sm preset-outlined-tertiary-800-200
                preset-filled-tertiary-200-800
                hover:preset-filled-secondary-600-400
                float-right
                transition
                "
            title="Send a message to IDAA Staff regarding this Recovery Meeting.">
            <span class="fas fa-flag m-1"></span>
            Message IDAA Staff?
        </a>

        {#if $lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json.length && $lq__event_obj?.contact_li_json[0].full_name}
            <div
                class="event__contact"
                class:hidden={!$lq__event_obj?.contact_li_json[0].full_name}>
                <span class="ae_label">
                    <span class="fas fa-user"></span> Contact:
                </span>
                {$lq__event_obj?.contact_li_json[0].full_name}
                {#if $lq__event_obj?.contact_li_json[0].email}
                    <a
                        href="mailto:{$lq__event_obj?.contact_li_json[0]
                            .email}?Subject=IDAA: {$lq__event_obj?.name}"
                        class="text-blue-800 hover:underline"
                        >{$lq__event_obj?.contact_li_json[0].email}
                    </a>
                {/if}
                {#if $lq__event_obj?.contact_li_json[0].phone_mobile}
                    <span class="ae_label">| Mobile:</span>
                    <a
                        href="tel:{$lq__event_obj?.contact_li_json[0]
                            .phone_mobile}"
                        class="text-blue-800 hover:underline"
                        >{$lq__event_obj?.contact_li_json[0].phone_mobile}</a>
                {/if}
                {#if $lq__event_obj?.contact_li_json[0].phone_home}
                    <span class="ae_label">| Home:</span>
                    <a
                        href="tel:{$lq__event_obj?.contact_li_json[0]
                            .phone_home}"
                        class="text-blue-800 hover:underline"
                        >{$lq__event_obj?.contact_li_json[0].phone_home}</a>
                {/if}
                {#if $lq__event_obj?.contact_li_json[0].phone_office}
                    <span class="ae_label">| Office:</span>
                    <a
                        href="tel:{$lq__event_obj?.contact_li_json[0]
                            .phone_office}"
                        class="text-blue-800 hover:underline"
                        >{$lq__event_obj?.contact_li_json[0].phone_office}</a>
                {/if}
                {#if $lq__event_obj?.contact_li_json[0].other_text}| {$lq__event_obj
                        ?.contact_li_json[0].other_text}{/if}
            </div>
        {/if}

        {#if $lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json.length && $lq__event_obj?.contact_li_json[1].full_name}
            <div
                class="event__contact"
                class:hidden={!$lq__event_obj?.contact_li_json[1].full_name}>
                <span class="ae_label">
                    <span class="fas fa-user"></span> Contact:
                </span>
                {$lq__event_obj?.contact_li_json[1].full_name}
                {#if $lq__event_obj?.contact_li_json[1].email}
                    | <a
                        href="mailto:{$lq__event_obj?.contact_li_json[1]
                            .email}?Subject=IDAA: {$lq__event_obj?.name}"
                        class="text-blue-800 hover:underline"
                        >{$lq__event_obj?.contact_li_json[1].email}
                    </a>
                {/if}
                {#if $lq__event_obj?.contact_li_json[1].phone_mobile}
                    <span class="ae_label">| Mobile:</span>
                    <a
                        href="tel:{$lq__event_obj?.contact_li_json[1]
                            .phone_mobile}"
                        class="text-blue-800 hover:underline"
                        >{$lq__event_obj?.contact_li_json[1].phone_mobile}</a>
                {/if}
                {#if $lq__event_obj?.contact_li_json[1].phone_home}
                    <span class="ae_label">| Home:</span>
                    <a
                        href="tel:{$lq__event_obj?.contact_li_json[1]
                            .phone_home}"
                        class="text-blue-800 hover:underline"
                        >{$lq__event_obj?.contact_li_json[1].phone_home}</a>
                {/if}
                {#if $lq__event_obj?.contact_li_json[1].phone_office}
                    <span class="ae_label">| Office:</span>
                    <a
                        href="tel:{$lq__event_obj?.contact_li_json[1]
                            .phone_office}"
                        class="text-blue-800 hover:underline"
                        >{$lq__event_obj?.contact_li_json[1].phone_office}</a>
                {/if}
                {#if $lq__event_obj?.contact_li_json[1].other_text}| {$lq__event_obj
                        ?.contact_li_json[1].other_text}{/if}
            </div>
        {/if}
    </div>

    <section
        class="ae_section ae_meta event__meta mt-4 flex flex-row items-center justify-center gap-2 text-sm text-gray-500">
        <span class="event__id" class:hidden={!$ae_loc.administrator_access}>
            ID:
            {$lq__event_obj?.event_id}
        </span>
        <span class="event__created_on">
            Created on: {ae_util.iso_datetime_formatter(
                $lq__event_obj?.created_on,
                'datetime_12_short'
            )}
        </span>
        <span
            class="event__updated_on"
            class:hidden={!$lq__event_obj?.updated_on}>
            Updated on: {ae_util.iso_datetime_formatter(
                $lq__event_obj?.updated_on,
                'datetime_12_short'
            )}
        </span>
    </section>

    <!-- </div> -->
</section>

<style lang="scss">
.ae_label {
    font-size: smaller;
    color: #777;
}
.ae_value {
    font-weight: bold;
}
.ae_value_semi {
    font-weight: semi-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>
