import cn from 'classnames'
import { useEffect, useState } from 'react'
import { BrowserRouter, Link, Routes, Route, Navigate } from 'react-router-dom'

import bgmSrc from '@/assets/music.mp3'
import ThreadListPage from '@/pages/threads/ThreadListPage'
// import ThreadDetailPage from '@/pages/threads/ThreadDetailPage'

const colours = ['bg-fuchsia-500 dark:bg-fuchsia-900',
		 'bg-lime-500 dark:bg-lime-900',
		 'bg-cyan-500 dark:bg-cyan-900',
		 'bg-orange-500 dark:bg-orange-900',
		 'bg-pink-500 dark:bg-pink-900',
		 'bg-red-500 dark:bg-red-900',
		 'bg-blue-500 dark:bg-blue-900',
		 'bg-green-500 dark:bg-green-900',
		 'bg-yellow-500 dark:bg-yellow-900'] as const


export default () => {
  const [colourIndex, setColourIndex] = useState (0)
  const [playing, setPlaying] = useState (false)

  useEffect (() => {
    const bgm = new Audio (bgmSrc)
    bgm.loop = true

    const playBGM = async () => {
      if (playing)
	return

      try
      {
	await bgm.play ()
	bgm.loop = true

	setPlaying (true)
      }
      catch
      {
	setPlaying (false)
      }
    }

    const bgmInterval = setInterval (playBGM, 1000)
    document.addEventListener ('click', playBGM)
    document.addEventListener ('touchstart', playBGM)

    const changeColour = () => {
      setColourIndex (idx => Math.floor (Math.random () * colours.length))
    }
    changeColour ()
    const colouringInterval = setInterval (changeColour, 3000)

    return () => {
      clearInterval (bgmInterval)
      clearInterval (colouringInterval)
    }
  }, [])

  return (
      <BrowserRouter>
	<div className={cn ('w-screen h-screen',
			    colours[colourIndex],
			    'transition-colors duration-[3s] ease-linear')}>
	  <h1 className="text-center py-7">
	    <Link to="/"
		  className="text-7xl text-transparent whitespace-nowrap
			     bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
			     bg-clip-text [transform:skewX(-13.5deg)]
			     inline-block bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]
			     font-serif hover:text-transparent dark:hover:text-transparent">
	      クソ掲示板
	    </Link>
	  </h1>
	  <Routes>
	    <Route path="/" element={<Navigate to="/threads" replace />} />
	    <Route path="/threads" element={<ThreadListPage />} />
	    {/* <Route path="/threads/:id" element={<ThreadDetailPage />} /> */}
	  </Routes>
	</div>
      </BrowserRouter>)
}
