import "./css/backend.css"
import Alpine from 'alpinejs';
import persist from '@alpinejs/persist'
import $ from 'jquery'
import 'summernote/dist/summernote-lite.js'
import 'summernote/dist/summernote-lite.min.css'
import '../backend/dashboard/js/summernote/mediabundle.plugin.js'
import { initTabs } from 'david-ai';
import { registerVueControllerComponents } from '@symfony/ux-vue';
import { startStimulusApp } from '@symfony/stimulus-bundle';
import { order } from './js/order.js';
import { multiselect } from './js/multiselect.js';

window.$ = window.jQuery = $;
// Initialize tabs functionality
initTabs();
registerVueControllerComponents()
const app = startStimulusApp();
Alpine.plugin(persist)

// Initialize PSC global object
window.psc = window.psc || {};
window.psc.order = new order();
window.psc.multiselect = new multiselect();

Alpine.store('theme', {
    theme: Alpine.$persist("light").as('theme'),

    light() {
        this.theme = "light";
    },
    dark() {
        this.theme = "dark"
    }
})
Alpine.store('sideBar', {
    isOpen: Alpine.$persist(true).as('sidebar_on'),

    toggle() {
        this.isOpen = ! this.isOpen
    },
    close() {
        this.isOpen = false
    },
    open() {
        this.isOpen = true
    }
})
Alpine.start();

// Initialize PSC modules
window.psc.order.init();
window.psc.multiselect.init();

const initSummernote = () => {
    if (!$.fn?.summernote) {
        return;
    }

    $(document).on('blur', '.note-codable', function () {
        const codeviewHtml = $(this).val();
        const $summernoteTextarea = $(this).closest('.note-editor').siblings('textarea');
        $summernoteTextarea.val(codeviewHtml);
    });

    const toolbar = [
        ['style', ['style']],
        ['font', ['bold', 'italic', 'underline', 'clear']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']],
        ['table', ['table']],
        ['insert', ['link', 'hr', 'image']],
        ['view', ['fullscreen', 'codeview']],
        ['help', ['help']],
    ];

    if (typeof window.mediaBundleBrowser === 'function') {
        toolbar.push(['media', ['media']]);
    }

    $('.summernote').summernote({
        height: 400,
        toolbar,
    });
};

document.addEventListener('DOMContentLoaded', initSummernote);