@props(['what_to_show', 'label', 'id'])

<div>
   
    <div class="mb-2" wire:ignore>
     
        <label class="block font-medium text-sm text-gray-700" for="page-text-editor"> {{$label}}</label>
        <textarea class="{{$id}} form-input rounded-md shadow-sm mt-1 block w-full " id="{{$id}}"
        name="{{$what_to_show}}" rows="20"
        wire:model="{{$what_to_show}}"
        wire:key="{{$id}}"
        x-data
        x-ref="{{$id}}"
        x-init="
      
                document.addEventListener('refreshTextArea', event => {
                     
                        let text = event.detail.text
                        var editor_id = '{{$id}}';
                        tinymce.get(editor_id).setContent(text);
                {{-- setTimeout(() => show = false, 3000); --}}
                });
                

               makeTinyMceEditor();
                function makeTinyMceEditor() {

                       
                        var editor_id = '{{$id}}';
                     
                        if(tinymce.get(editor_id) != null){
                                
                                tinymce.get(editor_id).remove();
                        }
                       
                        const useDarkMode = window.matchMedia('(prefers-color-scheme: light)').matches;
                        const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches;
                
                        tinymce.init({
                            selector: 'textarea#{{$id}}',
                            plugins: 'preview importcss searchreplace autolink directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap  emoticons',
                            editimage_cors_hosts: ['picsum.photos'],
                            menubar: 'file edit view insert format tools table help',
                            toolbar: 'insertfile image media template link anchor codesample | undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview print |  ltr rtl',
                            toolbar_sticky: false,
                            toolbar_sticky_offset: isSmallScreen ? 102 : 108,
                            image_advtab: true,
                            height: 400,
                            image_caption: true,
                            quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
                            noneditable_class: 'mceNonEditable',
                            toolbar_mode: 'sliding',
                            contextmenu: 'link image table',
                            skin: useDarkMode ? 'oxide-dark' : 'oxide',
                            content_css: useDarkMode ? 'dark' : 'default',
                            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
                            promotion: false,
                            images_upload_url: '/upload',
                            file_picker_types: 'image',
                            relative_urls: false,
                            remove_script_host: false,
                            convert_urls: true,
                            file_picker_callback: function (cb, value, meta){
                                var input = document.createElement('input');
                                input.setAttribute('type', 'file');
                                input.setAttribute('accept', 'image/*');
                                input.onchange = function(){
                                    var file = this.files[0];
                                    var reader = new FileReader();
                                    reader.readAsDataURL(file);
                                    reader.onload = function(){
                                        var id = 'blobid'+(new Date()).getTime();
                                        var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                                        var base64 = reader.result.split(',')[1];
                                        var blobInfo = blobCache.create(id, file, base64);
                                        blobCache.add(blobInfo);
                                        cb(blobInfo.blobUri(), {title:file.name});
                                    };
                                };
                                input.click();
                            },
                            setup: function (editor) {
                                // editor.on('init change', function () {
                                //     editor.save();
                                // });
                                editor.on('change', function (e) {
                                    @this.set('{{$what_to_show}}', editor.getContent());
                                });
                            }
                        });
                      }





               
                             ">
    </textarea>
   </div>
</div>