<script setup>
import { faRecycle } from "@fortawesome/free-solid-svg-icons";
import { usePage, useForm } from "@inertiajs/vue3";

const page = usePage();

// creates form to send SelectedFiles Request
const form = useForm({
    parent_id: null,
    all: null,
    Ids: [],
});

// define props
const props = defineProps({
    wipeall: {
        type: Boolean,
        default: false,
        required: false,
    },
    selected: {
        type: Array,
        required: false,
    },
});

// define delete function
const onClick = () => {
    form.parent_id = page.props.folder.id;
    form.all = props.wipeall;
    form.Ids = props.selected;

    form.post(route("file.recycle"));
};
</script>

<template>
    <button
        @click="onClick()"
        class="border-gray-700 border px-3 py-2 rounded hover:border-orange-600 hover:bg-orange-600 flex justify-center items-center gap-2"
    >
        <font-awesome-icon
            :icon="faRecycle"
            class="h-5 w-5"
            aria-hidden="true"
        />
        Recycle
    </button>
</template>
