/* Project specific Javascript goes here. */
function onPositionSelectChange(elem) {
  elem.querySelectorAll("option").forEach((option) => {
    if (option.innerText.trim() == elem.value) {
      option.setAttribute("selected", "selected");
    } else {
      option.removeAttribute("selected");
    }
  });
  colorPositions();
  refreshLineup();
}

function togglePopup(el) {
  el.querySelector(".Popup-container").classList.toggle("is-open");
}

function colorPositions() {
  for (bcLineup of document.querySelectorAll("[id^=event-lineup]")) {
    selected_lineup_positions = Array.from(
      bcLineup.querySelectorAll(".position-select-box option:checked")
    ).map((el) => el.value);

    for (position_status of bcLineup.querySelectorAll(".position-status")) {
      for (class_name of ["u-colorNegative", "u-colorHighlight", "u-colorPositive"]) {
        position_status.classList.remove(class_name);
      }

      occurrences = selected_lineup_positions.filter((s) => s == position_status.innerText).length;

      if (occurrences == 1) {
        position_status.classList.add("u-colorPositive");
      } else if (occurrences > 1) {
        position_status.classList.add("u-colorHighlight");
      } else {
        position_status.classList.add("u-colorNegative");
      }
    }
  }
}

function initFlagsCheckboxes(){
  Array.from(document.querySelectorAll("[id^=event-lineup]")).forEach((bcLineup) => {
    Array.from(
      bcLineup.querySelectorAll(
        ".starting .lineup-slot, \
        .position-only .lineup-slot, \
        .bench .lineup-slot"
      )
    ).forEach((slot, i) => {
      const flags = new Set(slot.querySelector("input[name*=flags]")?.value?.split(',')?.map(s=>s.trim())) || new Set()
      if (flags.has('DHd')) {
        console.log('dhd')
        slot.querySelector('[name=flag-dhd]').checked = true;
      } 

      if (flags.has('DRd') ) {
        slot.querySelector('[name=flag-drd]').checked = true;
      }
    })}
    )
}

function refreshLineup() {
  Array.from(document.querySelectorAll("[id^=event-lineup]")).forEach((bcLineup) => {
    Array.from(
      bcLineup.querySelectorAll(
        ".starting .lineup-slot, \
        .position-only .lineup-slot, \
        .bench .lineup-slot"
      )
    ).forEach((slot, i) => {
      slot.querySelector("input[name*=sequence]").value = i;
      selected_position = slot.querySelector(".position-select-box option:checked");
      const flags = new Set(slot.querySelector("input[name*=flags]")?.value?.split(',')?.map(s=>s.trim())) || new Set()

      if (slot.querySelector('[name=flag-dhd]').checked) {
        flags.add('DHd')
      } else {
        flags.delete('DHd')
      }

      if (slot.querySelector('[name=flag-drd]').checked) {
        flags.add('DRd') 
      } else {
        flags.delete('DRd')
      }

      if (selected_position && selected_position.text != "--") {
        slot.querySelector("input[name*=label]").value = selected_position.text;
      } else {
        slot.querySelector("input[name*=label]").value = null;
      }
      if (slot.closest('.position-only')){
        flags.add('PO');flags.delete('')
      }
      else {
        flags.delete('PO');flags.delete('')
      }
      if (slot.closest('.bench')){
        slot.querySelector("input[name*=sequence]").value = '';
        slot.querySelector("input[name*=label]").value = '';
      }
      slot.querySelector("input[name*=flags]").value = Array.from(flags).join(",");
    });
  });
}

function refreshFlags(){

}

