<template>
    <button type="button"
            class="siteMenuAdmin__btn siteMenuAdmin__btn--ghost"
            :title="'Restore ' + name"
            :disabled="busy"
            @click="restore">
        <i class="fa" :class="busy ? 'fa-spinner fa-spin' : 'fa-undo'"></i>
        Restore
    </button>
</template>

<script>
/**
 * Restore control for a soft-deleted Site Menu item. AJAX-calls the restore
 * route and emits `restored` so the trash view drops it from its list.
 */
export default {
    name: 'site-menu-restore',
    props: {
        base: { type: String, required: true },
        itemId: { type: [String, Number], required: true },
        name: { type: String, default: 'this item' },
    },
    data() {
        return { busy: false };
    },
    methods: {
        restore() {
            if (this.busy) { return; }
            this.busy = true;
            fetch(this.base + '/restore/' + this.itemId, { headers: { Accept: 'application/json' }, credentials: 'same-origin' })
                .then(response => response.json())
                .then(data => { if (data.success) { this.$emit('restored', this.itemId); } })
                .catch(() => {})
                .finally(() => { this.busy = false; });
        },
    },
};
</script>
