<template>
    <div>
        <div @click="adding = true"
             class="box"
             style="font-size: 6rem;">
            +
        </div>

        <Dialog header="Select searcher"
                position="right"
                :visible="adding"
                :closable="false"
                :style="{width: '50vw'}"
                :modal="true">
            <searchers @selected="onSearcherSelected"></searchers>

            <template #footer>
                <Button label="Close"
                        icon="pi pi-times"
                        @click="adding = false"
                        class="p-button-text"/>

                <Button label="Confirm"
                        icon="pi pi-check"
                        @click="onConfirm"
                        :disabled="Object.keys(selectedSearcher).length === 0"
                        autofocus />
            </template>
        </Dialog>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import Dialog from 'primevue/dialog';
import Searchers from './Index.vue';

@Component({
    name: 'AddBox',

    components: {
        Dialog,
        Searchers,
    },
})
export default class Create extends Vue {
    private adding: boolean = false;
    private selectedSearcher: Object = {};

    onSearcherSelected(searcher: Object) {
        this.selectedSearcher = searcher;
    }

    onConfirm() {
        this.$emit('added', this.selectedSearcher);

        this.selectedSearcher = {};

        this.adding = false;
    }
};
</script>
