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

<div>
   
    <div class="mb-2" wire:ignore>
     
        <label class="block font-medium text-base sm:text-lg 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}}';
                        if(event.detail.id){
                                editor_id = event.detail.id;
                        }

                      
                        tinymce.get(editor_id).setContent(text);
                {{-- setTimeout(() => show = false, 3000); --}}
                });
                

               makeTinyMceEditor();
                function makeTinyMceEditor() {
                        
                        var editor_id = '{{$id}}';
                        console.log('dsdsadsa');
                        console.log(editor_id);
                     
                        if(tinymce.get(editor_id) != null){
                                
                                tinymce.get(editor_id).remove();
                        }
                       
                        tinymce.init({
                                path_absolute: '/',
                                selector: 'textarea.{{$id}}',
                                plugins: 'preview searchreplace autolink autosave save directionality visualblocks visualchars link codesample charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars textcolor',
                                imagetools_cors_hosts: ['picsum.photos'],
                                menubar: 'edit',
                                toolbar: 'undo redo | bold italic underline strikethrough | forecolor backcolor fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist  | link anchor ',
                                toolbar_sticky: true,
                                
                                extended_valid_elements : 'script[src|async|defer|type|charset]',
                                       
                                        setup: function (editor) {
                                          
                                                editor.on('init change', function () {
                                                
                                                          editor.save();
                                                  });
                                                editor.on('change', function (e) {
                                                   @this.set('{{$what_to_show}}', editor.getContent());
                                                });
                                         },
                                         });
                      }





               
                             ">
    </textarea>
</div>
@error($what_to_show) <small class="text-red-600">{{ $message }}</small> @enderror
</div>

@push('scripts')

@endpush