import styles from '../styles/Player.module.scss'
import { useState, useEffect } from 'react'
import useSettings from 'hooks/useSettings'
import Video from './Video'
import Buttons from './Buttons'
import { Splash } from 'components'

const App = ({ list }) => {
  const { t } = useSettings()
  const [current, setCurrent] = useState(null)
  const [playlist, setPlaylist] = useState(null)
  const [showPlaylist, setShowPlaylist] = useState(false)

  useEffect(() => {
    if (list) {
      const { items, enqueue } = list

      setPlaylist(
        p => enqueue && p
          ? p.some(x => items.some(y => x.id === y.id))
            ? p
            : [...p, ...items]
          : items
      )

      if (enqueue) {
        setShowPlaylist(true)
      }
    } else {
      if (typeof window !== 'undefined') {
        try {
          setPlaylist(JSON.parse(window.localStorage.getItem('playlist')))
        } catch (e) {
          setPlaylist([])
          window.localStorage.setItem('playlist', JSON.stringify([]))
        }
      }
    }
  }, [list])

  useEffect(() => {
    if (playlist) {
      const { items, enqueue } = playlist

      if (typeof window !== 'undefined' && playlist && playlist.length > 0) {
        window.localStorage.setItem('playlist', JSON.stringify(enqueue ? [...playlist, ...items] : items))
        setShowPlaylist(true)
      }

      if (current === null && list) {
        setCurrent(
          enqueue
            ? playlist && playlist.length > 1
              ? playlist.length - 1
              : 0
            : 0
        )
      }
    }
  }, [playlist])

  if (!playlist) return <Splash />

  return (
    <>
      <div className='window__submenu'>
        <div>
          <div
            onClick={() => { setShowPlaylist(p => !p) }}
            className={current ? 'active' : null}
          >
            {t('player_playlist_default')}
          </div>
          <div onClick={() => {}}>+</div>
          <Buttons current={current} setCurrent={setCurrent} playlist={playlist} />
        </div>
      </div>
      <div className={styles.player}>
        <div>
          {current !== null && (
            <Video playlist={playlist} current={current} setCurrent={setCurrent} />
          )}
        </div>
        <div style={showPlaylist ? {} : { transform: 'translateX(-110%)' }}>
          <ul>
            {
              playlist && playlist.length > 0
                ? (
                    playlist.map((item, i) => (
                      <li
                        onClick={() => { setCurrent(i) }}
                        className={current === i ? styles.activeItem : ''}
                        key={item.id}
                      >
                        <span>{(i + 1) + '.'}</span>
                        {item.title}
                      </li>
                    ))
                  )
                : (
                  <li>{t('player_playlist_empty')}</li>
                  )
            }
          </ul>
          <div onClick={() => setShowPlaylist(false)}>&lt;</div>
        </div>
      </div>
    </>
  )
}

export default App