function copyEmailTable(itemEl, subject, recipients) {
  // Create container for the HTML
  // [1]
  let bcLineup = itemEl.closest(".benchcoach-lineup");
  var container = document.createElement("div");
  var tbl = document.createElement("table");

  let thead = tbl.createTHead();
  let thead_row = thead.insertRow();
  let thead_row_cell = thead_row.insertCell();
  thead_row_cell.appendChild(document.createElement("h3").appendChild(document.createTextNode("STARTING LINEUP")));
  thead_row_cell.colSpan = 3;
  thead_row_cell.classList.add("title-cell");
  var tbody = tbl.createTBody();
  for (row of bcLineup.querySelector(".table-benchcoach-startinglineup").rows) {
    let tr = tbody.insertRow();
    cell = tr.insertCell();
    cell.classList.add("sequence-cell");
    cell.appendChild(document.createTextNode(parseInt(row.dataset.order) + 1));
    cell = tr.insertCell();
    cell.appendChild(document.createTextNode(row.dataset.playerName));
    cell.classList.add("name-cell");
    tr.insertCell().appendChild(document.createTextNode(row.dataset.position));
  }

  if (bcLineup.querySelector(".table-benchcoach-startingpositionalonly").rows.length > 0) {
    var tr = tbody.insertRow();
    cell = tr.insertCell();
    cell.colSpan = 3;
    cell.appendChild(document.createTextNode("STARTING (POS. ONLY)"));
    cell.classList.add("title-cell");

    for (row of bcLineup.querySelector(".table-benchcoach-startingpositionalonly").rows) {
      var tr = tbody.insertRow();
      cell = tr.insertCell();
      cell.classList.add("sequence-cell");
      cell.appendChild(document.createTextNode(""));
      cell = tr.insertCell();
      cell.appendChild(document.createTextNode(row.dataset.playerName));
      cell.classList.add("name-cell");
      tr.insertCell().appendChild(document.createTextNode(row.dataset.position));
    }
  }

  if (bcLineup.querySelector(".table-benchcoach-bench").rows.length > 0) {
    var tr = tbody.insertRow();
    cell = tr.insertCell();
    cell.colSpan = 3;
    cell.appendChild(document.createTextNode("SUBS"));
    cell.classList.add("title-cell");

    for (row of bcLineup.querySelector(".table-benchcoach-bench").rows) {
      var tr = tbody.insertRow();
      cell = tr.insertCell();
      cell.classList.add("sequence-cell");
      availability_status = {
        None: "UNK",
        0: "NO",
        2: "MAY",
        1: "YES",
      }[row.dataset.availabilityStatuscode];
      cell.appendChild(document.createTextNode(availability_status));
      cell = tr.insertCell();
      cell.appendChild(document.createTextNode(row.dataset.playerName));
      cell.classList.add("name-cell");
      tr.insertCell().appendChild(document.createTextNode(""));
    }
  }

  if (bcLineup.querySelector(".table-benchcoach-out").rows.length > 0) {
    var tr = tbody.insertRow();
    cell = tr.insertCell();
    cell.colSpan = 3;
    cell.appendChild(document.createTextNode("OUT"));
    cell.classList.add("title-cell");

    for (row of bcLineup.querySelector(".table-benchcoach-out").rows) {
      var tr = tbody.insertRow();
      cell = tr.insertCell();
      cell.classList.add("sequence-cell");
      availability_status = {
        None: "UNK",
        0: "NO",
        1: "MAY",
        2: "YES",
      }[row.dataset.availabilityStatuscode];
      cell.appendChild(document.createTextNode(availability_status));
      tr.insertCell().appendChild(document.createTextNode(row.dataset.playerName));
      tr.insertCell().appendChild(document.createTextNode(""));
    }
  }

  container.appendChild(tbl);
  for (cell of container.getElementsByClassName("title-cell")) {
    cell.setAttribute("style", "font-weight:bold;background-color:#323669;color:#fff;padding:2px 5px;");
  }

  for (cell of container.getElementsByClassName("sequence-cell")) {
    cell.setAttribute("style", "font-weight:bold;padding:2px 5px;");
  }

  for (cell of container.getElementsByClassName("name-cell")) {
    cell.setAttribute("style", "width:200px;");
  }

  // Detect all style sheets of the page
  var activeSheets = Array.prototype.slice.call(document.styleSheets).filter(function (sheet) {
    return !sheet.disabled;
  });

  // Mount the container to the DOM to make `contentWindow` available
  // [3]
  document.body.appendChild(container);

  // Copy to clipboard
  // [4]
  window.getSelection().removeAllRanges();

  var range = document.createRange();
  range.selectNode(container);
  window.getSelection().addRange(range);

  // [5.1]
  document.execCommand("copy");

  // [5.2]
  for (var i = 0; i < activeSheets.length; i++) activeSheets[i].disabled = true;

  // [5.3]
  // document.execCommand('copy')

  // [5.4]
  for (var i = 0; i < activeSheets.length; i++) activeSheets[i].disabled = false;

  // Remove the container
  // [6]
  document.body.removeChild(container);
  subject_encoded = encodeURIComponent(subject);
  window.open("readdle-spark://compose?recipient=manager@chihounds.com&subject=" + subject + "&bcc=" + recipients);
}

