<BackgroundContainer className="musicBackground" playToggle={playToggle}>
  <ContentsMenubar name="music" />
  <audio preload="auto" controls="none" style={{ display: 'none' }}></audio>
  <SideButton position="left" onClick={() => anotherMusicPlay('left')} />
  <PlayButton onClick={playMusic}>
    <div>{myMusic.name}</div>
    <p>{!playToggle ? `PLAY` : `STOP`}</p>
  </PlayButton>
  <SideButton position="right" onClick={() => anotherMusicPlay('right')} />
</BackgroundContainer>

export default class Sound {
  sound = null // HTMLAuioElement
  name = ''
  constructor(src) {
    this.sound = document.querySelector('audio')
    this.name = src
    this.sound.src = src
  }
  play() {
    this.sound.play()
  }
  stop() {
    this.sound.pause()
  }
}

const musics = ['1Upbeat Ukulele.mp3', '2Instrumental.mp3', '3Inspiration.mp3']

useEffect(() => {
  setMyMusic(new Sound(musics[0]))
}, [])

const playMusic = () => {
  !playToggle && myMusic.play()
  playToggle && myMusic.stop()
  setPlayToggle(!playToggle)
}

const anotherMusicPlay = direction => {
  myMusic.stop()
  if (direction === 'left') {
    return setMyMusic(
      new Sound(
        musics[
          (musics.indexOf(myMusic.name) + musics.length - 1) % musics.length
        ]
      )
    )
  }
  if (direction === 'right') {
    return setMyMusic(
      new Sound(musics[(musics.indexOf(myMusic.name) + 1) % musics.length])
    )
  }
}

useEffect(() => {
  playToggle && myMusic.play()
}, [myMusic])

const rainbow = keyframes`
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
`

const BackgroundContainer = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: ${(props) => {
    return props.playToggle
      ? 'linear-gradient(124deg,#ff2400,#e81d1d,#e8b71d,#e3e81d,#1de840,#1ddde8,#2b1de8,#dd00f3,#dd00f3);'
      : 'white'
  }}
  background-size: 1800% 1800%;
  animation: ${rainbow} 18s ease infinite;