import predefinedNewsletterElements from 'src/utils/predefinedNewsletterElements'

export default function renderNewsletter (state) {
  const newsletterData = JSON.parse(JSON.stringify(state.newsletter)) // Create a deep copy of the newsletter data

  // Filter out sections with no elements
  newsletterData.sections = newsletterData.sections.filter(section => section.elements.length > 0)
  if (newsletterData.sections.length === 0) return ''

  // Function to render newsletter for a given language and layout (desktop or mobile)
  const renderForLanguageAndLayout = (language, layoutType) => {
    let newsletterHtml = ''

    // Choose the appropriate header, navigation, footer, and section title methods based on layout type
    const predefinedHeader = layoutType === 'desktop'
      ? predefinedNewsletterElements.headerDesktop
      : predefinedNewsletterElements.headerMobile

    const predefinedNav = layoutType === 'desktop'
      ? predefinedNewsletterElements.navDesktop
      : predefinedNewsletterElements.navMobile

    const predefinedFooter = layoutType === 'desktop'
      ? predefinedNewsletterElements.footerDesktop
      : predefinedNewsletterElements.footerMobile

    const predefinedSectionTitle = layoutType === 'desktop'
      ? predefinedNewsletterElements.sectionTitle
      : predefinedNewsletterElements.mobileSectionTitle

    const predefinedSpacer = layoutType === 'desktop'
      ? state.elements.spacer.renderDesktop
      : state.elements.spacer.renderMobile

    // Render header, navigation, and sections
    newsletterHtml += predefinedHeader(language)
    newsletterHtml += predefinedNav(newsletterData, language)

    // Loop through sections and render elements within each section
    newsletterData.sections.forEach(section => {
      // Only render section title if it's not named "preface"
      if (section.name.toLowerCase() !== 'preface' && section.name.toLowerCase() !== 'outro') {
        newsletterHtml += predefinedSectionTitle(section.name, language)
      }

      section.elements.forEach(element => {
        // Render each element based on its type (desktop or mobile)
        newsletterHtml += state.elements[element.type][layoutType === 'desktop' ? 'renderDesktop' : 'renderMobile'](element, language)
      })
    })

    // Render footer and spacer
    newsletterHtml += predefinedFooter(language)
    newsletterHtml += predefinedSpacer({ data: { height: 1000 } })

    return newsletterHtml
  }

  // Initialize the final newsletter HTML by rendering for both languages and layouts
  let newsletterHtml = '';
  ['german', 'english'].forEach(language => {
    ['desktop', 'mobile'].forEach(layoutType => {
      // Render newsletter for each language and layout combination
      newsletterHtml += renderForLanguageAndLayout(language, layoutType)
    })
  })

  // Return the final HTML wrapped in a document structure
  return predefinedNewsletterElements.document(newsletterHtml)
}