function emailModal(el, url) {
  form = el.closest("form");
  console.log(form)
  data = new FormData(form);

  fetch(url, {
    method: "POST",
    body: data,
    headers: {
      'CSRF-Token': data.get('_csrf')
    }
  })
    .then((response) => {
      if (response.ok) {
        return response.text();
      } else {
        return Promise.reject(response.text());
      }
    })
    .then((html) => {
      const parser = new DOMParser()
      const email_modal = parser.parseFromString(html, 'text/html')
      const email_modal_node = email_modal.firstElementChild.querySelector('#modal')
      email_modal_node.setAttribute('id', `lineup-email-data-${data.get('event_lineup_id')}`)
      const body = document.querySelector('body')
      email_modal_node.classList.add('is-open')
      body.appendChild(email_modal_node)
      tinymce.init({
        selector:`#lineup-email-data-${data.get('event_lineup_id')} #email-editor`, 
        content_css:"/css/application.css", 
        plugins: 'image',
        menubar: false,
        toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image',
        paste_data_images: true,
        statusbar:false})
      // tinymce.activeEditor.setContent("Team,")
      // lineup_table_div.innerHTML = lineup_table
      // email_modal.classList.add("is-open");
  // email_modal.querySelector(".Modal-body").innerHTML = html;
  });
}

async function onSubmit(form, event) {
  event.preventDefault();
  console.log(event)
  teamsnap_icon = form.querySelector("#teamsnap-icon");
  waiting_icon = form.querySelector("#waiting-icon");
  success_icon = form.querySelector("#success-icon");
  failure_icon = form.querySelector("#failure-icon");
  data = new FormData(form);
  console.log(form)
  url = form.attributes.action.textContent;
  teamsnap_icon.classList.add("u-hidden")
  waiting_icon.classList.remove("u-hidden");
  await fetch(url, {
    method: "POST",
    body: data,
    headers: {
      'CSRF-Token': data.get('_csrf')
    }
  })
    .then((response) => {
      waiting_icon.classList.add("u-hidden");
      if (response.ok) {
        return response.text();
      } else {
        return Promise.reject(response.text());
      }
    })
    .then((text) => {
      event.submitter.blur()
      waiting_icon.classList.add("u-hidden");
      success_icon.classList.remove("u-hidden");
      console.log(text);
      // success_icon.querySelector("span.message").innerHTML = text;
    })
    .catch((error) => {
      event.submitter.blur()
      waiting_icon.classList.add("u-hidden");
      failure_icon.classList.remove("u-hidden");
      console.log(error);
      // success_icon.querySelector("span.message").innerHTML = error;
    })
    .finally(()=>{location.reload()});//refresh page
  setTimeout(() => {
      [waiting_icon, success_icon, failure_icon].forEach(e=>e.classList.add('u-hidden'))
      teamsnap_icon.classList.remove('u-hidden')
    }, 3000)
}

