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

import { ae_util } from '$lib/ae_utils/ae_utils';

// Should these slct_* be exported???
let slct_obj_id = $state<any>(null);
let slct_obj_li_type = '';
let slct_obj_type = $state<string | null>(null);

interface Props {
    row_header?: boolean;
    primary_obj_li_type?: string; // account, person, user, event, event_session, membership_person
    obj?: any;
}

let {
    row_header = false,
    primary_obj_li_type = $bindable(slct_obj_li_type),
    obj = null
}: Props = $props();

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

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

<tr>
    {#if obj != null && typeof obj == 'object'}
        {#each Object.entries(obj) as [obj_prop_name, obj_prop_value] (obj_prop_name)}
            <!-- NEED TO ADD A CHECK IF:
            NOTE and WARNING:

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

            {#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}
                        onclick={() =>
                            (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}
                        onclick={() => {
                            slct_obj_type = obj_prop_name.replace(
                                '_id_random',
                                ''
                            );
                            slct_obj_id = obj_prop_value;
                        }}
                        onkeypress={() => {
                            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}">
                                {String(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}
                        onclick={() =>
                            (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}
                        onclick={() => {
                            slct_obj_type = obj_prop_name.replaceAll(
                                '[URL]',
                                ''
                            );
                            slct_obj_id = obj_prop_value;
                        }}
                        onkeypress={() => {
                            slct_obj_type = obj_prop_name.replaceAll(
                                '[URL]',
                                ''
                            );
                            slct_obj_id = obj_prop_value;
                        }}>
                        <a href={String(obj_prop_value)}
                            >{String(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 typeof obj_prop_value === 'string' && 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}
        {/each}
    {:else}
        <!-- This should never happen -->
        <td class="fs_smaller" colspan="100"> -- Not Set -- </td>
    {/if}
</tr>

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