<script lang="ts">
	interface Props {
		/** @type {import('./$types').PageData} */
		log_lvl?: number;
		data?: any;
		container_class_li?: string | Array<string>;
		link_to_type: null | string;
		link_to_id: null | string;
		lq__event_obj_li: any;
	}

	let {
		log_lvl = 0,
		data,
		container_class_li = [],
		link_to_type = null,
		link_to_id = null,
		lq__event_obj_li
	}: Props = $props();

	// *** Import Svelte specific
	// import { onMount } from 'svelte';
	// import { Spinner } from 'flowbite-svelte';
	import { browser } from '$app/environment';

	// *** Import Aether specific variables and functions
	import { ae_util } from '$lib/ae_utils/ae_utils';
	import { core_func } from '$lib/ae_core/ae_core_functions';
	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';

	if (browser) {
		if (log_lvl) {
			console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
		}

		// add_activity_log(
		//     {
		//         action: 'idaa_meetings_page',
		//         action_with: 'search',
		//     }
		// );
	}

	function add_activity_log({
		action = 'idaa_meetings_page',
		action_with = 'none'
	}: {
		action?: string;
		action_with?: string;
	}) {
		let last_cache_refresh_iso = new Date($ae_loc?.last_cache_refresh);

		let activity_description = `
        ${$idaa_loc.novi_full_name ?? 'none'} ${$idaa_loc.novi_email ?? 'no-email'}
        allow=${$ae_loc?.allow_access}
        last_cache_refresh=${last_cache_refresh_iso.toLocaleString()}
        data_route=${data?.route?.toString() ?? 'unknown'}
    `;

		let data_kv = {
			external_client_id: data?.route.id,
			name: `IDAA: ${$idaa_loc.novi_full_name ?? 'none'} ${$idaa_loc.novi_email ?? ''}`,
			description: activity_description ?? null,
			object_type: 'event', // archive, post, event
			// object_id_random: data?.params?.event_id ?? null,
			// object_id_random: ae_acct.slct.archive_id, // data?.params?.archive_id ?? null,
			url_root: data?.url.origin,
			// url_full_path: data?.url.href,
			url_full_path: data?.url.pathname,
			url_params: data?.url.searchParams.toString(),
			action: action,
			action_with: action_with ?? 'none',
			meta_json: {
				allow_access: $ae_loc?.allow_access,
				last_cache_refresh: $ae_loc?.last_cache_refresh,
				last_cache_refresh_iso: last_cache_refresh_iso.toISOString(),
				last_cache_refresh_locale: last_cache_refresh_iso.toLocaleString(),
				access_level: $ae_loc?.access_level,
				iframe: $ae_loc?.iframe
				// site_access_key: $ae_loc?.site_access_key,
				// site_domain_access_key: $ae_loc?.site_domain_access_key,
				// site_domain: $ae_loc?.site_domain,
				// extra_data: extra_data ?? '',
				// log_lvl: log_lvl,
			}
		};

		core_func.create_ae_obj__activity_log({
			api_cfg: $ae_api,
			account_id: $ae_loc.account_id,
			data_kv: data_kv,
			log_lvl: log_lvl
		});
	}
</script>

<section
	class="
        svelte_component ae_section ae_list event_obj_li list__event_obj recovery_meeting_list
        flex flex-col gap-2 items-center justify-center w-full
        {container_class_li}
        "
