<template>
    <div class="siteMenuAdmin__actions">
        <button type="button" class="siteMenuAdmin__iconBtn siteMenuAdmin__iconBtn--edit" title="Edit"
                @click="$emit('edit', itemId)">
            <i class="fa fa-pencil"></i>
        </button>

        <button type="button"
                class="siteMenuAdmin__iconBtn siteMenuAdmin__iconBtn--dup"
                :class="{ 'siteMenuAdmin__iconBtn--confirming': pending === 'dup' }"
                :title="pending === 'dup' ? 'Click again to duplicate' : 'Duplicate ' + name + ' and its children'"
                :disabled="busy !== null"
                @click="handleDuplicate">
            <i class="fa" :class="iconFor('dup', 'fa-copy')"></i>
        </button>

        <button type="button"
                class="siteMenuAdmin__iconBtn siteMenuAdmin__iconBtn--del"
                :class="{ 'siteMenuAdmin__iconBtn--confirming': pending === 'del' }"
                :title="pending === 'del' ? 'Click again to delete' : 'Delete ' + name"
                :disabled="busy !== null"
                @click="handleDelete">
            <i class="fa" :class="iconFor('del', 'fa-trash-o')"></i>
        </button>
    </div>
</template>

<script>
/**
 * Row action controls (edit / duplicate / delete) for the Site Menu SPA list.
 * Edit/duplicate/delete emit events; the parent list updates its reactive data
 * (no DOM manipulation, no page reload). Duplicate and delete use a two-step
 * inline confirm so there is no blocking browser dialog.
 */
export default {
    name: 'site-menu-actions',
    props: {
        base: { type: String, required: true },
        itemId: { type: [String, Number], required: true },
        name: { type: String, default: 'this item' },
    },
    data() {
        return { pending: null, busy: null, timer: null };
    },
    methods: {
        iconFor(action, idle) {
            if (this.busy === action) { return 'fa-spinner fa-spin'; }
            if (this.pending === action) { return 'fa-check'; }
            return idle;
        },
        arm(action) {
            clearTimeout(this.timer);
            this.pending = action;
            this.timer = setTimeout(() => { this.pending = null; }, 3000);
        },
        run(action, url, event) {
            clearTimeout(this.timer);
            this.pending = null;
            this.busy = action;
            fetch(url, { headers: { Accept: 'application/json' }, credentials: 'same-origin' })
                .then(response => response.json())
                .then(data => { if (data.success) { this.$emit(event, this.itemId); } })
                .catch(() => {})
                .finally(() => { this.busy = null; });
        },
        handleDelete() {
            if (this.pending !== 'del') { this.arm('del'); return; }
            this.run('del', this.base + '/delete/' + this.itemId, 'deleted');
        },
        handleDuplicate() {
            if (this.pending !== 'dup') { this.arm('dup'); return; }
            this.run('dup', this.base + '/duplicate/' + this.itemId, 'duplicated');
        },
    },
    beforeDestroy() {
        clearTimeout(this.timer);
    },
};
</script>
