<template>
    <div id="hlava">
        <div v-on:click="makeactive" v-if="!isactive">
            <p class="mx-6 mt-4 has-text-weight-bold has-text-centered">
                {{ displaytitle }}
            </p>
            <p>
                {{ displaytext }}
            </p>
        </div>
        <div v-click-outside="makeinactive" v-if="isactive">
            <p class="mx-6 mt-4 has-text-weight-bold has-text-centered">
                <b-input placeholder="Název hlavy" style="text-align:right;" v-model="title"></b-input>
            </p>
            <p>
                <b-input placeholder="Text hlavy" v-model="text" type="textarea"></b-input>
            </p>
            <p>
                <b-button type="is-danger" class="mt-3" v-on:click="$emit('deletehlava', index)" expanded>Smazat hlavu</b-button>
            </p>
        </div>
    </div>
</template>

<style scoped>

</style>

<script>
export default {
    name: "Hlava",
    props: ['title', 'text', 'index'],
    data: () => {
        return {
            isactive: false
        }
    },
    methods: {
        makeactive: function () {
            this.isactive = true;
        },
        makeinactive: function () {
            this.$emit('update:text', this.text)
            this.$emit('update:title', this.title)
            this.isactive = false;
        }
    },
    computed: {
        displaytitle: function () {
            if (!this.title) {
                return "Název hlavy"
            } else {
                return this.title
            }
        },
        displaytext: function () {
            if (!this.text) {
                return "Text hlavy"
            } else {
                return this.text
            }
        }
    }
}
</script>