import Alpine from 'alpinejs';
import persist from '@alpinejs/persist';
import collapse from '@alpinejs/collapse';
import intersect from '@alpinejs/intersect';

// Alpine.js Plugins
Alpine.plugin(persist);
Alpine.plugin(collapse);
Alpine.plugin(intersect);

// Third Party Libraries
import $ from 'jquery';
import SimpleBar from 'simplebar';
import hljs from 'highlight.js/lib/core';
import sql from 'highlight.js/lib/languages/sql';
import xml from 'highlight.js/lib/languages/xml';
import dayjs from 'dayjs';
import Swiper from 'swiper/bundle';
import Sortable from 'sortablejs';
import ApexCharts from 'apexcharts';
import * as Gridjs from 'gridjs';
import "@caneara/iodine";
import * as FilePond from 'filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
//import Quill from 'quill/dist/quill.min';
import Quill from 'quill/dist/quill.js';
import 'quill/dist/quill.snow.css';

import flatpickr from 'flatpickr';
import Tom from 'tom-select/dist/js/tom-select.complete.min';
import "@fortawesome/fontawesome-free/css/all.css";
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
import 'prismjs/components/prism-diff.min.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

// Helper Functions
import * as helpers from './utils/helpers';
import * as pages from './pages';
import store from './store';
import breakpoints from './utils/breakpoints';
import usePopper from './components/usePopper';
import accordionItem from './components/accordionItem';
import tooltip from './directives/tooltip';
import inputMask from './directives/inputMask';
import notification from './magics/notification';
import clipboard from './magics/clipboard';

// Register highlight.js languages
hljs.registerLanguage('xml', xml);
hljs.registerLanguage('sql', sql);
hljs.configure({ ignoreUnescapedHTML: true });

// Register FilePond plugins
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.registerPlugin(FilePondPluginFileEncode);

window.hljs = hljs;
window.dayjs = dayjs;
window.SimpleBar = SimpleBar;
window.Swiper = Swiper;
window.Sortable = Sortable;
window.ApexCharts = ApexCharts;
window.Gridjs = Gridjs;
window.FilePond = FilePond;
window.flatpickr = flatpickr;
window.Quill = Quill;
window.Tom = Tom;
window.Alpine = Alpine;
window.helpers = helpers;
window.pages = pages;
window.$ = $;
window.ClassicEditor= ClassicEditor;

Alpine.directive('tooltip', tooltip);
Alpine.directive('input-mask', inputMask);
Alpine.magic('notification', () => notification);
Alpine.magic('clipboard', () => clipboard);
Alpine.store('breakpoints', breakpoints);
Alpine.store('global', store);

Alpine.data('usePopper', usePopper);
Alpine.data('accordionItem', accordionItem);

Alpine.start();


document.addEventListener('DOMContentLoaded', async (event) => {
    //Prism.highlightAll();
    hljs.highlightAll();
});

document.addEventListener('livewire:load', async function () {
    //Prism.highlightAll();
    hljs.highlightAll();
});

Livewire.hook('message.processed', (message, component) => {
    // Find all code blocks inside the component that was updated
    component.el.querySelectorAll('pre').forEach((block) => {
        hljs.highlightElement(block); // Apply syntax highlighting to the specific element
    });
});

window.addEventListener('diffResultUpdated', async function () {
    //Prism.highlightAll();
    hljs.highlightAll();
});