<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 Element_data_store from '$lib/element_data_store.svelte';

const store_current_tab: Writable<string> = localStorageStore('ae_sponsorships_current_tab', 'start');
console.log(`store_current_tab:`, $store_current_tab);


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';
import type { key_val } 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();

let placeholder_li: key_val = {
    file_logo_primary: '-- No File Uploaded --',
    file_logo_light: '-- No File Uploaded --',
    file_logo_dark: '-- No File Uploaded --',
    file_media_promo_video: '-- No File Uploaded --',
};

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 Modal - Sponsorship Obj');
});

$: if ($slct.sponsorship_obj) {
    console.log(`Sponsorship object selected:`, $slct.sponsorship_obj);

    // Logo related
    if ($slct.sponsorship_obj.logo_li_json) {
        if ($slct.sponsorship_obj.logo_li_json.primary && $slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random) {
            placeholder_li.file_logo_primary = ae_util.create_img_element({
                account_id: $ae_loc.account_id,
                base_url: $ae_api.base_url,
                hosted_file_id: $slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random,
                filename: `${$slct.sponsorship_obj.name} [logo_primary].${$slct.sponsorship_obj.logo_li_json.primary.extension}`,
                inc_link: true,
            })

            // `<img src="${$ae_api.base_url}/hosted_file/${$slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random}/download?x_no_account_id_token=${$ae_loc.account_id}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.primary.filename}`;
        }
        if ($slct.sponsorship_obj.logo_li_json.light && $slct.sponsorship_obj.logo_li_json.light.hosted_file_id_random) {
            placeholder_li.file_logo_light = ae_util.create_img_element({
                account_id: $ae_loc.account_id,
                base_url: $ae_api.base_url,
                hosted_file_id: $slct.sponsorship_obj.logo_li_json.light.hosted_file_id_random,
                filename: `${$slct.sponsorship_obj.name} [logo_light].${$slct.sponsorship_obj.logo_li_json.light.extension}`,
                inc_link: true,
            })

            // `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.logo_li_json.light.hosted_file_id_random}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.light.filename}`;
        }
        if ($slct.sponsorship_obj.logo_li_json.dark && $slct.sponsorship_obj.logo_li_json.dark.hosted_file_id_random) {
            placeholder_li.file_logo_dark = ae_util.create_img_element({
                account_id: $ae_loc.account_id,
                base_url: $ae_api.base_url,
                hosted_file_id: $slct.sponsorship_obj.logo_li_json.dark.hosted_file_id_random,
                filename: `${$slct.sponsorship_obj.name} [logo_dark].${$slct.sponsorship_obj.logo_li_json.dark.extension}`,
                inc_link: true,
            })

            // `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.logo_li_json.dark.hosted_file_id_random}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.dark.filename}`;
        }
    }
    // Other media files related
    if ($slct.sponsorship_obj.media_li_json) {
        if ($slct.sponsorship_obj.media_li_json.promo_video && $slct.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random) {
            placeholder_li.file_media_promo_video = ae_util.create_video_element({
                account_id: $ae_loc.account_id,
                base_url: $ae_api.base_url,
                hosted_file_id: $slct.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random,
                filename: `${$slct.sponsorship_obj.name} [promo_video].${$slct.sponsorship_obj.media_li_json.promo_video.extension}`,
                inc_link: true,
            })

            // `<video src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random}" controls class="max-w-64"></video>${$slct.sponsorship_obj.media_li_json.promo_video.filename}`;
        }
    }


}

</script>

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

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

