<script setup lang="ts">
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { toast } from 'vue-sonner';
import { deleteShare } from '~/lib/api/shares';
import type { Share } from '~/shared/types/shares';

const { shares } = defineProps<{
    shares: Share[];
}>();

function onCopyClicked(share: Share) {
    const link = getShareLink(share);
    if (copyToClipboard(link)) {
        toast.success('Share', {
            description: 'Copied the link to the clipboard',
        });
    } else {
        console.log(`Here's the link to ${share.path}: ${link}`);
        toast.error('Share', {
            description: `Failed to copy the link to the clipboard. Logged it to the console instead.`,
        });
    }
}

async function onDeleteClicked(share: Share) {
    const result = await deleteShare(share.warrenId, share.id);

    if (result.success) {
        refreshNuxtData('current-file-shares');
        toast.success('Share', {
            description: `Successfully deleted the share for ${result.share.path}`,
        });
    } else {
        toast.error('Share', {
            description: 'Failed to delete share',
        });
    }
}
</script>

<template>
    <Table>
        <TableHeader>
            <TableRow>
                <TableHead class="w-[100px]">ID</TableHead>
                <TableHead>Password</TableHead>
                <TableHead>Expiration</TableHead>
                <TableHead>Created</TableHead>
                <TableHead class="w-0 text-right">Actions</TableHead>
            </TableRow>
        </TableHeader>
        <TableBody>
            <TableRow v-for="share in shares" :key="share.id">
                <TableCell class="font-medium" :title="share.id">
                    <span class="hidden sm:block">
                        {{ share.id }}
                    </span>
                    <span class="block sm:hidden"
                        >{{ share.id.slice(0, 3) }}...{{ share.id.slice(-3) }}
                    </span>
                </TableCell>
                <TableCell>{{ share.password ? 'Yes' : 'No' }}</TableCell>
                <TableCell>{{
                    share.expiresAt == null
                        ? 'Never'
                        : $dayjs(share.expiresAt).format('MMM D, YYYY HH:mm')
                }}</TableCell>
                <TableCell>{{
                    $dayjs(share.createdAt).format('MMM D, YYYY HH:mm')
                }}</TableCell>
                <TableCell>
                    <Button
                        variant="ghost"
                        size="icon"
                        @click="() => onCopyClicked(share)"
                        ><Icon name="lucide:copy"
                    /></Button>
                    <Button
                        variant="ghost"
                        size="icon"
                        @click="() => onDeleteClicked(share)"
                        ><Icon name="lucide:trash-2"
                    /></Button>
                </TableCell>
            </TableRow>
        </TableBody>
    </Table>
</template>
