import { createApp } from 'vue';

import '@fontsource/inter';

import { tooltip, fallbackImage } from '@cloudron/pankow';

const fitText = {
  mounted(el) {
    let fontSize = 14;

    function attempt() {
      setTimeout(() => {
        const curWidth = el.getBoundingClientRect().width;
        const parentWidth = el.parentElement.getBoundingClientRect().width;

        if (!curWidth && !parentWidth) return attempt();

        if (curWidth < parentWidth-12) return;

        fontSize -= 0.2;
        el.style.fontSize = fontSize + 'px';

        attempt();
      }, 1);
    }

    attempt();
  }
};

// Override the link rendering method for markdown renderings to open in new tab
import { marked } from 'marked';

const renderer = new marked.Renderer();
renderer.link = function(item) {
  const titleAttr = item.title ? ` title="${item.title}"` : '';
  return `<a href="${item.href}" target="_blank" ${titleAttr}>${item.text}</a>`;
};

marked.setOptions({ renderer });

import i18n from './i18n.js';
import Index from './Index.vue';

import './style.css';

(async function init() {
  const app = createApp(Index);

  app.use(await i18n());

  app.directive('tooltip', tooltip);
  app.directive('fallback-image', fallbackImage);
  app.directive('fit-text', fitText);

  app.mount('#app');
})();