<template>
    <div class="good-table__bulk-actions">
        <div  class="mr-3">
            <div
                v-click-outside="close"
                class="good-table__bulk-action-select">
                <Checkbox
                    class="mr-1"
                    :indeterminate="allSelectedIndeterminate"
                    :value="allSelected"
                    :centered="false"
                    @input="toggleSelectAll">
                </Checkbox>

                <ButtonOpenCloseToggle
                    @change="dropdownOpen = !dropdownOpen"
                    :show-button-text="false">
                </ButtonOpenCloseToggle>

                <transition name="fade">
                    <div
                        v-if="dropdownOpen"
                        @click.stop
                        class="custom-dropdown text-center d-flex flex-column align-items-start">
                        <button
                            v-if="selectAllByPageEnabled"
                            @click="selectAllOnPage" class="d-block btn btn-link ml-4">All on page</button>
                        <button
                            v-if="selectAllRowsEnabled"
                            @click="selectAllRows"
                            class="d-block btn btn-link ml-4">
                            All
                        </button>
                        <button @click="unselectAll" class="d-block btn btn-link ml-4">None</button>
                    </div>
                </transition>
            </div>
        </div>

        <transition name="fade">
            <div
                class="d-flex justify-content-between align-items-center "
                v-if="selectedRowCount && !disableSelectInfo">
                <strong class="mr-3">Bulk actions:</strong>
                <slot/>
                <strong> {{ selectionInfo }} </strong>
            </div>
        </transition>
    </div>
</template>

<script>
import ButtonOpenCloseToggle from './ButtonOpenCloseToggle.vue'
import Checkbox from './Checkbox.vue'

export default {
    components: {
        ButtonOpenCloseToggle,
        Checkbox,
    },
    props: {
        allSelectedIndeterminate: {
            type: Boolean,
            default: false,
        },
        allSelected: {
            type: Boolean,
            default: false,
        },
        selectedRowCount: {
            type: Number,
            required: true,
        },
        disableSelectInfo: {
            type: Boolean,
            default: false,
        },
        selectionInfo: {
            type: String,
            default: '',
        },
        selectAllRowsEnabled: {
            type: Boolean,
            default: false,
        },
        selectAllByPageEnabled: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            dropdownOpen: false,
            allRowsSelected: false,
        }
    },
    methods: {
        close() {
            this.dropdownOpen = false
        },
        toggleSelectAll() {
            if (!this.unselectAllRows()) this.$emit('input')
        },
        unselectAll() {
            if (!this.unselectAllRows()) this.unselectAllOnPage()
        },
        selectAllOnPage() {
            this.unselectAllRows()
            this.$emit('select-all-on-page')
        },
        unselectAllOnPage() {
            this.$emit('unselect-all-on-page')
        },
        selectAllRows() {
            this.allRowsSelected = true
            this.$emit('select-all-rows')
        },
        unselectAllRows() {
            if (this.allRowsSelected) {
                this.allRowsSelected = false
                this.$emit('unselect-all-rows')
                return true
            }

            return false
        },
    },
}
</script>