function copyEmailTable(itemEl, subject, recipients) {
  // Create container for the HTML
  // [1]
  let bcLineup = itemEl.closest(".event-lineup");
  var container = document.createElement("div");
  var tbl = document.createElement("table");

  let thead = tbl.createTHead();
  let thead_row = thead.insertRow();
  let thead_row_cell = thead_row.insertCell();
  thead_row_cell.appendChild(document.createElement("h3").appendChild(document.createTextNode("STARTING LINEUP")));
  thead_row_cell.colSpan = 3;
  thead_row_cell.classList.add("title-cell");
  var tbody = tbl.createTBody();

  lineup_slots_starting = bcLineup.querySelectorAll(".starting .slot-set .lineup-slot");

  for (node of lineup_slots_starting) {
    console.log("node", node);
    let tr = tbody.insertRow();
    cell = tr.insertCell();
    cell.classList.add("sequence-cell");
    sequence = node.querySelector("input[name*='sequence']").value;
    console.log(sequence);
    cell.appendChild(document.createTextNode(parseInt(sequence) + 1));
    name = node.querySelector("div:has(.lastname)");
    cell = tr.insertCell();
    cell.appendChild(document.createTextNode(name.textContent));
    cell.classList.add("name-cell");
    position_label = node.querySelector("input[name*='label']").value;
    tr.insertCell().appendChild(document.createTextNode(position_label));
  }

  lineup_slots_position_only = bcLineup.querySelector(".position-only .slot-set .lineup-slot");
  console.log("lineup slots position", lineup_slots_position_only);
  if (lineup_slots_position_only.length > 0) {
    var tr = tbody.insertRow();
    cell = tr.insertCell();
    cell.colSpan = 3;
    cell.appendChild(document.createTextNode("STARTING (POS. ONLY)"));
    cell.classList.add("title-cell");

    for (node of lineup_slots_position_only) {
      var tr = tbody.insertRow();
      cell = tr.insertCell();
      cell.classList.add("sequence-cell");
      cell.appendChild(document.createTextNode(""));
      cell = tr.insertCell();
      name = node.querySelector("div:has(.lastname)");
      cell.appendChild(document.createTextNode(name.textCotent));
      cell.classList.add("name-cell");
      position_label = node.querySelector("input[name*='label']").value;
      tr.insertCell().appendChild(document.createTextNode(position_label));
    }
  }

  lineup_slots_bench = bcLineup.querySelector(".bench .slot-set .lineup-slot");
  if (lineup_slots_bench > 0) {
    var tr = tbody.insertRow();
    cell = tr.insertCell();
    cell.colSpan = 3;
    cell.appendChild(document.createTextNode("SUBS"));
    cell.classList.add("title-cell");

    for (node of lineup_slots_bench) {
      var tr = tbody.insertRow();
      cell = tr.insertCell();
      cell.classList.add("sequence-cell");

      div_avail_code = node.querySelector("div[class*='availability-status-code']");
      if (div_with_avail_code.classList.includes("availability-status-code-1")) {
        cell.appendChild(document.createTextNode("YES"));
      } else if (div_with_avail_code.classList.includes("availability-status-code-2")) {
        cell.appendChild(document.createTextNode("MAY"));
      } else if (div_with_avail_code.classList.includes("availability-status-code-0")) {
        cell.appendChild(document.createTextNode("NO"));
      } else {
        cell.appendChild(document.createTextNode("UNK"));
      }
      cell = tr.insertCell();
      name = node.querySelector("div:has(.lastname)");
      cell.appendChild(document.createTextNode(name.textCotent));
      cell.classList.add("name-cell");
      tr.insertCell().appendChild(document.createTextNode(""));
    }
  }

  lineup_slots_out = bcLineup.querySelector(".out .slot-set .lineup-slot");
  if (lineup_slots_out > 0) {
    var tr = tbody.insertRow();
    cell = tr.insertCell();
    cell.colSpan = 3;
    cell.appendChild(document.createTextNode("OUT"));
    cell.classList.add("title-cell");

    for (node of lineup_slots_out) {
      var tr = tbody.insertRow();
      cell = tr.insertCell();
      cell.classList.add("sequence-cell");
      div_avail_code = node.querySelector("div[class*='availability-status-code']");
      if (div_with_avail_code.classList.includes("availability-status-code-1")) {
        cell.appendChild(document.createTextNode("YES"));
      } else if (div_with_avail_code.classList.includes("availability-status-code-2")) {
        cell.appendChild(document.createTextNode("MAY"));
      } else if (div_with_avail_code.classList.includes("availability-status-code-0")) {
        cell.appendChild(document.createTextNode("NO"));
      } else {
        cell.appendChild(document.createTextNode("UNK"));
      }
      cell = tr.insertCell();
      name = node.querySelector("div:has(.lastname)");
      cell.appendChild(document.createTextNode(name.textCotent));
      cell.classList.add("name-cell");
      tr.insertCell().appendChild(document.createTextNode(""));
    }
  }

  container.appendChild(tbl);
  for (cell of container.getElementsByClassName("title-cell")) {
    cell.setAttribute("style", "font-weight:bold;background-color:#323669;color:#fff;padding:2px 5px;");
  }

  for (cell of container.getElementsByClassName("sequence-cell")) {
    cell.setAttribute("style", "font-weight:bold;padding:2px 5px;");
  }

  for (cell of container.getElementsByClassName("name-cell")) {
    cell.setAttribute("style", "width:200px;");
  }

  // Detect all style sheets of the page
  var activeSheets = Array.prototype.slice.call(document.styleSheets).filter(function (sheet) {
    return !sheet.disabled;
  });

  // Mount the container to the DOM to make `contentWindow` available
  // [3]
  document.body.appendChild(container);

  // Copy to clipboard
  // [4]
  window.getSelection().removeAllRanges();

  var range = document.createRange();
  range.selectNode(container);
  window.getSelection().addRange(range);

  // [5.1]
  document.execCommand("copy");

  // [5.2]
  for (var i = 0; i < activeSheets.length; i++) activeSheets[i].disabled = true;

  // [5.3]
  // document.execCommand('copy')

  // [5.4]
  for (var i = 0; i < activeSheets.length; i++) activeSheets[i].disabled = false;

  // Remove the container
  // [6]
  document.body.removeChild(container);
  subject_encoded = encodeURIComponent(subject);
  window.open("readdle-spark://compose?recipient=manager@chihounds.com&subject=" + subject + "&bcc=" + recipients);
}

