import documentReady from '@assets/js/documentReady';
import axiosApi from '@assets/js/axios-api.js';

documentReady(async () => {
  const themeElement = document.querySelector('.js-theme');
  const themeLink = themeElement.dataset.theme;

  themeElement.addEventListener('click', async () => {
    if (themeElement.classList.contains('disabled')) {
      return;
    }

    themeElement.dataset.tooltip = 'Trocando...';
    themeElement.classList.add('disabled');

    try {
      const {
        data: { appearance, text },
      } = await axiosApi.post(themeLink);

      if (appearance) {
        document.body.classList.add('dark');
        window.wootricSettings.modal_theme = 'dark';
      } else {
        document.body.classList.remove('dark');
        window.wootricSettings.modal_theme = 'light';
      }

      window.wootric('run');

      themeElement.dataset.tooltip = text;
    } catch (error) {
      console.log('error', error);
    } finally {
      themeElement.classList.remove('disabled');
    }
  });

  const openFileManager = document.querySelector('.js-open-file-manager');

  openFileManager.addEventListener('click', () => {
    handleFileManager();
  });

  function handleFileManager() {
    window.dispatchEvent(
      new CustomEvent('vue-file-manager', {
        detail: {
          callbackFunction: file => {
          },
          options: {
            hideSelection: true,
            showFolderIcons: true,
          },
        },
      })
    );
  }
});
