<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4d9bce4b44.js" crossorigin="anonymous"></script>
<div class="main">
	<h1>Queen's Playlist</h1>
	<div class="alert"></div>
	<svg viewbox="0 0 100 100">
		<defs>
			<filter id="shadow">
				<feDropShadow dx="0" dy="-0.3" stdDeviation="0.2"/>
			</filter>
		</defs>
		<defs>
			<filter id="shadow-2">
				<feDropShadow dx="0" dy="0" stdDeviation="0.3"/>
			</filter>
		</defs>
		
		<path d="M5 10,
						 Q5 8, 7 8,
						 L60 8,
						 Q62 8, 62 10, 
						 L62 45,
						 Q62 47, 60 47, 
						 L7 47, 
						 Q5 47, 5 45
						 L5 10" fill="#30a996"/>
		<path d="M10 15, 
						 Q10 13, 12 13, 
						 L55 13, 
						 Q57 13, 57 15, 
						 L57 35,
						 Q57 37, 55 37, 
						 L13 37,
						 Q10 37, 10 35, 
						 L10 15" fill="#e3dcaa" class="shadow-2"/>
		<path d="M15 47, 
						 L18 40, 
						 L50 40, 
						 L53 47, 
						 L15 47"
					fill="#278775"
					class="shadow"/>
		<path d="M10 20, 
						 L57 20, 
						 L57 25,
						 L10 25" fill="#df2a13"/>
		<circle cx="8" cy="11" r="1" fill="#10493e"/>
		<circle cx="59" cy="11" r="1"fill="#10493e"/>
		<circle cx="8" cy="44" r="1" fill="#10493e"/>
		<circle cx="59" cy="44" r="1" fill="#10493e"/>
		<circle cx="23" cy="44" r="1" fill="#30a996"/>
		<circle cx="45" cy="44" r="1" fill="#30a996"/>
		 <rect x="28" y="42" rx="0" ry="0" width="1.5" height="1.5" />
		<rect x="38" y="42" rx="0" ry="0" width="1.5" height="1.5"/>
		<rect x="15" y="20" rx="6" width="37" height="12" class="mid-rect"/>
		<rect x="27" y="24" width="13" height="6"/>

	<!-- 	middle circles-->
		<circle cx="21" cy="26" r="4.5" fill="#30a996"/>
		<circle cx="46" cy="26" r="4.5" fill="#30a996"/>
		<circle cx="21" cy="26" r="3.5" fill="#f6dfda"/>
		<circle cx="46" cy="26" r="3.5" fill="#f6dfda"/>
		<!-- 	animation will happen here -->
		<g class="first-g">
				<path d="M19 23, 
						 L23 29" stroke="#30a996"
	stroke-width=".4" />
		<path d="M23 23, 
						 L19 29" stroke="#30a996"
	stroke-width=".4" />
		<path d="M17 26, 
						 L25 26" stroke="#30a996"
	stroke-width=".4" />

		<circle cx="21" cy="26" r="2" fill="#f6dfda"/>
		</g>
		<g class="second-g">
		<path d="M48 23, 
						 L44 29" stroke="#30a996"
	stroke-width=".4" />
		<path d="M44 23, 
						 L48 29" stroke="#30a996"
	stroke-width=".4" />
		<path d="M42 26, 
						 L50 26" stroke="#30a996"
	stroke-width=".4" />
		<circle cx="46" cy="26" r="2" fill="#f6dfda"/>
		</g>

	<!-- 	Lip -->
		<path d="M5 45,
						 L4 43,
						 L4 35, 
						 L5 33" fill="#10493e" /> 
		<path d="M62 45,
						 L63 43,
						 L63 35, 
						 L62 33" fill="#10493e" /> 

	</svg>
	<div class="info">
		<p class="artist"></p>
		<p class="song">

		</p>
	</div>
	<div class="buttons">
	<button class="previous">
		<i class="fas fa-step-backward"></i>
	</button>
	<button class="play">
		<i class="fas fa-play"></i>
	</button>
	<button class="pause">
		<i class="fas fa-pause"></i>
	</button>
	<button class="next">
		<i class="fas fa-step-forward"></i>
	</button>
</div>
</div>

*{
	box-sizing: border-box;
}

body{
	background: #f6dfda;
 	font-family: 'Righteous', cursive;
	color:#10493e;
}

.main{
	position: absolute;
	width: 100%;
}

h1{
	position: absolute;
	left: 180px;
	letter-spacing: 5px;
	text-shadow: 3px 3px 1px 
#c1bbbd;
}

.alert{
	position: relative;
	top: 250px;
	left:270px;
	width:130px;
	height: 60px;
	z-index: 1;
	text-align: center;
	visibility: hidden;
	padding-top: 10px;
}

.pop-up{
	visibility: visible;
}

svg{
	position: relative;
	top: -50px;
	width: 1000px;
	height: 1000px;
}

