/**
 * Copyright 2016 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import Buffer from 'Tone/core/Buffer'
import 'style/splash.css'
import events from 'events'
import Loader from 'interface/Loader'

class Splash extends events.EventEmitter{
	constructor(container){

		super()
		const splash = this._splash = document.createElement('div')
		splash.id = 'splash'
		container.appendChild(splash)

		// the title
		const titleContainer = document.createElement('div')
		titleContainer.id = 'titleContainer'
		splash.appendChild(titleContainer)

		const title = document.createElement('div')
		title.id = 'title'
		title.textContent = 'A.I. Duet'
		titleContainer.appendChild(title)

		const subTitle = document.createElement('div')
		const germanSubTitle = document.createElement('div')
		subTitle.id = 'subTitle'
		germanSubTitle.id = 'germanSubTitle'
		titleContainer.appendChild(germanSubTitle)
		titleContainer.appendChild(subTitle)
		subTitle.textContent = 'A piano that responds to you.'
		germanSubTitle.textContent = ' Ein Klavier, das auf Ihre Eingaben antwortet.'

		this._clicked = false
		const loader = this._loader = new Loader(titleContainer)
		loader.on('click', () => {
			splash.classList.add('disappear')
			this._clicked = true
			this.emit('click')
		})

		const howItWorks = document.createElement('div')
		const germanHowItWorks = document.createElement('div')
		howItWorks.id = 'howItWorks'
		germanHowItWorks.id = 'germanHowItWorks'
		titleContainer.appendChild(germanHowItWorks)
		titleContainer.appendChild(howItWorks)
		howItWorks.innerHTML = 'This experiment lets you play a duet with the computer.<br>Just play some notes, and the computer will respond to your melody.'
		germanHowItWorks.innerHTML = 'In diesem Experiment kannst du ein Duett mit dem Computer spielen.<br>Spiele einfach ein paar Noten und der Computer reagiert auf deine Melodie.'

		const badges = document.createElement('div')
		badges.id = 'badges'
		splash.appendChild(badges)

		const aiExperiments = document.createElement('a')
		aiExperiments.id = 'aiExperiments'
		aiExperiments.href = 'https://aiexperiments.withgoogle.com'
		aiExperiments.target = '_blank'
		aiExperiments.classList.add('badge')
		badges.appendChild(aiExperiments)

		// break
		const break0 = document.createElement('div')
		break0.classList.add('badgeBreak')
		badges.appendChild(break0)

		const googleFriends = document.createElement('a')
		googleFriends.id = 'googleFriends'
		googleFriends.classList.add('badge')
		badges.appendChild(googleFriends)

		//break two
		const break1 = document.createElement('div')
		break1.classList.add('badgeBreak')
		badges.appendChild(break1)

		const magenta = document.createElement('a')
		magenta.href = 'https://magenta.tensorflow.org/'
		magenta.target = '_blank'
		magenta.id = 'magentaLink'
		magenta.classList.add('badge')
		const imgHtml = '<div id="img"></div>'
		magenta.innerHTML = imgHtml + '<div id="text">Built using <span>Magenta</span></div>'
		badges.appendChild(magenta)

		const privacyAndTerms = document.createElement('div')
		privacyAndTerms.id = 'privacyAndTerms'
		privacyAndTerms.innerHTML = '<a target="_blank" href="https://www.google.com/intl/en/policies/privacy/">Privacy</a><span>&</span><a target="_blank" href="https://www.google.com/intl/en/policies/terms/">Terms</a>'
		splash.appendChild(privacyAndTerms)

	}

	get loaded(){
		return this._loader.loaded
	}

	isOpen(){
		return !this._clicked
	}

	show(){
		this._splash.classList.remove('disappear')
	}

	hide(){
		this._splash.classList.add('disappear')
	}
}

export {Splash}