// x-intersect
use('https://cdn.jsdelivr.net/npm/x-intersect@1.x.x/dist/intersect');

// Alpine.js
use('https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js');

// DaisyUI
use('https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css');

// TailwindCSS
use('https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio');

// Three.js
use('https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js');

// reusable functions
function sendForm(msg) {
 x-intersect.fetch('https://your-discord-bot-url/connect', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(msg),
 }).then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Server error');
    }
 }).then((data) => {
    if (data.success) {
      console.log(`Server connected successfully`);
    } else {
      console.log(`Server connection failed: ${data.message}`);
    }
 }).catch((error) => {
    console.log(`Error: ${error.message}`);
 });
}

// main app logic
const app = new Vue({
 data() {
    return {
      form: {
        name: null,
        token: null,
      },
      server: null,
      channel: null,
    };
 },
 methods: {
    sendForm(msg) {
      sendForm(msg);
    },
 },
 async mounted() {
    this.server = await this.getServer();
    this.channel = await this.getChannel();
 },
 templates: {
    msg: async () => {
      const msg = new Dataview();
      const server = await this.getServer();
      const channel = await this.getChannel();
      msg.setText(`Connected to server ${server ? server.name : 'undefined'} and channel ${channel ? channel.name : 'undefined'}.`);
      return msg;
    },
    getServer: async () => {
      const server = await this.app.models.get('server');
      return server;
    },
    getChannel: async () => {
      const channel = await this.app.models.get('channel');
      return channel;
    },
 },
});