const html = require('choo/html');
const assets = require('../../../common/assets');
const number = require('../../utils').number;
const deletePopup = require('../popup');

function timeLeft(milliseconds, state) {
  const minutes = Math.floor(milliseconds / 1000 / 60);
  const hours = Math.floor(minutes / 60);
  if (hours >= 1) {
    return state.translate('expiresHoursMinutes', {
      hours,
      minutes: minutes % 60
    });
  } else if (hours === 0) {
    if (minutes === 0) {
      return state.translate('expiresMinutes', { minutes: '< 1' });
    }
    return state.translate('expiresMinutes', { minutes });
  }
  return null;
}

module.exports = function(file, state, emit) {
  const ttl = file.expiresAt - Date.now();
  const remainingTime =
    timeLeft(ttl, state) || state.translate('linkExpiredAlt');
  const downloadLimit = file.dlimit || 1;
  const totalDownloads = file.dtotal || 0;
  const row = html`
  <tr id="${file.id}">
    <td class="fileData fileData--overflow" title="${file.name}">
      <a class="link" href="/share/${file.id}">${file.name}</a>
    </td>
    <td class="fileData fileData--center">
      <img
        onclick=${copyClick}
        src="${assets.get('copy-16.svg')}"
        class="cursor--pointer"
        title="${state.translate('copyUrlHover')}">
      <span hidden="true">
        ${state.translate('copiedUrl')}
      </span>
    </td>
    <td class="fileData fileData--overflow">${remainingTime}</td>
    <td class="fileData fileData--center">${number(totalDownloads)} / ${number(
    downloadLimit
  )}</td>
    <td class="fileData fileData--center">
      <img
        onclick=${showPopup}
        src="${assets.get('close-16.svg')}"
        class="cursor--pointer"
        title="${state.translate('deleteButtonHover')}">
      ${deletePopup(
        state.translate('deletePopupText'),
        state.translate('deletePopupYes'),
        state.translate('deletePopupCancel'),
        deleteFile
      )}
    </td>
  </tr>
  `;

  function copyClick(e) {
    emit('copy', { url: file.url, location: 'upload-list' });
    const icon = e.target;
    const text = e.target.nextSibling;
    icon.hidden = true;
    text.hidden = false;
    setTimeout(() => {
      icon.hidden = false;
      text.hidden = true;
    }, 500);
  }

  function showPopup() {
    const tr = document.getElementById(file.id);
    const popup = tr.querySelector('.popup');
    popup.classList.add('popup--show');
    popup.focus();
  }

  function deleteFile() {
    emit('delete', { file, location: 'upload-list' });
    emit('render');
  }

  return row;
};