import { readFileSync, readdirSync } from 'fs'
import { join } from 'path'
import { Renderer, RenderMode } from './Renderer'

export interface SongParts {
  title: string
  content: string
  css: string
}

/**
 * Returns the rendered song
 * @param text - the source contents
 * @param renderMode - can be used to overwrite the directive render-mode. Either 'chordName' or 'diagram'
 * @param theme - The theme to use
 * @param html - whether to output a complete html page or return {title, content, css}
 * @returns either the complete rendered html page with css embedded, or {title, content, css}
 */
export default function chordsong (text: string, renderMode: RenderMode = 'chordName', theme: string = 'default', html: boolean = true): string | SongParts {
  const renderer: Renderer = new Renderer(text, renderMode)

  const themeDir = join(__dirname, '..', 'themes', theme)

  const themeHtml: string = readFileSync(join(themeDir, 'index.html'), 'utf-8')

  const cssFiles = readdirSync(themeDir)
  const themeCss: string = cssFiles.map(cssFile => readFileSync(join(themeDir, cssFile), 'utf-8')).join('\n')

  let title = renderer.title
  const artist = renderer.artist
  if (title !== '' && artist !== '') {
    title = `${artist} - ${title}`
  }
  if (title === '') title = 'Chordsong'

  const content = renderer.render()
  if (html) {
    const chordsong: string = themeHtml
      .replace('{{TITLE}}', `${title}`)
      .replace('{{CHORDSONG}}', content)
      .replace('{{CSS}}', `<style type="text/css">\n${themeCss}</style>`)

    return chordsong
  } else {
    return {
      title,
      content,
      css: themeCss
    }
  }
}