<template>
    <div class="row m-0 p-0 align-items-center">
        <div class="col-sm-12 col-md-6 p-0">
            <span class="material-icons-outlined box-move me-2" 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>
            <b-modal no-enforce-focus class_other="modal-xl" v-model="modalBox" :title="langs.label"
                v-on:hide="onCloseModal">
                <div class="mb-4">
                    <div class="form-group">
                        <editor api-key="no-api-key" rows="12" class="form-control" v-model="text" :init="vtinymce" />
                    </div>
                </div>
                <div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
                        langs.saveclose
                }}</button></div>
            </b-modal>
            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
                    class="material-icons-outlined">delete</i></a>
        </div>
        <div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
    </div>
</template>
<script>
import MagicoModal from './../MagicoModal.vue'
import tinymceConfig from '../tinymce/config.js'

import Editor from '@tinymce/tinymce-vue'
export default {
    components: {
        'b-modal': MagicoModal,

        'editor': Editor // <- To jest TINYMCE
    },
    props: {
        value: Object
    },
    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;
        if (this.value.open) this.modalBox = true;
    },
    data: function () {
        return {
            langs: {
                saveclose: "Zapisz",
                label: "Pole tekstowe",
                close: "Zamknij"
            },
            height: window.innerHeight - window.innerHeight / 4,
            modalBox: false,
            text: '',
            name: 'core_section_textarea',
            vtinymce: tinymceConfig,
        }
    },
    computed: {
        ctext: function () {
            return this.value.text?this.value.text.replace(/<(?:.|\n)*?>/gm, ''):'';
        }
    },
    methods: {
        removeItem: function () {
            this.$emit('itemRemoved', this.value);
        },
        onCloseModal: function () {
            this.modalBox = false;
            this.$emit('input', {
                name: this.name,
                text: this.text,
            })
        }
    },

}
</script>