<script lang="ts">
    import { useAtom } from 'jotai-svelte';
    import { fileListState, finalFileListState } from '$lib/state/fileList.state';
    import toHumanSize from '$lib/utils/humanSize';
    import formatText from '$lib/utils/formatText';
    import extractFileName from '$lib/utils/extractFileName';
    import getAudioMeta from '$lib/utils/getAudioCoverURL';
    import convertCoverData from '$lib/utils/convertCoverData';
    import type { IAudioMetadata } from 'music-metadata-browser';
    import formatDuration from '$lib/utils/formatDuration';
    const items = useAtom(fileListState);
    const finalItems = useAtom(finalFileListState);
    let displayItems: any[] = [];

    $: {
        const length = $items.length;
        for (let i = 0; i < length; i++) {
            if ($items[i].type.indexOf('audio') === -1) {
                finalItems.update((prev) => {
                    return [...prev, $items[i]];
                });
                continue;
            }
            if ($items[i].pic || $items[i].pic === 'N/A') continue;
            getAudioMeta($items[i], (metadata: IAudioMetadata) => {
                let cover: string | null = null;
                let duration: number | null = null;
                if (metadata.common.picture) cover = convertCoverData(metadata.common.picture[0]);
                if (metadata.format.duration) duration = metadata.format.duration;
                finalItems.update((prev) => {
                    if (cover) {
                        let currentItem = [];
                        currentItem = $items[i];
                        currentItem.pic = cover;
                        currentItem.duration = duration;
                        return [...prev, currentItem];
                    } else {
                        let currentItem = [];
                        currentItem = $items[i];
                        currentItem.pic = 'N/A';
                        currentItem.duration = duration;
                        return [...prev, currentItem];
                    }
                });
            });
        }
    }

    $: {
        // remove duplicated
        displayItems = $finalItems.filter((item, index) => {
            return $finalItems.indexOf(item) === index;
        })
    }
</script>

<ul
    class="mt-4 relative w-full min-h-48 max-h-[27rem] overflow-y-auto bg-zinc-200 dark:bg-zinc-800 rounded"
>
    {#each displayItems as item}
        <li class="relative m-4 p-4 bg-zinc-300 dark:bg-zinc-600 rounded-lg">
            <span>{extractFileName(item.name)}</span> <br />
            <span>{toHumanSize(item.size)}</span>
            {#if item.type}
                · <span>{formatText(item.type)}</span>
            {:else if item.name.split('.').length > 1}
                · <span>{formatText(item.name.split('.')[item.name.split('.').length - 1])}</span>
            {:else}
                · <span>未知格式</span>
            {/if}
            {#if item.duration}
                · <span>{formatDuration(item.duration)}</span>
            {/if}
            {#if item.pic !== undefined && item.pic !== 'N/A'}
                <img
                    class="h-16 w-16 object-cover absolute rounded-lg right-2 top-2"
                    src={item.pic}
                    alt=""
                />
            {/if}
        </li>
    {/each}
</ul>
