@props(['quoteEvent' => false])
{{-- @props(['id' => 'textarea-body', 'disabled' => false, 'property' => '', 'property_of' => 'page', 'model' => '']) --}}

@php
  $exts = str($settings['allowed_files'] ?? 'jpg,jpeg,png,pdf')
      ->explode(',')
      ->all();
  $exts = \Illuminate\Support\Arr::map($exts, fn($e) => '.' . $e);
  $exts = \Illuminate\Support\Arr::join($exts, ',');
@endphp
<div x-data="{ value: @entangle($attributes->wire('model')).live }" x-init="tinymce.init({
    target: $refs.tinymce,
    themes: 'modern',
    language: '{{ app()->getLocale() }}',
    @if(app()->getLocale() != 'en')
    language_url: '{{ asset('/tiny/langs/' . app()->getLocale() . '.js') }}',
    @endif
    height: 200,
    menubar: false,
    statusbar: false,
    {{-- element_format: 'html',
    entity_encoding: 'raw',
    forced_root_block: 'div', --}}
    {{-- skin: localStorage.getItem('mode') == 'dark' ? 'oxide-dark' : 'oxide',
    content_css: localStorage.getItem('mode') == 'dark' ? 'dark' : 'default', --}}
    skin: document.documentElement.classList.contains('dark') ? 'oxide-dark' : 'oxide',
    content_css: document.documentElement.classList.contains('dark') ? 'dark' : 'default',
    content_style: `
      body {
        font-size: 0.875rem;
        line-height: 1.25rem;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      }
    `,
    plugins: [
        'advlist ',
        'autolink ',
        'lists ',
        'link ',
        'image ',
        'emoticons ',
        'fullscreen ',
        'insertdatetime ',
        'media ',
        'table ',
        'code',
        'codesample',
        'autoresize'
    ],
    relative_urls: false,
    image_dimensions: false,
    remove_script_host: false,
    file_picker_types: 'file image media',
    images_file_types: 'svg,jpeg,jpg,jpe,jfi,jif,jfif,png,gif,bmp,webp',
    @if(1 == ($settings['allowed_upload'] ?? 0))
    file_picker_callback: async function(callback, value, meta) {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        {{-- input.setAttribute('accept', 'image/*'); --}}
        input.setAttribute('accept', '{{ $exts }}');

        input.onchange = function() {
            var file = this.files[0];
            file.name = input.files.item(0).name;
            var reader = new FileReader();
            reader.onload = async 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);

                {{-- if (meta.filetype == 'file' || meta.filetype == 'media') { --}}
                const data = new FormData();
                data.append('file', blobInfo.blob(), file.name);

                let res = await fetch('{{ route('upload') }}', {
                    method: 'post',
                    body: data,
                    credentials: 'include',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-Token': '{{ csrf_token() }}',
                    },
                });

                let result = await res.json();
                if (res.ok) {
                    callback(result.filename, { text: file.name });
                } else {
                    const eventNotification = new CustomEvent('wireui:notification', {
                        bubbles: true,
                        detail: {
                            'options': {
                                'icon': 'error',
                                'title': '{{ __('Failed!') }}',
                                'description': result.message
                            }
                        }
                    });
                    document.dispatchEvent(eventNotification);
                }
                {{-- } else {
                    callback(blobInfo.blobUri(), { title: file.name, alt: file.name });
                } --}}
            };
            reader.readAsDataURL(file);
        };

        input.click();
    },
    {{-- automatic_uploads: true, --}}
    @endif
    images_upload_handler: image_upload_handler,
    toolbar: 'code | bold italic underline | alignment bullist numlist | {{ 1 == ($settings['allowed_upload'] ?? 0) ? ' insertfile image media ' : '' }} link | codesample emoticons',
    toolbar_groups: {
        alignment: {
            icon: 'align-left',
            tooltip: 'text align',
            items: 'alignleft aligncenter alignright alignjustify'
        }
    },
    quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
    setup: function(editor) {
        editor.on('blur', function(e) {
            value = editor.getContent()
        })

        editor.on('init', function(e) {
            if (value != null) {
                editor.setContent(value)
            }
        })

        function putCursorToEnd() {
            editor.selection.select(editor.getBody(), true);
            editor.selection.collapse(false);
        }

        $watch('value', function(newValue) {
            if (newValue !== editor.getContent()) {
                editor.resetContent(newValue || '');
                putCursorToEnd();
            }
        });

        @if($quoteEvent)
        window.addEventListener('quoteReply', (event) => {
            let el = document.getElementById('reply-body-field');
            el.blur();
            let value = el.value;
            el.value = '&lt;blockquote&gt;' + event.detail + '&lt;/blockquote&gt;\n\n&lt;p&gt;&lt;/p&gt;' + value;
            editor.setContent(el.value);
            el.dispatchEvent(new Event('change'))
            let enterE = {
                'key': 'Enter',
            };
            el.dispatchEvent(new KeyboardEvent('keypress', enterE));
            el.dispatchEvent(new KeyboardEvent('keydown', enterE));
            el.dispatchEvent(new KeyboardEvent('keyup', enterE));
            setTimeout(() => {
                el.style.height = el.scrollHeight;
                el.scrollTop = el.scrollHeight + 100;
            }, 100);
            el.scrollIntoView();
            el.focus();
            document.getElementById('reply-form-con').scrollIntoView();
            editor.focus();
            editor.selection.select(editor.getBody(), true);
            editor.selection.collapse(false);
        });
        @endif
    }
})" wire:ignore class="prose dark:prose-invert max-w-none mt-1">
  <div>
    <input x-ref="tinymce" type="textarea" {{ $attributes->whereDoesntStartWith('wire:model.live') }} />
  </div>
</div>

@once
  @push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/skins/ui/oxide-dark/skin.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/skins/ui/oxide/skin.min.css" />
  @endpush
  @push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/tinymce.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/icons/default/icons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/models/dom/model.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/advlist/plugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/autolink/plugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/autoresize/plugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/charmap/plugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/code/plugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/codesample/plugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/emoticons/js/emojiimages.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/emoticons/js/emojis.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/emoticons/plugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/fullscreen/plugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/image/plugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/advlist/plugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/pagebreak/plugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/table/plugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.2.1/plugins/media/plugin.min.js"></script>
    <script>
      const image_upload_handler = (blobInfo, progress) => new Promise(async (resolve, reject) => {
        const data = new FormData();
        data.append('file', blobInfo.blob(), blobInfo.filename());
        let res = await fetch('{{ route('upload') }}', {
          method: 'post',
          body: data,
          credentials: "include",
          headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-Token': '{{ csrf_token() }}',
          },
        });

        let result = await res.json();
        if (res.ok) {
          resolve(result.filename);
        }

        reject(result.message);
      });
    </script>
  @endpush
@endonce