<script setup lang="ts">
import { Download, Play } from 'lucide-vue-next';
import PlaylistUploadEntry from '@/components/internal/import/uploadentry/PlaylistUploadEntry.vue';
import SingleUploadEntry from '@/components/internal/import/uploadentry/SingleUploadEntry.vue';
import Outline from '@/components/ui/outline/Outline.vue';
import SidebarTrigger from '@/components/ui/sidebar/SidebarTrigger.vue';
</script>

<template>
    <div class="flex-1">
        <NuxtLayout name="default">
            <template #header>
                <Outline side="bottom" padding="dense" class="w-full">
                    <div class="flex gap-8 w-full items-center">
                        <SidebarTrigger :size="5" />
                        <h2 class="scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
                            Import tracks
                        </h2>
                    </div>
                </Outline>
            </template>
            <div class="w-full flex flex-col p-8">
                <Outline class="rounded-xl bg-muted flex flex-col items-center justify-center gap-1">
                    <Download />
                    <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
                        Drag and drop your audio files
                    </h4>
                    <p class="text-sm text-muted-foreground">
                        or
                    </p>
                    <Button variant="destructive">
                        <Play />
                        From Youtube
                    </Button>
                </Outline>
                <div>
                    <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
                        Uploaded files
                    </h3>
                    <div class="space-y-2">
                        <SingleUploadEntry title="Test" size="3.8 MB" format="mp4" type="file" />
                        <SingleUploadEntry title="Test" :progress="78" />
                        <SingleUploadEntry title="Test" error="Uploading failed, please check your internet" />
                        <PlaylistUploadEntry title="My Playlist" :trackCount="10" type="YouTube" :progress="75"
                            :playlistProgressData="{
                                playlistId: 1,
                                trackSourceId: 2,
                                userId: 3,
                                timestamp: 123456,
                                ytdlnStdout: `[youtube] Extracting URL: https://www.youtube.com/playlist?list=PL1234567890
[youtube:playlist] PL1234567890: Downloading 10 videos
[download] Destination: My Playlist [PL1234567890].mp3
[ExtractAudio] Destination: My Playlist [PL1234567890].mp3
[info] Download completed: My Playlist [PL1234567890].mp3
[info] 10 files downloaded successfully`,
                                overallProgress: 34,
                                status: 'LOADING'
                            }" />
                    </div>
                </div>
            </div>
        </NuxtLayout>
    </div>
</template>
