document.addEventListener('htmx:wsConfigSend', function (e) {
  if (e.target.classList.contains('intersection')) {
    const row = parseInt(e.target.dataset.row);
    const col = parseInt(e.target.dataset.col);

    // Set the custom JSON data
    e.detail.parameters = {
      type: 'make_move',
      row: row,
      col: col,
    };
  } else if (e.target.id == 'resign-button') {
    e.detail.parameters = {
      type: 'resign',
    };
  } else if (e.target.id == 'takeback-button') {
    e.detail.parameters = {
      type: 'takeback',
      action: 'request',
    };
  } else if (e.target.id == 'accept-takeback-button') {
    e.detail.parameters = {
      type: 'takeback',
      action: 'accept',
    };
  } else if (e.target.id == 'decline-takeback-button') {
    e.detail.parameters = {
      type: 'takeback',
      action: 'decline',
    };
  } else if (e.target.id == 'cancel-takeback-request-button') {
    e.detail.parameters = {
      type: 'takeback',
      action: 'cancel',
    };
  } else if (e.target.id == 'draw-button') {
    e.detail.parameters = {
      type: 'draw',
      action: 'request',
    };
  } else if (e.target.id == 'accept-draw-button') {
    e.detail.parameters = {
      type: 'draw',
      action: 'accept',
    };
  } else if (e.target.id == 'decline-draw-button') {
    e.detail.parameters = {
      type: 'draw',
      action: 'decline',
    };
  } else if (e.target.id == 'cancel-draw-request-button') {
    e.detail.parameters = {
      type: 'draw',
      action: 'cancel',
    };
  } else if (e.target.id == 'rematch-button') {
    e.detail.parameters = {
      type: 'rematch',
      action: 'request',
    };
  } else if (e.target.id == 'accept-rematch-button') {
    e.detail.parameters = {
      type: 'rematch',
      action: 'accept',
    };
  } else if (e.target.id == 'decline-rematch-button') {
    e.detail.parameters = {
      type: 'rematch',
      action: 'decline',
    };
  } else if (e.target.id == 'cancel-rematch-request-button') {
    e.detail.parameters = {
      type: 'rematch',
      action: 'cancel',
    };
  } else if (e.target.id == 'save-display-name-ws-button') {
    const displayNameInput = document.getElementById('display-name-input');
    e.detail.parameters = {
      type: 'update_display_name',
      displayName: displayNameInput ? displayNameInput.value.trim() : '',
    };
  }
});

// Set the user's name to their flag by default
document.body.addEventListener('htmx:wsOpen', function (evt) {
  const locale = navigator.language || navigator.userLanguage;
  const countryCode = locale.split('-')[1] || locale.split('_')[1] || locale;
  const countryCodeToFlagEmoji = (code) => {
    if (code.length === 2) {
      return code
        .toUpperCase()
        .split('')
        .map((char) => String.fromCodePoint(127397 + char.charCodeAt(0)))
        .join('');
    }
    return null;
  };
  const flagEmoji = countryCodeToFlagEmoji(countryCode);

  if (flagEmoji) {
    const message = {
      type: 'update_display_name',
      displayName: flagEmoji,
    };
    evt.detail.socketWrapper.send(JSON.stringify(message));

    const displayNameSpan = document.getElementById('display-name');
    displayNameSpan.textContent = flagEmoji;
  }
});