import { open } from 'helpers/windowActions'
import appList from 'configs/appList'
import useApps from 'hooks/useApps'
import fetchJson from 'helpers/fetchJson'
import styles from '../styles/Radio.module.scss'

const play = async (title, station, apps, setApps, enqueue) => {
  const streamData = await fetchJson('/api/radio/stream', {
    method: 'POST',
    body: JSON.stringify({ station })
  })

  const items = [{ type: 'radio', title, ...streamData }]

  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 } })
}

const List = ({ results, enqueue }) => {
  const { apps, setApps } = useApps()

  return (
    <div className={styles.list}>
      <div>
        {results && results.length === 0 && <div>No results</div>}
        {results && results.length > 0 && (
          results.map(({ title, url, logo, genres, locations }) => (
            <div key={url} onClick={() => play(title, url, apps, setApps, enqueue)}>
              <img width={75} height={75} src={logo} loading="lazy" alt="title" />
              <div>
                <span>{ title }</span>
                <div>
                  <span>{locations.join(', ')}</span>
                  <div>
                    {genres.map(g => <span>{g}</span>)}
                  </div>
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  )
}

export default List