>
	<!-- {#if Array.isArray(event_id_random_li) && event_id_random_li.length} -->
	{#if $lq__event_obj_li && $lq__event_obj_li.length}
		<div class="space-y-2">
			<h2 class="h3">
				<span class="text-base text-gray-500"> Results: </span>

				{#if $lq__event_obj_li?.length}
					<span
						class="text-3xl font-bold bg-success-100 px-4 border rounded-lg border-success-200"
						title="Count {$lq__event_obj_li.length ?? 'None'}"
					>
						<span class="fas fa-list-ol mx-4"></span>
						{$lq__event_obj_li.length ?? 'None'}
					</span>
				{/if}
			</h2>

			{#each $lq__event_obj_li as idaa_event_obj, index}
				{#if idaa_event_obj}
					<!-- This check for the idaa_event_obj is here in case the IDB entry is deleted. -->
					<div
						class="container recovery_meeting event_obj border rounded-lg p-2 mb-2 space-y-2 w-full max-w-(--breakpoint-lg) flex flex-col items-center justify-center bg-white"
						class:hidden={(idaa_event_obj?.hide || !idaa_event_obj?.enable) &&
							!$ae_loc.trusted_access}
						class:dim={idaa_event_obj?.hide}
						class:bg-warning-100={!idaa_event_obj?.enable}
						class:text-warning-900={!idaa_event_obj?.enable}
					>
						<header
							class="ae_header flex flex-row flex-wrap gap-2 items-center justify-between w-full"
						>
							<h3
								class="
                    event__name
                    h3
                    text-2xl font-bold
                    flex flex-row gap-2 items-center justify-between
                    w-full
                "
							>
								<span class="fas fa-calendar-day text-neutral-800/80"></span>
								{idaa_event_obj?.name ?? 'Recovery Meeting'}
							</h3>

							<div
								class="
                    flex flex-row gap-2 items-center justify-between
                    w-full
                "
							>
								{#if idaa_event_obj?.status == 'unknown'}
									<span
										class="badge badge-warning preset-tonal-error"
										title="This meeting has not been confirmed by IDAA Central Office. Please reach out to the chair for current meeting list info. Meeting attendees can reach out to info@idaa.org if they know this is information is accurate and this meeting is still taking place."
									>
										<span class="fas fa-exclamation-triangle m-1"></span>
										Not Confirmed by IDAA
										<!-- Unknown Status -->
										<span class="fas fa-exclamation-triangle m-1"></span>
									</span>
								{/if}

								<span class="float-right flex flex-row flex-wrap gap-1 items-center justify-end">
									<span class="badge badge-info preset-tonal-tertiary">
										{#if idaa_event_obj?.physical && idaa_event_obj?.virtual}
											<span class="fas fa-home m-1"></span> F2F and
											<span class="fas fa-laptop m-1"></span> Virtual
										{:else if idaa_event_obj?.physical}
											<span class="fas fa-home m-1"></span> F2F
										{:else if idaa_event_obj?.virtual}
											<span class="fas fa-laptop m-1"></span> Virtual
										{/if}
									</span>
									{#if idaa_event_obj?.type}
										<span class="badge badge-info preset-tonal-secondary"
											><span class="fas fa-user-md m-1"></span> {idaa_event_obj?.type}</span
										>
									{/if}
									{#if $ae_loc.trusted_access && idaa_event_obj?.hide}
										<span class="badge badge-warning"
											><span class="fas fa-exclamation-triangle m-1"></span> Hidden</span
										>
									{/if}
									{#if $ae_loc.administrator_access && !idaa_event_obj?.enable}
										<span class="badge badge-warning preset-tonal-warning"
											><span class="fas fa-exclamation-triangle m-1"></span> Not enabled</span
										>
									{/if}
								</span>
							</div>
						</header>

						<div class="ae_options flex flex-row flex-wrap gap-2 items-center justify-center">
							<a
								href="/idaa/recovery_meetings/{idaa_event_obj?.event_id}"
								class="
                    novi_btn btn-secondary
                    btn btn-lg
                    preset-tonal-primary
                    preset-outlined-primary-100-900 hover:preset-filled-primary-200-800
                    text-lg min-w-fit w-48
                    transition-all
                    "
								title={`View: ${idaa_event_obj?.name}`}
							>
								<!-- <span class="fas fa-envelope-open m-1"></span> -->
								<span class="fas fa-calendar-check m-1 text-neutral-800/80"></span>
								<!-- <span class="fas fa-info-circle"></span> -->
								Meeting Details
							</a>
						</div>

						<section class="ae_section event__content w-full">
							<!-- <div
                class="meeting_description description"
                >
                <div class="ae_label event__description">Description:</div>
                <pre class="ae_value event__description">
                    {@html idaa_event_obj?.description}
                </pre>
            </div> -->

							<div class="event__type" class:ae_d_none={!idaa_event_obj?.type}>
								<span class="ae_label">Type of Recovery Meeting:</span>
								<span class="ae_value">{idaa_event_obj?.type}</span>
							</div>

							<div
								class="event__attend flex flex-row flex-wrap gap-2 items-center justify-start"
								class:ae_d_none={!idaa_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={idaa_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>
										<!-- {idaa_event_obj?.attend_json?.zoom?.full_url} -->
										Join: Zoom ID {idaa_event_obj?.attend_json?.zoom?.meeting_id}
										{#if idaa_event_obj?.attend_json?.zoom?.passcode}
											Passcode: {idaa_event_obj?.attend_json?.zoom?.passcode}
										{/if}
									</a>
								</span>

								<MyClipboard
									value={idaa_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>
							</div>

							<div
								class="event__attend flex flex-row flex-wrap gap-2 items-center justify-start"
								class:ae_d_none={!idaa_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={idaa_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>
										<!-- {idaa_event_obj?.attend_json?.jitsi?.full_url} -->
										Join: {idaa_event_obj?.attend_json?.jitsi?.name ?? 'Jitsi Meeting'}
										{#if idaa_event_obj?.attend_json?.jitsi?.passcode}
											Passcode: {idaa_event_obj?.attend_json?.jitsi?.passcode}
										{/if}
									</a>
								</span>

								<MyClipboard
									value={idaa_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>
							</div>

							<div class="ae_group event__timezone event__recurring_start_time">
								<span class="ae_label">
									<span class="fas fa-clock m-1"></span>
									When:
								</span>
								<!-- class:ae_d_none={!idaa_event_obj?.timezone} -->
								{#if idaa_event_obj?.weekday_sunday || idaa_event_obj?.weekday_monday || idaa_event_obj?.weekday_tuesday || idaa_event_obj?.weekday_wednesday || idaa_event_obj?.weekday_thursday || idaa_event_obj?.weekday_friday || idaa_event_obj?.weekday_saturday}
									<span class="event__weekdays event__recurring_days_of_week">
										<!-- <span class="ae_label">Days of week:</span> -->
										{#if idaa_event_obj?.weekday_sunday}<span class="ae_value">Sunday</span>{/if}
										{#if idaa_event_obj?.weekday_monday}<span class="ae_value">Monday</span>{/if}
										{#if idaa_event_obj?.weekday_tuesday}<span class="ae_value">Tuesday</span>{/if}
										{#if idaa_event_obj?.weekday_wednesday}<span class="ae_value">Wednesday</span
											>{/if}
										{#if idaa_event_obj?.weekday_thursday}<span class="ae_value">Thursday</span
											>{/if}
										{#if idaa_event_obj?.weekday_friday}<span class="ae_value">Friday</span>{/if}
										{#if idaa_event_obj?.weekday_saturday}<span class="ae_value">Saturday</span
											>{/if}
									</span>
								{/if}

								{#if idaa_event_obj?.recurring_start_time}
									<!-- <span class="ae_label">Time:</span> -->
									<span class="ae_value"
										>{ae_util.iso_datetime_formatter(
											`2023-01-01 ${idaa_event_obj?.recurring_start_time}`,
											'time_12_short'
										)}</span
									>
								{/if}
								{#if idaa_event_obj?.timezone}
									<!-- <span class="ae_label">Timezone:</span> -->
									(<span class="ae_value">{idaa_event_obj?.timezone}</span>)
								{:else}
									<div class="event__tiemzone ae_warning bg-warning-100">
										Required: No timezone was given!
									</div>
								{/if}
							</div>

							<div class="event__contacts">
								{#if idaa_event_obj?.contact_li_json && idaa_event_obj?.contact_li_json.length && idaa_event_obj?.contact_li_json[0].full_name}
									<div
										class="event__contact"
										class:ae_d_none={!idaa_event_obj?.contact_li_json[0].full_name}
									>
										<span class="ae_label">
											<span class="fas fa-user m-1"></span> Contact:
										</span>
										{idaa_event_obj?.contact_li_json[0].full_name}
										{#if idaa_event_obj?.contact_li_json[0].email}
											| <a
												href="mailto:{idaa_event_obj?.contact_li_json[0]
													.email}?Subject=IDAA: {idaa_event_obj?.name}"
												class="text-blue-800 hover:underline"
												>{idaa_event_obj?.contact_li_json[0].email}
											</a>
										{/if}
										{#if idaa_event_obj?.contact_li_json[0].phone_mobile}
											<span class="ae_label">| Mobile:</span>
											<a
												href="tel:{idaa_event_obj?.contact_li_json[0].phone_mobile}"
												class="text-blue-800 hover:underline"
												>{idaa_event_obj?.contact_li_json[0].phone_mobile}</a
											>
										{/if}
										{#if idaa_event_obj?.contact_li_json[0].phone_home}
											<span class="ae_label">| Home:</span>
											<a
												href="tel:{idaa_event_obj?.contact_li_json[0].phone_home}"
												class="text-blue-800 hover:underline"
												>{idaa_event_obj?.contact_li_json[0].phone_home}</a
											>
										{/if}
										{#if idaa_event_obj?.contact_li_json[0].phone_office}
											<span class="ae_label">| Office:</span>
											<a
												href="tel:{idaa_event_obj?.contact_li_json[0].phone_office}"
												class="text-blue-800 hover:underline"
												>{idaa_event_obj?.contact_li_json[0].phone_office}</a
											>
										{/if}
										{#if idaa_event_obj?.contact_li_json[0].other_text}| {idaa_event_obj
												?.contact_li_json[0].other_text}{/if}
									</div>
								{:else if $ae_loc.trusted_access}
									<div class="event__contact ae_warning bg-warning-100">
										ALERT: The primary contact information may be missing? This meeting should be
										checked and updated. Please Edit and Save to use the new format.
										<!-- This must be done by March 1, 2024. -->
									</div>
								{/if}

								{#if idaa_event_obj?.contact_li_json && idaa_event_obj?.contact_li_json.length && idaa_event_obj?.contact_li_json[1].full_name}
									<div
										class="event__contact"
										class:ae_d_none={!idaa_event_obj?.contact_li_json[1].full_name}
									>
										<span class="ae_label">
											<span class="fas fa-user m-1"></span> Contact:
										</span>
										{idaa_event_obj?.contact_li_json[1].full_name}
										{#if idaa_event_obj?.contact_li_json[1].email}
											| <a
												href="mailto:{idaa_event_obj?.contact_li_json[1]
													.email}?Subject=IDAA: {idaa_event_obj?.name}"
												class="text-blue-800 hover:underline"
												>{idaa_event_obj?.contact_li_json[1].email}
											</a>
										{/if}
										{#if idaa_event_obj?.contact_li_json[1].phone_mobile}
											<span class="ae_label">| Mobile:</span>
											<a
												href="tel:{idaa_event_obj?.contact_li_json[1].phone_mobile}"
												class="text-blue-800 hover:underline"
												>{idaa_event_obj?.contact_li_json[1].phone_mobile}</a
											>
										{/if}
										{#if idaa_event_obj?.contact_li_json[1].phone_home}
											<span class="ae_label">| Home:</span>
											<a
												href="tel:{idaa_event_obj?.contact_li_json[1].phone_home}"
												class="text-blue-800 hover:underline"
												>{idaa_event_obj?.contact_li_json[1].phone_home}</a
											>
										{/if}
										{#if idaa_event_obj?.contact_li_json[1].phone_office}
											<span class="ae_label">| Office:</span>
											<a
												href="tel:{idaa_event_obj?.contact_li_json[1].phone_office}"
												class="text-blue-800 hover:underline"
												>{idaa_event_obj?.contact_li_json[1].phone_office}</a
											>
										{/if}
										{#if idaa_event_obj?.contact_li_json[1].other_text}| {idaa_event_obj
												?.contact_li_json[1].other_text}{/if}
									</div>
								{/if}
								{#if $ae_loc.trusted_access}
									{#if idaa_event_obj?.contact_li_json && idaa_event_obj?.contact_li_json.length && !idaa_event_obj?.contact_li_json[0].full_name}
										<div class="event__contact ae_warning">
											Required: No primary contact information was found!
										</div>
									{/if}
									{#if !idaa_event_obj?.external_person_id}
										<div class="event__contact ae_warning bg-warning-100">
											Warning: Not linked to a Novi record!
										</div>
									{/if}
								{/if}
							</div>
						</section>

						{#if $ae_loc.administrator_access}
							<section class="ae_section ae_footer ae_meta event__meta text-sm text-neutral-500">
								<!-- {#if idaa_event_obj.location_address_json}
            <span
                class="event__location_address_json"
                >
                Found location JSON: {idaa_event_obj.location_address_json}
            </span>
            {/if}

            {#if idaa_event_obj.contact_li_json && idaa_event_obj.contact_li_json.length}
            <span
                class="event__contact_li_json"
                >
                Found contact JSON: {idaa_event_obj.contact_li_json}
            </span>
            {/if} -->
								<div class="ae_group">
									<span class="event__created_on">
										Created on: {ae_util.iso_datetime_formatter(
											idaa_event_obj?.created_on,
											'datetime_12_short'
										)}
									</span>
									<span class="event__updated_on" class:ae_d_none={!idaa_event_obj?.updated_on}>
										Updated on: {ae_util.iso_datetime_formatter(
											idaa_event_obj?.updated_on,
											'datetime_12_short'
										)}
									</span>
								</div>
							</section>
						{/if}
					</div>
				{/if}
			{/each}
		</div>
	{:else}
		<!-- Does this actually ever show? -->
		<div class="space-y-2">
			{#if $idaa_sess.recovery_meetings.qry__status === 'loading'}
				<div class="ae_highlight ae_padding_md ae_row ae_flex_justify_center">
					<!-- <Spinner class="m-3" /> -->
					<span class="fas fa-spinner fa-spin m-1"></span>
					Loading...
				</div>
			{:else}
				<div class="ae_highlight ae_padding_md ae_row ae_flex_justify_center">
					No recovery meetings available to show. The search may need to be changed.
				</div>
			{/if}
		</div>
	{/if}
</section>

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

	.ae_header h3 {
		/* font-size: 1.2em; */
		/* margin: 0; */
		/* padding: 0; */
	}

	.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;
} */
</style>
