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: #9B0A7D;">
          <table>
              <tr>
                  <td>`
  for (let i = 0; i < newsletterData.sections.length; i++) {
    nav += `
                    <tr>
                      <td width="900" style="border-bottom: 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}-mobile"
                                                          style="color:#FFFFFF; font-size: 40px"><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="60px">
                                                  <a style="color:#FFFFFF; font-size: 30px" href="#${newsletterData.sections[i].elements[j].id}-${lang}-mobile">${newsletterData.sections[i].elements[j].data[lang].shortTitle}</a>
                                                </td>
                                              </tr>
                                              `
    }

    nav += `

                                          </tbody>
                                      </table>
                                  </td>
                              </tr>
                          </tbody>
                          </table>
                      </td>
                    </tr>`
  }

  nav += `
                  </td>
              </tr>

          </table>
          <!--[if mso]></td></tr></table><![endif]-->
      </td>
  </tr>
  `

  return nav
}