function toggleChildSlots (element) {
  console.log(element);
  console.log(element.closest(".slot-set"))
  for (lineup_slot of document.querySelectorAll("[id^=lineup-out] .lineup-slot")) {
    console.log(lineup_slot)
    const cells = lineup_slot.querySelectorAll('.Panel-cell:has(.sequence), .Panel-cell:has(.drag-handle), .Panel-cell:has(.position-select-box), button:has(+.position-label-flags)')
    Array.from(cells).forEach(cell=>{
      cell.classList.toggle('u-hidden')
    })
  }
}

async function copyEmailTable (element) {
  // range=document.createRange();
  // window.getSelection().removeAllRanges();
  // // range.selectNode(document.querySelector('.Modal').querySelector('.Modal-body')); 
  // tinymce.activeEditor.selection.select(tinymce.activeEditor.getBody());
  // // window.getSelection().addRange(range);
  // document.execCommand('copy');
  // window.getSelection().removeAllRanges();
  const emailStyle = `
  <style>.lineup-email {
    font-family: "Helvetica", sans-serif;
  }
  .lineup-email .title-cell {
    font-weight: bold;
    background-color: #323669;
    color: #fff;
    padding: 2px 5px;
    text-transform: uppercase;
  }
  .lineup-email .title-cell.out {
    background-color: rgb(244, 199, 195);
    color: black;
  }
  .lineup-email .sequence-cell {
    font-weight: bold;
    padding: 1px 5px;
    text-align: left;
  }
  .lineup-email .name-cell {
    width: 200px;
    text-align: left;
  }
  .lineup-email .position-label-cell {
    font-weight: bold;
    text-align: right;
  }
  
  .Panel .Panel {
    border: none;
    margin: 0;
  }</style>
  `
  // html_content = emailStyle+tinymce.activeEditor.getContent()
  // console.log(html_content)
  const table = element.closest('form').querySelector('.lineup-table table')

  // navigator.clipboard.write(
  //   [new ClipboardItem(
  //     {
  //       // 'text/plain': new Blob([tinymce.activeEditor.getContent({format: "text"})], {type: 'text/plain'}),
  //       'text/plain': new Blob([table.innerText], {type: 'text/plain'}),
  //       'text/html': new Blob([emailStyle+table.outerHTML], {type: 'text/html'})
  //     })
  //   ])
  
  window.getSelection().removeAllRanges();
  var range = document.createRange();
  range.selectNode(table);
  window.getSelection().addRange(range);
  document.execCommand("copy");
  window.getSelection().removeAllRanges();
}