rect{
	fill:#30a996;
}

.mid-rect{
	fill: #10493e;
}

.shadow{
	filter:url(#shadow);
}

.shadow-2{
	filter:url(#shadow-2);
}

.spin {
	transform-origin: center;
	transform-box: fill-box;
	animation: rotate-wheel 8s infinite linear;
}

@keyframes rotate-wheel{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.info{
	position: relative;
	top: -940px;
	left: 100px;
	width: 450px;
	height: 10vh;
	text-align: center;
	font-size: 18px;
}

.buttons{
 position: relative;
 top: -650px;
 left: 50px;
 
}

i{
	color:#10493e;
  font-size: 30px;

}

i.fa-music{
font-size: 15px;
}

button{
	width: 140px;
	height: 50px;
	border-radius: 10px;
	outline: none;
	box-shadow: 2px 2px 3px 
#8d8d8d inset;
}

let songs = [
	{artistName: "Queen", 
	songName: "Bohemian Rhapsody - Sample", 
	url: "https://upload.wikimedia.org/wikipedia/en/f/fb/QueenBohemianRhapsody_Opera.ogg"},
	{artistName: "Queen", 
	 songName: 'We Will Rock You - Sample',
	 url: "https://upload.wikimedia.org/wikipedia/en/b/bc/Wewillrockyou.ogg"},
	{artistName: "Queen", 
	 songName: "Don't Stop Me Know - Sample",
	 url: "https://upload.wikimedia.org/wikipedia/en/d/db/Queen_-_Don%27t_Stop_Me_Now.ogg"}, 
	{artistName: "Queen", 
	 songName: "I Want To Break Free - Sample",
	 url: "https://upload.wikimedia.org/wikipedia/en/7/75/Queen_I_want_to_break_free.ogg"}, 
	{artistName: "Queen", 
	 songName: "Another One Bites The Dust - Sample",
	 url: "https://upload.wikimedia.org/wikipedia/en/3/39/Another-one-bites-the-dust--forward.ogg"}, 
	{artistName: "Queen", 
	 songName: "We Are The Champions - Sample",
	 url: "https://upload.wikimedia.org/wikipedia/en/1/1c/Wearethechampions.ogg"},
	{artistName: "Queen", 
	 songName: "Crazy Little Thing Called Love - Sample",
	 url: "https://upload.wikimedia.org/wikipedia/en/0/06/Queen_-_Crazy_Little_Thing_Called_Love.ogg"}
]

let audio = new Audio(songs[0].url);
let previousButton = document.querySelector('.previous')
let playButton = document.querySelector('.play')
let pauseButton = document.querySelector('.pause')
let nextButton = document.querySelector('.next')
let firstG = document.querySelector(".first-g")
let secondG = document.querySelector(".second-g")
let artist = document.querySelector(".artist")
let song = document.querySelector(".song")
let popUp = document.querySelector('.alert')
let musicLogo = `<i class="fas fa-music"></i>`

let currentSongIndex = 0

const spin = () => {
 firstG.classList.add('spin')
 secondG.classList.add('spin')
}

playButton.addEventListener('click', function(){
	audio.play()
	artist.innerText = currentSong().artistName
	song.innerHTML = currentSong().songName + musicLogo
	spin()
  audio.loop='true'
})

pauseButton.addEventListener('click', function(){
	audio.pause()
	firstG.classList.remove('spin')
	secondG.classList.remove('spin')
})

const currentSong = (index) => {
if(index === undefined){
	return songs[currentSongIndex]
} else if (index < songs.length ){
	artist.innerText = songs[index].artistName 
	song.innerHTML = songs[index].songName + musicLogo
 }
}

const nextSong = ()=> {
	newSongIndex = currentSongIndex + 1
	currentSong(newSongIndex)
	if(newSongIndex < songs.length){
		audio.pause()
		audio = new Audio(songs[newSongIndex].url)
		audio.play()
		audio.loop='true'
		return currentSongIndex = newSongIndex
	} else {
		popUp.classList.add('pop-up')
		popUp.innerText = "This the last song."
			setTimeout(() => {
			popUp.classList.remove('pop-up')
		}, 1000)
		return currentSongIndex
	}
	
}

const previousSong= () => {
	newSongIndex = currentSongIndex - 1
	if(newSongIndex < 0 ){
		popUp.classList.add('pop-up')
		popUp.innerText = 'This is the first song.'
		setTimeout(() => {
			popUp.classList.remove('pop-up')
		}, 1000)
		return currentSongIndex 
	} else {
		audio.pause()
		currentSong(newSongIndex)
		audio = new Audio(songs[newSongIndex].url)
		audio.play()
		audio.loop='true'
		return currentSongIndex = newSongIndex
	}
}

nextButton.addEventListener('click', function(){
 nextSong()
 spin()
})

previousButton.addEventListener('click', function(){
	previousSong()
	spin()
})