<header class={parent.regionHeader}>
    {@html $slct.sponsorship_obj.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 sponsorship's information is customizable or can be hidden completely.</p>

<div class="sponsorship__content space-y-4">
    <div class="sponsorship__poc">
        <h2 class="h4">Point of Contact</h2>
        <!-- <span class="ae_label">Point of Contact:</span> -->
        <span class="ae_value">{@html $slct.sponsorship_obj.poc_json.full_name}</span>

        <span class="ae_label">| Email:</span>
        <span class="ae_value"><span class="fas fa-envelope"></span>
        <a href="mailto:{$slct.sponsorship_obj.poc_json.email}?Subject={$slct.sponsorship_obj.full_name}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.poc_json.email}</a></span>

        <span class="ae_label">| Mobile:</span>
        <span class="ae_value"><span class="fas fa-mobile-alt"></span>
        <a href="tel:{$slct.sponsorship_obj.poc_json.phone_mobile}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.poc_json.phone_mobile ?? '-- Not Given --'}</span>
    </div>

    <!-- <div
        class="sponsorship_description description"
        >
        <div class="ae_label sponsorship__description">Description:</div>
        <pre class="ae_value sponsorship__description pre_wrap">{@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"
        >
        <h2 class="h4">Level of Sponsorship</h2>
        <!-- <span class="ae_label">Level of Sponsorship:</span> -->
        <span class=""><span class="fas fa-gem"></span> {$slct.sponsorship_obj.level_str} ({$slct.sponsorship_obj.level_num})</span>
    </div>

    <!-- <div
        class:hidden={!$slct.sponsorship_obj.amount}
        class="sponsorship_amount"
        >
        <span class="ae_label">Amount:</span>
        <span class="ae_value">
        ${$slct.sponsorship_obj.amount/100}
        </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="mailing_address">
       <h2 class="h4">Mailing Address</h2>
       <div>
        {#if $slct.sponsorship_obj.address_li_json.mailing}
        {#if $slct.sponsorship_obj.address_li_json.mailing.line_1}{$slct.sponsorship_obj.address_li_json.mailing.line_1}<br>{/if}
        {#if $slct.sponsorship_obj.address_li_json.mailing.line_2}{$slct.sponsorship_obj.address_li_json.mailing.line_2}<br>{/if}
        {#if $slct.sponsorship_obj.address_li_json.mailing.city}{$slct.sponsorship_obj.address_li_json.mailing.city}{/if}
        {#if $slct.sponsorship_obj.address_li_json.mailing.state_province}, {$slct.sponsorship_obj.address_li_json.mailing.state_province}{/if}
        {#if $slct.sponsorship_obj.address_li_json.mailing.postal_code} {$slct.sponsorship_obj.address_li_json.mailing.postal_code}{/if}
        {#if $slct.sponsorship_obj.address_li_json.mailing.country} {$slct.sponsorship_obj.address_li_json.mailing.country}{/if}
        <!-- {#if $slct.sponsorship_obj.address_li_json.mailing.other_text}, {$slct.sponsorship_obj.address_li_json.mailing.other_text}{/if} -->
        {/if}
        </div>
    </div>

    <div
        class="accommodations">
        <h2 class="h4">Accommodations</h2>
        {#if $slct.sponsorship_obj.questions_li_json && $slct.sponsorship_obj.questions_li_json.accommodations_text}
        <div class="">
            {$slct.sponsorship_obj.questions_li_json.accommodations_text}
        </div>
        {/if}
    </div>

    <div
        class="marketing">
        <h2 class="h4">Marketing</h2>

        {#if $slct.sponsorship_obj.website_url}
        <div class="">
            <span class="fas fa-globe"></span> Organization website: <a href="{$slct.sponsorship_obj.website_url}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.website_url}</a>
        </div>
        {/if}

        {#if $slct.sponsorship_obj.social_li_json}

        {#if $slct.sponsorship_obj.social_li_json.facebook}
        <div class="">
            <span class="fab fa-facebook"></span> Facebook: <a href="{$slct.sponsorship_obj.social_li_json.facebook}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.social_li_json.facebook}</a>
        </div>
        {/if}
        {#if $slct.sponsorship_obj.social_li_json.instagram}
        <div class="">
            <span class="fab fa-instagram"></span> Instagram:<a href="{$slct.sponsorship_obj.social_li_json.instagram}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.social_li_json.instagram}</a>
        </div>
        {/if}
        {#if $slct.sponsorship_obj.social_li_json.linkedin}
        <div class="">
            <span class="fab fa-linkedin"></span> LinkedIn: <a href="{$slct.sponsorship_obj.social_li_json.linkedin}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.social_li_json.linkedin}</a>
        </div>
        {/if}
        {#if $slct.sponsorship_obj.social_li_json.twitter}
        <div class="">
            <span class="fab fa-twitter"></span> Twitter: <a href="{$slct.sponsorship_obj.social_li_json.twitter}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.social_li_json.twitter}</a>
        </div>
        {/if}

        {/if}
    </div>

    <div
        class="file_uploads">
        <h2 class="h4">File Uploads</h2>

        {#if placeholder_li.file_logo_primary}
        <div class="">
            <span class="fas fa-image"></span> Logo (Primary): {@html placeholder_li.file_logo_primary}
        </div>
        {/if}

        {#if placeholder_li.file_logo_light}
        <div class="">
            <span class="fas fa-image"></span> Logo (Light): {@html placeholder_li.file_logo_light}
        </div>
        {/if}

        {#if placeholder_li.file_logo_dark}
        <div class="">
            <span class="fas fa-image"></span> Logo (Dark): {@html placeholder_li.file_logo_dark}
        </div>
        {/if}

        {#if placeholder_li.file_media_promo_video}
        <div class="">
            <span class="fas fa-video"></span> Promo Video: {@html placeholder_li.file_media_promo_video}
        </div>
        {/if}

    </div>


    <div class="ae_list sponsorship__guests">
        <h2 class="h4">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 have been added</div>
        {/if}

    </div>


    <section class="card-footer 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>
    </section>


</div>

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

    {#if $ae_loc.administrator_access}
        <div 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.sponsorship_obj.poc_json.email}?`)) {return false;}

                    api.send_email({
                        api_cfg: $ae_api,
                        from_email: 'scott.idem+from@oneskyit.com',
                        from_name: 'Scott Idem',
                        to_email: $slct.sponsorship_obj.poc_json.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.sponsorships.show_edit__sponsorship_obj = true;
                    $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
                    parent.onClose();
                    $slct_trigger = 'show_edit__sponsorship_obj';
                }}
                class="btn variant-glass-warning mx-1"
                title={`Edit sponsorship: ${$slct.sponsorship_obj.name}`}
                >
                <span class="fas fa-edit mx-1"></span> Edit
            </button>
        </div>
    {/if}

    <button
        class="btn variant-glass-primary mx-1"
        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;
}

.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>
