import { showElement, updateHTML, renderImage } from './dom-helpers.mjs';

function formattedCoordinates (geo) {
  return `Latitude: ${geo.geometry.coordinates[1]}<br>` +
         `Longitude: ${geo.geometry.coordinates[0]}<br>`;
}

function formattedLocation (geo) {
  return `${geo.city || geo.state}, ${geo.country}`;
}

async function renderPublicProfile (geo) {
  showElement('.profile.public');
  updateHTML('.profile.public .coords', formattedCoordinates(geo));
  updateHTML('.profile.public .formatted', formattedLocation(geo));
}

async function initializeProfileUpdates(remoteStorage, data) {
  const privateClient = remoteStorage.scope('/profile/');
  const publicClient  = remoteStorage.scope('/public/profile/');
  const profileUrl = await publicClient.getItemURL('current-location');
  const imageUrl   = await publicClient.getItemURL('current-location.png');
  updateHTML('.profile.public .link', `<a href="${profileUrl}">Public URL</a>`);

  await publicClient.getObject('current-location').then(async res => {
    if (res) {
      renderPublicProfile(res);
      renderImage('.profile.public .map', imageUrl, '260x100');
    }
  })

  document.querySelector('.current-city button.publish').addEventListener('click', async () => {
    const content = JSON.stringify(data.currentCity.geoJSON);
    const mapImageData = data.currentCity.imageArrayBuffer;

    publicClient.storeFile('application/geo+json', 'current-location', content)
      .then(renderPublicProfile(data.currentCity.geoJSON));

    publicClient.storeFile('image/png', 'current-location.png', mapImageData)
      .then(() => {
        renderImage('.profile.public .map', `${imageUrl}?${new Date().getTime()}`, '260x100');
      });
  })
}

export default initializeProfileUpdates;