import translation from 'src/i18n'
import { langToLocale } from 'src/utils/languageUtils'

export default (newsletterData, lang) => {
  // remove preface from section sothat it is not displayed in the navigation, make a deep copy before
  newsletterData = JSON.parse(JSON.stringify(newsletterData))
  newsletterData.sections = newsletterData.sections.filter(section => section.name !== 'preface' && section.name !== 'outro')
  let nav = `
    <tr>
      <td align="left"
          style="background-color: #a0338a;">
          <table>
              <tr>
                  `
  for (let i = 0; i < newsletterData.sections.length; i++) {
    nav += `
      <td width="${960 / newsletterData.sections.length}" ${i === (newsletterData.sections.length - 1) ? 'style="vertical-align: top;"' : 'style="border-right: 2px solid #FFFFFF;'} vertical-align: top;">
                      <table style="margin-bottom: 20px; margin-top: 30px; "
            cellpadding="0" cellspacing="0"
            align="center">
            <tbody>
                <tr>
                    <td align="center">
                        <table cellpadding="0" cellspacing="0"
                            width="100%">
                            <tbody>
                                <tr>
                                    <td
                                        align="center">
                                        <a align="center"
                                            href="#section-${translation[langToLocale(lang)].section[newsletterData.sections[i].name].replace(/\./g, '')}-${lang}-desktop"
                                            style="color:#FFFFFF; font-size: 20px"><strong>${translation[langToLocale(lang)].section[newsletterData.sections[i].name]}</strong></a>
                                    </td>
                                </tr>

    `
    // add the links
    for (let j = 0; j < newsletterData.sections[i].elements.length; j++) {
      if (newsletterData.sections[i].elements[j].type !== 'title') {
        continue
      }
      nav += `
                                <tr>
                                  <td align="center" height="30px">
                                    <a style="color:#FFFFFF;" href="#${newsletterData.sections[i].elements[j].id}-${lang}-desktop">${newsletterData.sections[i].elements[j].data[lang].shortTitle}</a>
                                  </td>
                                </tr>
      `
    }
    nav += `
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
    `
  }
  nav += `
              </tr>
          </table>
                  </td>
  </tr>
  `
  return nav
}