const html = require('choo/html');
const version = require('../../package.json').version;
const { browserName } = require('../utils');

module.exports = function(state) {
  const browser = browserName();
  const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
  const footer = html`<footer class="w-full flex-none self-start p-2 bg-white font-medium text-xs text-grey-dark">
    <ul class="list-reset flex flex-col md:flex-row items-start md:items-center md:justify-end">
      <li class="m-2"><a
        href="https://www.mozilla.org/about/legal">
        ${state.translate('footerLinkLegal')}
      </a></li>
      <li class="m-2"><a
        href="https://testpilot.firefox.com/about">
        ${state.translate('footerLinkAbout')}
      </a></li>
      <li class="m-2"><a
        href="/legal">
        ${state.translate('footerLinkTerms')}
      </a></li>
      <li class="m-2"><a
        href="https://www.mozilla.org/privacy/websites/#cookies">
        ${state.translate('footerLinkCookies')}
      </a></li>
      <li class="m-2"><a
        href="https://www.mozilla.org/about/legal/report-infringement/">
        ${state.translate('reportIPInfringement')}
      </a></li>
      <li class="m-2"><a
        href="https://github.com/mozilla/send">GitHub
      </a></li>
      <li class="m-2"><a
        href="https://twitter.com/FxTestPilot">Twitter
      </a></li>
      <li class="m-2"><a href="${feedbackUrl}"
        rel="noreferrer noopener"
        class="feedback-link"
        alt="Feedback"
        target="_blank">
        ${state.translate('siteFeedback')}
      </a></li>
    </ul>
  </footer>`;
  // HACK
  // We only want to render this once because we
  // toggle the targets of the links with utils/openLinksInNewTab
  footer.isSameNode = function(target) {
    return target && target.nodeName && target.nodeName === 'FOOTER';
  };
  return footer;
};
