import styles from '../styles/Player.module.scss'
import { useState, useEffect } from 'react'
import useSettings from 'hooks/useSettings'
import useMediaQuery from 'hooks/useMediaQuery'
import Video from './Video'
import Buttons from './Buttons'
import { Splash } from 'components'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faList, faTrashAlt, faCaretSquareRight, faInfinity, faAlignJustify } from '@fortawesome/free-solid-svg-icons'

const App = ({ list }) => {
  const { t } = useSettings()
  const smallDevice = useMediaQuery('(max-width: 40em)')
  const [current, setCurrent] = useState(null)
  const [playlist, setPlaylist] = useState(null)
  const [showPlaylist, setShowPlaylist] = useState(false)
  const [details, setDetails] = useState({ show: 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) {
      if (typeof window !== 'undefined' && playlist && playlist.length > 0) {
        window.localStorage.setItem('playlist', JSON.stringify(playlist))
        setShowPlaylist(true)
      }

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

  useEffect(() => {
    smallDevice && showPlaylist && setDetails(d => ({ ...d, show: false }))
  }, [showPlaylist])

  useEffect(() => {
    smallDevice && details && details.show && setShowPlaylist(false)
  }, [details && details.show])

  const remove = (e, i) => {
    e.stopPropagation()
    if (current === i) {
      setCurrent(null)
    }
    setPlaylist(p => p.filter((_, j) => j !== i))
    if (current > i) {
      setCurrent(c => c - 1)
    }
  }

  if (!playlist) {
    return (
      <>
        <div className='window__submenu' />
        <div className={styles.player}>
          <Splash />
        </div>
      </>
    )
  }

  return (
    <>
      <div className='window__submenu'>
        <div>
          <div
            onClick={() => { setShowPlaylist(p => !p) }}
            className={current ? 'active' : null}
          >
            <FontAwesomeIcon icon={faList} />
          </div>
          <span />
          <Buttons current={current} setCurrent={setCurrent} playlist={playlist} />
          <div onClick={() => { setDetails(d => ({ ...d, show: !d.show })) }}>
            <FontAwesomeIcon icon={faAlignJustify} />
          </div>
        </div>
      </div>
      <div className={styles.player}>
        <div>
          {playlist && current !== null && playlist[current] && setDetails && (
            <Video
              playlist={playlist}
              current={current}
              setCurrent={setCurrent}
              setDetails={setDetails}
            />
          )}
        </div>
        <div style={showPlaylist ? {} : { transform: 'translateX(-110%)' }}>
          <ul>
            {
              playlist && playlist.length > 0
                ? (
                    playlist.map((item, i) => (
                      <li
                        onClick={() => { setCurrent(i) }}
                        className={current === i ? 'active' : ''}
                        key={item.id}
                      >
                        <FontAwesomeIcon
                          icon={item.type.split('_')[1] === 'live'
                            ? faInfinity
                            : faCaretSquareRight}
                        />
                        <span>{(i + 1) + '.'}</span>
                        <span>{item.title}</span>
                        <span onClick={e => remove(e, i)}>
                          <FontAwesomeIcon icon={faTrashAlt} />
                        </span>
                      </li>
                    ))
                  )
                : (
                  <li>{t('player_playlist_empty')}</li>
                  )
            }
          </ul>
        </div>
        <div style={details.show ? {} : { transform: 'translateX(110%)' }}>
          {details && (
            <div>
              <pre>
                {details.title}
              </pre>
              <pre>
                {details.description}
              </pre>
            </div>
          )}
        </div>
      </div>
    </>
  )
}

export default App