<script>
    import PreviewCardSmall from "./PreviewCardSmall.svelte";
    import PreviewCard from "./PreviewCard.svelte";
    import Icon from "../common/Icon.svelte";
    import Preview from "../files/Preview.svelte";
    import {getContext} from "svelte";

    const channel = getContext("channel");
    export let graph;
    export let record;
    let parentEdgesByField = graph.parentEdges
        .filter((edge) => edge.source !== record.id && edge.depth === 1)
        .reduce((carry, edge) => {

            let schemaField = edge.sourceSchema + edge.field;

            let arecord = graph.records.find((n) => {
                return n.id === edge.source;
            });
            if (!carry[schemaField]) {

                let schema = channel.schemas.find((s) => s.name === edge.sourceSchema);
                carry[schemaField] = {
                    field: schema.fields.find((f) => f.name === edge.field),
                    schema: schema,
                    nodes: [],
                };
            }
            if (arecord) {
                carry[schemaField].nodes.push(arecord);
            }
            return carry;
        }, {});
    console.log(parentEdgesByField)
    let childrenEdgesByField = graph.edges
        .filter((edge) => edge.source === record.id && edge.depth === 0)
        .reduce((carry, edge) => {

            let schemaField = edge.targetSchema + edge.field;

            if (!carry[schemaField]) {
                carry[schemaField] = {
                    field: channel.schemas
                        .find((s) => s.name === record.schema)
                        .fields.find((f) => f.name === edge.field),
                    nodes: [],
                };
            }

            let arecord = graph.records.find((n) => {
                return n.id === edge.target;
            });
            if (arecord) {
                carry[schemaField].nodes.push(arecord);
            }

            return carry;
        }, {});
</script>

{#each Object.entries(parentEdgesByField) as [fieldName, fieldData]}
    <div class="lx-card mt-3">
        <div class="text-center mb-3 d-flex justify-content-center align-items-center text-uppercase ">
            <span>{fieldData.schema.label}</span>
            <Icon icon="angle-right" width="12" height="12"/>
            <span>{fieldData.field.label}</span>
        </div>
        <div class="d-flex justify-content-center text-center flex-wrap">
            {#each fieldData.nodes as node}
                {#if node._file?.path}
                    <div class="ms-2 mb-2" style="max-height:64px;">
                        <Preview record={node} size="small"/>
                    </div>
                {:else}
                    <div class="ms-2 mb-2">
                        <PreviewCardSmall {graph} record={node}/>
                    </div>
                {/if}
            {/each}
        </div>
        <!--        <div class="text-center mt-3 d-block">{fieldData.field.label}</div>-->
    </div>
{/each}
{#if Object.entries(parentEdgesByField).length > 0}
    <div class="text-center my-4">
        <Icon icon="angles-down" width="32" height="32"/>
    </div>
{/if}
<div style="max-width:400px;margin:0 auto;">
    <PreviewCard {graph} record={record}/>
</div>
{#if Object.entries(childrenEdgesByField).length > 0}
    <div class="text-center my-4">
        <Icon icon="angles-down" width="32" height="32"/>
    </div>
{/if}

{#each Object.entries(childrenEdgesByField) as [fieldName, fieldData]}
    <div class="lx-card mt-3">
        <div class="text-center mb-5 d-block">{fieldData.field.label}</div>
        <div class="d-flex justify-content-center text-center flex-wrap">
            {#each fieldData.nodes as node}
                {#if fieldData.field.info.ui === "file"}
                    <div
                        class="ms-2 mb-2"
                        style="max-width:64px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
                    >
                        <Preview
                            record={node}
                            size="small"
                            showFilename={true}
                        />
                    </div>
                {:else}
                    <div class="ms-2 mb-2">
                        <PreviewCardSmall {graph} record={node}/>
                    </div>
                {/if}
            {/each}
        </div>
    </div>
{/each}

<style>
</style>
