<script setup lang="ts">
import { ref, computed } from 'vue'
import AppLayout from '@/layouts/AppLayout.vue'
import AppHeader from '@/components/AppHeader.vue'
import { Product } from '@/types';
import Fuse from 'fuse.js';
import { Input } from '@/components/ui/crm-input'
import { Button } from '@/components/ui/crm-button'
import { Delete, Search, Plus } from "lucide-vue-next"
import PlaceholderPattern from '@/components/PlaceholderPattern.vue';
import { toCurrency, toRoundedCurrency } from '@/lib/utils';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Kbd, KbdGroup } from '@/components/ui/kbd'

interface Props {
    productsData: Product[];
}
const props = defineProps<Props>();
const searchQuery = ref('')
const searchField = ref()
const fuse = computed(() => {
    return new Fuse(props.productsData, {
        keys: ['title', 'description', 'notes'],
        threshold: 0.3
    });
})

const filteredProducts = computed(() => {
    if (!searchQuery.value) {
        return props.productsData;
    }

    return fuse.value.search(searchQuery.value).map(result => result.item);
})

</script>

<template>

    <AppLayout title="Produkte">

        <AppHeader>
            <template #left></template>
            <template #middle>
                <!-- Search field -->
                <Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
                    v-model="searchQuery" />
                <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
                    <Search class="size-4 text-muted-foreground" :stroke-width="1.5" />
                </span>
                <span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
                    <Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
                        <Delete class="size-4 text-muted-foreground" :stroke-width="1.5" />
                    </Button>
                </span>
            </template>
            <template #right>
                <!-- New button -->
                <TooltipProvider>
                    <Tooltip>
                        <TooltipTrigger>
                            <Button size="sm" variant="action" @click="">
                                <Plus />
                                Neu
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                            <span>Neuen Kunden anlegen</span>
                            <KbdGroup class="ml-2">
                                <Kbd class="visible-mac">⌘ N</Kbd>
                                <Kbd class="visible-pc">Ctrl N</Kbd>
                            </KbdGroup>
                        </TooltipContent>
                    </Tooltip>
                </TooltipProvider>
            </template>
        </AppHeader>

        <div class="flex flex-wrap gap-8 lg:gap-12">
            <div v-for="product in filteredProducts"
                class="w-[calc(50%-4*var(--spacing))] md:w-[calc(33%-5.333*var(--spacing))] lg:w-[calc(25%-9*var(--spacing))] xl:w-[calc(20%-9.6*var(--spacing))] flex flex-col gap-4">
                <div class="w-full relative aspect-4/3 overflow-hidden rounded-lg">
                    <img v-if="product.image" :src="'storage/uploads/products/' + product.image"
                        class="size-full object-cover" loading="lazy" />
                    <PlaceholderPattern v-else />
                </div>

                <div>
                    <h2 class="truncate">{{ product.title }}</h2>
                    <p class="text-muted-foreground text-sm truncate">{{ product.description }}</p>
                </div>

                <span class="grow flex items-end text-sm font-bold">{{ toCurrency((product?.price || 0) * (1 +
                    Number(product.margin))) }}</span>
            </div>
        </div>

    </AppLayout>
</template>
