<template>
    <div class="row m-0 p-0 align-items-center">
        <div class="col-sm-12 col-md-6 p-0 mb-0">
            <span class="material-icons-outlined me-1 box-move" style="cursor:move;">open_with</span><span
                class="font-weight-bold text-primary">{{ langs.label }}</span>
        </div>

        <div class="col-sm-12 col-md-6 p-0 text-end">
            <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
                    class="material-icons-outlined">create</i></a>
            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
                    class="material-icons-outlined">delete</i></a>
        </div>
        <div class="ms-2">
            <strong class="font-weight-bold">{{ langs.type }}:</strong> {{ h_type }},
            <strong class="font-weight-bold">{{ langs.content }}:</strong> {{ (text) ? text : ' ' }}
        </div>
        <b-modal v-model="modalBox" :title="langs.label" @close="onCloseModal">

            <div class="form-group">
                <label class="w-100 col-form-label">{{ langs.content }}</label>
                <input class="form-control" type="text" v-model="text" />
            </div>
            <div class="form-grou mb-2">
                <label class="w-100 col-form-label">{{ langs.type }}</label>
                <select class="form-select" v-model="h_type">
                    <option value="">{{ langs.typeplaintext }}</option>
                    <option value="h1">{{ langs.typeheader }} 1</option>
                    <option value="h2">{{ langs.typeheader }} 2</option>
                    <option value="h3">{{ langs.typeheader }} 3</option>
                    <option value="h4">{{ langs.typeheader }} 4</option>
                    <option value="h5">{{ langs.typeheader }} 5</option>
                </select>
            </div>
            <div class="form-group">
                <label class="w-100 col-form-label">Wyrównanie</label>
    <div class="">
        <button v-tooltip title="Wyrównanie do lewej" @click="align='left'" class="btn btn-icon-sm " :class="align=='left'?'btn-primary':'btn-outline-primary'">
            <span class="material-icons-outlined">format_align_left</span>
        </button>
        <button v-tooltip title="Wyrównanie do środka" @click="align='center'" class="btn btn-icon-sm " :class="align=='center'?'btn-primary':'btn-outline-primary'">
            <span class="material-icons-outlined">format_align_center</span>
        </button>
        <button v-tooltip title="Wyrównanie do prawej" @click="align='right'" class="btn btn-icon-sm " :class="align=='right'?'btn-primary':'btn-outline-primary'">
            <span class="material-icons-outlined">format_align_right</span>
        </button>
        <button v-tooltip title="Justowanie" @click="align='justify'" class="btn btn-icon-sm " :class="align=='justify'?'btn-primary':'btn-outline-primary'">
            <span class="material-icons-outlined">format_align_justify</span>
        </button>
    </div>
            </div>

            <div class="text-center"><button class="btn btn-outline-secondary me-1" @click.prevent="onCloseModal">{{
                    langs.saveclose
            }}</button></div>
        </b-modal>
    </div>
</template>
<script>
import MagicoModal from './../MagicoModal.vue'

export default {
    components: {
        'b-modal': MagicoModal,
    },
    props: {
        value: Object
    },
    data: function () {
        return {
            langs: {
                label: "Tekst",
                close: "Zaknij",
                content: "Treść",
                type: "Typ",
                typeplaintext: "Tekst",
                typeheader: "Nagłowek",
                saveclose: "Zapisz"
            },
            modalBox: false,
            text: '',
            name: '',
            h_type: '',
            align: 'left',
        }
    },
    mounted: function () {
        this.name = (this.value && this.value.name) ? this.value.name : this.name;
        this.text = (this.value && this.value.text) ? this.value.text : this.text;
        this.h_type = (this.value && this.value.h_type) ? this.value.h_type : this.h_type;
        this.align = (this.value && this.value.align) ? this.value.align : this.align;
        if (this.value.open) this.modalBox = true;
        console.log('mounted text');
        this.$emit('input', this.value);

    },
    
    methods: {
        removeItem: function () {
            this.$emit('itemRemoved', this.value);
        },
        onCloseModal: function () {
            this.modalBox = false;
            this.$emit('input', {
                name: this.name,
                text: this.text,
                h_type: this.h_type,
                align: this.align,
            })
        }
    },
    destroy() {
        this.modalBox = false;
    }

}
</script>