function insertLineup(direction, teamId, eventId, element) {
  const currentUrl = window.location.href;
  let search_params
  if (Number(direction) > 0) {
    search_params = new URLSearchParams({
      page_size:1,
      index: 1
    })
  } else if (Number(direction) < 0) {
    search_params = new URLSearchParams({
      page_size:1,
      index: -1
    })
  } else {throw new Error("Needs to be a negative number or a positive number")}

  fetch(`/${teamId}/event/${eventId}/lineup/adjacent?`+search_params, {
    method: "GET"
  })
    .then((response) => {
      if (response.ok) {
        return response.text();
      } else {
        return Promise.reject(response.text());
      }
    })
    .then((html) =>{
      const parser = new DOMParser();
      const new_lineup_doc = parser.parseFromString(html, 'text/html')
      const new_lineup_doc_node = new_lineup_doc.firstElementChild.querySelector('[id*=event-lineup]')
      const main = document.querySelector("main")
      const new_csrf_token = new_lineup_doc.querySelector('form input[name=csrfToken]').value

      direction > 0 ? main.appendChild(new_lineup_doc_node) : main.insertBefore(new_lineup_doc_node, element.closest('[id*=event-lineup]'))

      main.classList.remove(...main.classList)
      main.classList.add('scroll-horizontal', 'u-spaceSidesSm', 'u-flex')

      Array.from(document.querySelectorAll("[id^=event-lineup]")).forEach((bcLineup) => {
        // main.classList.remove('.u-max1200', 'u-flexExpandSides')
        bcLineup.classList.remove('u-spaceSidesNone', 'u-sm-spaceSidesAuto')
      }
      )

      Array.from(document.querySelectorAll("[id^=event-lineup] .Panel")).forEach((bcLineupPanel) => {
        bcLineupPanel.classList.remove('Panel--full')
      })
      for (input of document.querySelectorAll("form input[name=csrfToken]")){
        input.value = new_csrf_token
      }

      initPage();
    })

}

