// Silence may be golden, but sometimes words paint the canvas of understanding.
const LinksySearchAndReplaceBulkAction = {
	name: 'LinksySearchAndReplaceBulkAction',
	directives: {
		'linksy-tooltip': LinksyTooltip,
	},
	props: {
		actions: {
			type: Object,
			required: true,
		},
		selectedAction: String,
        isLoading: Boolean
	},
	components: {
		LinksyButton,
		LinksyDropdown,
	},
	methods: {
		selectAction(index) {
			this.$emit('selectAction', index)
		},
		applyAction(s, r) {
			this.$emit('onApplyAction', s, r)
		},
		handleCancel() {
			this.$emit('onCancel')
		},
        handleSubmit(s, r) {
			s()
			r()
		}
	},
	template: `
    <div class="action-dropdown">
        <linksy-dropdown
            is-manual
            is-async
            :initial-value="actions.find(e => e.value == selectedAction)?.label"
            :options="actions"
            class="bg-white text-dark border border-1 rounded-3"
        >
            <template #title>
                <span class="text-nowrap">Bulk action</span>
            </template>
            <template #item="{ item, index, selected }">
                <div class="d-flex w-100 gap-1 align-items-center" @click="selectAction(index)">
                    <div class="linksy-checkbox" :class="{'checked': selectedAction === item.value}" />
                    <label class="cursor-pointer">{{ item.label }}</label>
                    <span class="ms-auto text-wrap" v-linksy-tooltip="{ message: actions[index]?.message, flow: 'right' }"></span>
                </div>
            </template>
            <template #footer="props">
                <div class="actions-button d-flex gap-2">
                    <linksy-button class="flex-grow-1" :disabled="selectedAction === null || isLoading" @click="applyAction(props.onReset, props.onSubmit)">Apply</linksy-button>
                    <linksy-button variant="secondary" class=" flex-grow-1" @click="() => { handleSubmit(props.onReset, props.onSubmit); handleCancel() }">Cancel</linksy-button>
                </div>
            </template>
        </linksy-dropdown>
    </div>
    `,
}
