<script lang="ts">
import { onMount } from 'svelte';

// This (ae) is only used for utilities
// import { ae } from 'aether_npm_lib';
import { ae_util } from '$lib/ae_utils/ae_utils';

// These (slct_*) are only used internally for this component. Not needed???
// import { slct_obj_id, slct_obj_li_type, slct_obj_type } from '../admin/stores_admin.js';

// Should these slct_* be exported???
let slct_obj_id = null;
let slct_obj_li_type = null;
let slct_obj_type = null;

export let row_header: boolean = false;
export let primary_obj_li_type: string = slct_obj_li_type; // account, person, user, event, event_session, membership_person
export let obj = null;
console.log(obj);
console.log(typeof obj);


onMount(() => {
    console.log('** Element Mounted: ** Element Object Table Row');

    if (obj) {
        console.log('Table Row Object:', obj);
        // console.log(typeof obj);
    } else {
        return false;
    }

});


/* BEGIN: Handle requests (archive, create, hide, remove, select, update, POST, PATCH, GET, DELETE) */
/* END: Handle requests (archive, create, hide, remove, select, update, POST, PATCH, GET, DELETE) */

/* BEGIN: Handle other local actions (show/hide form, process data) */
/* END: Handle other local actions (show/hide form, process data) */

/* BEGIN: Handle children events (archived, canceled, closed, created, deleted, hidden, updated) */
/* END: Handle children events (archived, canceled, closed, created, deleted, hidden, updated) */
</script>


<tr>
{#if obj != null && typeof obj == 'object'}
{#each Object.entries(obj) as [obj_prop_name, obj_prop_value]}

    <!-- NEED TO ADD A CHECK IF:
        NOTE:
        NOTE:

        obj.id_random and obj.name then replace the ID field column with a link using obj.name

        This should probably go outside/before this tr loop.

        NOTE:
        NOTE:
    -->

    {#if obj_prop_name.endsWith('_id_random') || obj_prop_name == 'for_type' || obj_prop_name == 'for_id'}
        {#if row_header}
            <th data-obj_type={primary_obj_li_type} data-obj_prop_name={obj_prop_name} on:click={() => primary_obj_li_type=obj_prop_name.replace('_id_random', '')}>
                {ae_util.set_obj_prop_display_name({prop_name: obj_prop_name, obj_type: primary_obj_li_type})}
            </th>
        {:else}
            <td
                data-obj_type={primary_obj_li_type}
                data-obj_prop_name={obj_prop_name}
                on:click={() => {
                    slct_obj_type=obj_prop_name.replace('_id_random', '');
                    slct_obj_id=obj_prop_value;
                }}
                on:keypress={() => {
                    slct_obj_type=obj_prop_name.replace('_id_random', '');
                    slct_obj_id=obj_prop_value;
                }}
                >
                <!-- {obj_prop_value} -->

                <!-- {#if (obj_prop_value && obj_prop_value.length > 25)}
                    {obj_prop_value.substring(0,25)}
                {:else} -->
                {#if obj_prop_value}
                    <a href="/{ae_util.return_obj_type_path({obj_type_prop_name: obj_prop_name})}/{obj_prop_value}">
                        {obj_prop_value.substring(0,25)}
                    </a>
                {:else}
                    <!-- {obj_prop_value} -->
                    <span class="fs_smaller">-- None --</span>
                {/if}

            </td>
        {/if}
    {:else if obj_prop_name.endsWith('[URL]')}
        {#if row_header}
            <th data-obj_type={primary_obj_li_type} data-obj_prop_name={obj_prop_name} on:click={() => primary_obj_li_type=obj_prop_name.replaceAll('[URL]', '')}>
                {ae_util.set_obj_prop_display_name({prop_name: obj_prop_name.replaceAll('[URL]', ''), obj_type: primary_obj_li_type})}
            </th>
        {:else}
            <td
                data-obj_type={primary_obj_li_type}
                data-obj_prop_name={obj_prop_name}
                on:click={() => {
                    slct_obj_type=obj_prop_name.replaceAll('[URL]', '');
                    slct_obj_id=obj_prop_value;
                }}
                on:keypress={() => {
                    slct_obj_type=obj_prop_name.replaceAll('[URL]', '');
                    slct_obj_id=obj_prop_value;
                }}
                >
                <a href="{obj_prop_value}">{obj_prop_value}</a>
            </td>
        {/if}
    {:else}
        {#if row_header}
            <th data-obj_type={primary_obj_li_type} data-obj_prop_name={obj_prop_name}>
                {ae_util.set_obj_prop_display_name({prop_name: obj_prop_name, obj_type: primary_obj_li_type})}
            </th>
        {:else}
            <td data-obj_type={primary_obj_li_type} data-obj_prop_name={obj_prop_name}>
                {#if (obj_prop_value)}
                    {#if (obj_prop_value && obj_prop_value.length > 25)}
                        {obj_prop_value.substring(0,25)} ...
                    {:else}
                        {obj_prop_value}
                    {/if}
                {:else}
                    <span class="fs_smaller">-- None --</span>
                {/if}
            </td>
        {/if}
    {/if}
    <!-- <td data-obj_type={primary_obj_li_type} data-obj_prop_name={obj_prop_name}>{obj_prop_value}</td> -->
{/each}
{:else}
    -- Not Set --
{/if}
</tr>


<style lang="postcss">
</style>