// https://elixirforum.com/t/how-to-connect-quill-with-phoenix/46004
import Quill from 'quill';
import socket from '../user_socket';
import RhymeModule from '../lib/rhyme';

Quill.register('modules/rhymeModule', RhymeModule);

export let TextEditor = {
  mounted() {
    const padId = this.el.dataset.padId;
    this.clientId;

    this.quill = new Quill(this.el, {
      theme: 'snow',
      modules: {
        rhymeModule: true
      }
    });

    let channel = socket.channel(`pad:${padId}`, {});

    channel.join()
      .receive("ok", ({uuid, contents}) => { 
        this.clientId = uuid;
        this.quill.setContents(contents);
      })
      // TODO: Probably need to show an alert that they couldn't join
      .receive("error", resp => { console.log("Unable to join", resp) });

    channel.on("update", ({change, client_id}) => {
      if(client_id === this.clientId) return;
      let range = this.quill.getSelection();
      this.quill.updateContents(change);
      range && this.quill.setSelection(range.index, range.length);
    })

    channel.on("saved", () => {
      console.log('Saved');
      // TODO: Show a saved message
    })

    this.quill.on('text-change', (delta, oldDelta, source) => {
      if (delta == oldDelta) return;
      if (source == 'api') {
        console.log("An API call triggered this change.");
      } else if (source == 'user') {
        channel.push('update', {change: delta, client_id: this.clientId});
      }
    });
  },
  updated(){
    console.log('U');
  }
}