function initSlots () {
  const slots = Array.from(document.querySelectorAll('.lineup-slot'))
  slots.forEach(slot=>{
    if (slot.dataset.initialSlotset) {
      const parent = document.querySelector(`#${slot.dataset.initialSlotset} .slot-set`)
      parent.appendChild(slot)
      slot.removeAttribute('data-initial-slotset')
    }
  })
}
function initPage (){
  colorPositions();
  initSlots();
  initFlagsCheckboxes();
	refreshLineup();
  for (bcLineup of document.querySelectorAll("[id^=event-lineup]")) {
    options = {
      animation: 150,
      handle: ".Panel-cell:has(.drag-handle), .Panel-cell:has(.sequence)",
      ghostClass: "ghost",
      group: {
        name: bcLineup.id,
        put: [bcLineup.id],
        pull: [bcLineup.id],
      },
      onAdd: function (/**Event*/ evt) {
        console.log("added to lineup");
        // Add to Lineup
        var itemEl = evt.item; // dragged HTMLElement
  
        refreshLineup();
      },
      onUpdate: function (/**Event*/ evt) {
        console.log("update to lineup");
        // var itemEl = evt.item; // dragged HTMLElement
        // refresh_lineup_order(itemEl);
        refreshLineup();
      },
    };
    new Sortable.create(bcLineup.querySelector("[id^=lineup-starting] .slot-set"), options);
    new Sortable.create(bcLineup.querySelector("[id^=lineup-positiononly] .slot-set"), options);
    options["sort"] = false;
    new Sortable.create(bcLineup.querySelector("[id^=lineup-bench] .slot-set"), options);
    new Sortable.create(bcLineup.querySelector("[id^=lineup-out] .slot-set"), {...options, group:{...options.group, put:[]}});
  }
  
  for (lineup_slot of document.querySelectorAll("[id^=lineup-out] .lineup-slot")) {
    const cells = lineup_slot.querySelectorAll('.Panel-cell:has(.sequence), .Panel-cell:has(.drag-handle), .Panel-cell:has(.position-select-box), button:has(+.position-label-flags)')
    Array.from(cells).forEach(cell=>{
      cell.classList.add('u-hidden')
    })
  }
}

function mailToLink(el, protocol='mailto') {
  console.log(el)
  console.log(el.dataset)
  const {to, bcc, subject} = el.dataset
  const params = new URLSearchParams({
    bcc, subject: encodeURIComponent(subject),
  })
  const url = `${protocol}:${to}?${params}`
  console.log(url)
  // location.href=`mailto:${to}${params}`
  const windowRef = window.open(url, '_blank');
  windowRef.focus();
}

function sparkMailToLink(el) {
  const protocol = 'readdle-spark'
  const {to, bcc, subject} = el.dataset
  const url = `${protocol}://compose?recipient=${to}&bcc=${bcc}&subject=${encodeURIComponent(subject)}`
  console.log(url)
  // location.href=`mailto:${to}${params}`
  const windowRef = window.open(url, '_blank');
  windowRef.focus();
}

function sendAvailabilityReminder(element, eventId, memberIds, csrf_token) {
  const icon = element.querySelector('svg')
  const button_text = element.querySelector('span')
  icon.classList.toggle('u-hidden')
  button_text.classList.toggle('u-hidden')
  const loader = '<span class="PulseAnimation"><span class="PulseAnimation-dot"></span><span class="PulseAnimation-dot"></span><span class="PulseAnimation-dot"></span></span>'
  const loader_node = new DOMParser().parseFromString(loader, "text/html").firstChild.querySelector('span');
  element.appendChild(loader_node)
  element.blur();

  const data = new FormData();
  const url = "../availability_reminders"
  data.append('eventId', eventId)
  for (var i = 0; i < memberIds.length; i++) {
    data.append('memberIds[]', memberIds[i]);
  }
  console.log(data)

  fetch(url, {
    method: "POST",
    body: data,
    headers: {
      'CSRF-Token': csrf_token
    }
  })
    .then((response) => {
      if (response.ok) {
        console.log(response)
        return response.text();
      } else {
        return Promise.reject(response.text());
      }
    })
    .finally(()=>{
      loader_node.remove()
      icon.classList.toggle('u-hidden')
      button_text.classList.toggle('u-hidden')
    })

  console.log(element, eventId, memberIds) 
}

document.addEventListener('DOMContentLoaded', initPage)