<script lang="ts">
   import { FilePreview } from 'stwui';
   import { slide } from 'svelte/transition';
   import { UploadStatus } from 'stwui/enums';
	import type { PickerPreviewFile } from 'stwui/types';

   const files: PickerPreviewFile[] = [
		{
			file: {
				lastModified: 1677269995370,
				name: 'Screenshot 2023-02-24 at 3.19.17 PM.png',
				size: 420305,
				type: 'image/png'
			},
			src: 'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			progress: 25,
			status: UploadStatus.UPLOADING
		},
		{
			file: {
				lastModified: 1677269995370,
				name: 'Screenshot 2023-02-25 at 3.19.17 PM.png',
				size: 420305,
				type: 'image/png'
			},
			src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
			progress: undefined,
			status: UploadStatus.PENDING
		}
	];
</script>

<FilePreview>
   {#each files as currentFile, index (currentFile.src)}
      {@const { file, src, progress, status } = currentFile}
      <div transition:slide|local>
         <FilePreview.Item
            class="flex flex-row cursor-pointer"
         >
            <FilePreview.Item.Leading slot="leading" class="h-8 w-8 min-w-[2rem] min-h-[2rem]">
               {#if file.type.startsWith('image/')}
                  <FilePreview.Item.Leading.Avatar slot="avatar" size="sm" {src} alt={file.name} />
               {:else}
                  <FilePreview.Item.Leading.Icon slot="icon" data={file_document} class="h-5 w-5" />
               {/if}
            </FilePreview.Item.Leading>

            <FilePreview.Item.FileContent slot="file-content">
               <FilePreview.Item.FileContent.Title slot="title">
                  {file.name}
               </FilePreview.Item.FileContent.Title>
               <FilePreview.Item.FileContent.Description slot="description">
                  {formatFileSize(file.size)}
               </FilePreview.Item.FileContent.Description>
            </FilePreview.Item.FileContent>
         </FilePreview.Item>
      </div>
   {/each}
</FilePreview>

<script lang="ts">
   import { FilePreview } from 'stwui';
   import { slide } from 'svelte/transition';
   import { UploadStatus } from 'stwui/enums';
   import type { PickerPreviewFile } from 'stwui/types';

   const files: PickerPreviewFile[] = [
      {
         file: {
            lastModified: 1677269995370,
            name: 'Screenshot 2023-02-24 at 3.19.17 PM.png',
            size: 420305,
            type: 'image/png'
         },
         src: 'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
         progress: 25,
         status: UploadStatus.UPLOADING
      },
      {
         file: {
            lastModified: 1677269995370,
            name: 'Screenshot 2023-02-25 at 3.19.17 PM.png',
            size: 420305,
            type: 'image/png'
         },
         src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
         progress: undefined,
         status: UploadStatus.PENDING
      }
   ];

   async function handleFileClick(file: PickerPreviewFile) {
		if (file.status === UploadStatus.PENDING || file.status === UploadStatus.Uploading) {
         console.log('Cancel Upload');
      } else if (file.status === UploadStatus.COMPLETE) {
         console.log('Remove Uploaded File');
      } else if (file.status === UploadStatus.FAILED) {
         console.log('Retry Upload');
      } else if (file.status == UploadStatus.REJECTED) {
         console.log('Remove Rejected File');
      }
	} 
</script>

<FilePreview bordered class="rounded-md">
   {#each files as currentFile, index (currentFile.src)}
      {@const { file, src, progress, status } = currentFile}
      <div transition:slide|local>
         <FilePreview.Item
            class="flex flex-row cursor-pointer"
            on:click={() => handleFileClick(currentFile)}
         >
            <FilePreview.Item.Leading slot="leading" class="h-8 w-8 min-w-[2rem] min-h-[2rem]">
               {#if file.type.startsWith('image/')}
                  <FilePreview.Item.Leading.Avatar slot="avatar" size="sm" {src} alt={file.name} />
               {:else}
                  <FilePreview.Item.Leading.Icon slot="icon" data={file_document} class="h-5 w-5" />
               {/if}
            </FilePreview.Item.Leading>

            <FilePreview.Item.FileContent slot="file-content">
               <FilePreview.Item.FileContent.Title slot="title">
                  {file.name}
               </FilePreview.Item.FileContent.Title>
               <FilePreview.Item.FileContent.Description slot="description">
                  {formatFileSize(file.size)}
               </FilePreview.Item.FileContent.Description>
            </FilePreview.Item.FileContent>

            <FilePreview.Item.UploadContent slot="upload-content">
               <FilePreview.Item.UploadContent.Status slot="status">
                  {#if status === UploadStatus.FAILED}
                     Upload Failed
                  {:else if status === UploadStatus.COMPLETE}
                     Upload Complete
                  {:else if status === UploadStatus.UPLOADING}
                     Uploading {#if progress}{progress.toFixed(0)}%{:else}0%{/if}
                  {:else if status === UploadStatus.REJECTED}
                     Upload Rejected
                  {:else if status === UploadStatus.PENDING}
                     Pending Upload
                  {/if}
               </FilePreview.Item.UploadContent.Status>
               <FilePreview.Item.UploadContent.Action slot="action">
                  {#if status === UploadStatus.FAILED}
                     Tap to retry
                  {:else if status === UploadStatus.COMPLETE}
                     Tap to undo
                  {:else if status === UploadStatus.UPLOADING}
                     Tap to cancel
                  {:else if status === UploadStatus.REJECTED}
                     Tap to remove
                  {:else if status === UploadStatus.PENDING}
                     Tap to cancel
                  {/if}
               </FilePreview.Item.UploadContent.Action>
            </FilePreview.Item.UploadContent>

            <FilePreview.Item.Extra
               slot="extra"
               placement="center"
               class="justify-center items-center flex"
            >
               {#if status === UploadStatus.FAILED}
                  <FilePreview.Item.Extra.Failed />
               {:else if status === UploadStatus.COMPLETE}
                  <FilePreview.Item.Extra.Complete />
               {:else if status === UploadStatus.UPLOADING && progress !== undefined}
                  <FilePreview.Item.Extra.Uploading {progress} />
               {:else if status === UploadStatus.REJECTED}
                  <FilePreview.Item.Extra.Rejected />
               {:else if status === UploadStatus.PENDING}
                  <FilePreview.Item.Extra.Pending />
               {/if}
            </FilePreview.Item.Extra>
         </FilePreview.Item>
      </div>
   {/each}
</FilePreview>