<script setup>
import { Link } from '@inertiajs/vue3';
import { useForm } from '@inertiajs/vue3';
import { reactive } from 'vue';
import Edit from './Edit.vue';
import axios from 'axios';

const props = defineProps({
    photo: {
        type: Object,
        required: true,
    },
    index: {
        type: Number,
        required: true,
    },
    length: {
        type: Number,
        required: true,
    },
    columns: {
        type: Number,
        default: 3,
    },
    noEdit: {
        type: Boolean,
        default: false
    }
});

const photoState = reactive({ edit: false });

const emits = defineEmits(["full-screen", "delete-photo"]);


</script>

<template>
    <div :class="{ 
        'border-r': (props.index + 1) % props.columns  != 0, 
        'border-b': props.index < props.length - props.columns, 
        'laptop:h-96 h-44': props.columns === 3,
        'h-[25rem]': props.columns !== 3, 
    }" 
    class="group relative w-full overflow-hidden border-white hover:scale-[1.003] flex items-center bg-black/90">
        <div class="hidden absolute left-0 right-0 top-0 p-2 group-hover:flex justify-between">
            <div class="flex items-center">
                <button @click="() => emits('full-screen', props.photo.uuid)" class="bg-black/50 p-1 rounded-md mr-2"><img src="/icons/full-screen.svg" class="h-6 invert"></button>
                <div class="relative">
                    <button v-if="!props.noEdit"@click="photoState.edit = !photoState.edit" class="bg-black/50 p-1 rounded-md mr-2"><img src="/icons/modify.svg" class="h-6 invert"></button>
                    <Edit v-if="photoState.edit && !props.noEdit"
                    @close="() => photoState.edit = false"
                    :photo="props.photo"
                    :class="'absolute left-0 top-full mt-2'"
                    />
                </div>
                <button @click="emits('delete-photo', props.photo.uuid)" class="bg-red-600 p-1 rounded-md"><img src="/icons/delete.png" class="h-6 invert"></button>
            </div>
        </div>
        <div class="hidden absolute left-0 right-0 bottom-0 p-2 group-hover:flex justify-between flex-wrap items-end">
            <a :href="props.photo.path" target="_blank" class="bg-black/50 p-1 rounded-md mt-1 h-fit"><img src="/icons/download.png" class="h-6 invert"></a>
            <div class="text-right bg-black/30 p-1 px-3 rounded-md mt-1">
                <p class="text-sm text-white">{{ props.photo.name }}</p>
                <p class="text-sm text-white">publier par {{ props.photo.user.name }}</p>
            </div>
        </div>
        <img :src="props.photo.path" class="w-full bg-white">
    </div>
</template>