import styles from '../styles/Youtube.module.scss'
import { useState } from 'react'
import fetchJson from 'helpers/fetchJson'
import useApps from 'hooks/useApps'
import useSettings from 'hooks/useSettings'
import { open } from 'helpers/windowActions'
import appList from 'configs/appList'
import Splash from 'components/Splash'

const time = t => t ? new Date(t * 1000).toISOString().substr(11, 8) : '-'

const App = () => {
  const { apps, setApps } = useApps()
  const [results, setResults] = useState()
  const [loading, setLoading] = useState(false)
  const [enqueue, setEnqueue] = useState(false)
  const [type, setType] = useState('yt_video')
  const { t } = useSettings()

  const handleSearch = e => {
    e.preventDefault()
    e.stopPropagation()
    setLoading(true)
    const quote = [
      e.currentTarget.quote.value,
      { type: type === 'yt_music' ? 'music' : type.split('_')[1] }
    ]

    fetchJson('/api/youtube/search', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ quote })
    })
      .then(results => {
        if (type === 'yt_live') {
          results?.streams && setResults(results.streams)
        } else if (type === 'yt_playlist') {
          results?.playlists && setResults(results.playlists)
        } else {
          results?.videos && setResults(results.videos)
        }
      })
      .catch(() => { console.log('Could not fetch results') })
      .finally(() => { setLoading(false) })
  }

  const fetchPlaylist = (id) => fetchJson(
    '/api/youtube/playlist', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id })
    }
  )

  const handlePlay = async (e, title, id) => {
    e.stopPropagation()
    setLoading(true)
    const items = type === 'yt_playlist'
      ? await fetchPlaylist(id)
        .then(data => data.items.map(i => ({ title: i.title, id: i.id, type: i.isLive ? 'yt_live' : 'yt_video' })))
        .catch(() => { console.log('Could not fetch playlist') })
      : [{ title, id, type }]

    apps && apps.length > 0 && apps.some(a => a && a.name === 'Player')
      ? setApps(prev => prev.map(a => a.name === 'Player' ? { ...a, props: { list: { items, enqueue } } } : a))
      : open({ appName: 'Player', ...appList.Player }, setApps, { list: { items, enqueue } })
    setLoading(false)
  }

  return (
    <>
      <div className='window__submenu'>
        <div>
          {[
            'yt_video',
            'yt_live',
            'yt_playlist'
          ].map(y => (
            <div
              className={y === type ? 'active' : ''}
              onClick={() => { setType(y); setResults() }}
              key={y}
            >
              {t(y)}
            </div>
          ))}
          <span />
          <div
            className={enqueue ? '' : 'off'}
            onClick={() => { setEnqueue(e => !e) }}
          >
            {t('yt_enqueue')}
          </div>
        </div>
      </div>
      <div className={styles.results}>
        <form onSubmit={handleSearch}>
          <input type='text' name='quote' />
          <input type='submit' className='window__button' value={t('search')} />
        </form>
        <div className='window__scroll'>
          <ul>
            {
              results && results.length > 0 && results.map(r => (
                <li
                  key={r.id}
                  onClick={e => handlePlay(e, r.title, r.id)}
                >
                  <img loading='lazy' src={r.thumbnail} width={96} height={72} />
                  {r.duration && <p>{time(r.duration)}</p>}
                  <div>
                    <p>{r.title}</p>
                    <p>{r.views
                      ? r.views + ' ' + t('yt_views')
                      : r.watching
                        ? r.watching + ' ' + t('yt_watching')
                        : r.videoCount
                          ? r.videoCount + t('yt_video_count')
                          : '-'}
                      {(r.views || r.watching) && r.uploaded && ', '}
                      {r.uploaded || ''}
                    </p>
                    <p>{r.channel?.name}</p>
                  </div>
                </li>
              ))
            }
          </ul>
          {loading && <Splash fixed />}
        </div>
      </div>
    </>
  )
}

export default App