import React, {useState} from 'react';
import {FaEye} from 'react-icons/fa'

import {getArtist, getDisc, getSong} from '../services/entity_service';

import {EntityList} from '../components/EntityList';
import {CoverArt} from '../components/CoverArt';
import {Grid, Row, Col, RowCol} from '../components/Grid';

const PopularArtists = () => {
  const artistIDs = ['fa3b825f-7c85-4377-b393-d28a2016e293', 'b2d122f9-eadb-4930-a196-8f221eeb0c66',
  '27e2997f-f7a1-4353-bcc4-57b9274fa9a4', '2de794c8-8826-48d0-90e0-6900183ba9e0']
  let [artists, setArtists] = useState(null);

  if(!artists) {
    Promise.all([getArtist(artistIDs[0]),
    getArtist(artistIDs[1]),
    getArtist(artistIDs[2]),
    getArtist(artistIDs[3])])
    .then(artists => setArtists(artists));
    return <EntityList placeholder={true} size={4}/>
  } else {
    const items = artists.map((artist) => {
      const widget = (<span><FaEye className='icon'/> {Math.floor(Math.random() * 1000)}</span>);
      return {
        'cover': null,
        'link': `/artist/${artist.id}`,
        'title': artist.name,
        'subtitle': [artist.type, artist.country].filter(Boolean).join(' - '),
        'widget': widget
      }
    });
    const list = [{'items': items}];
    return <EntityList list={list}/>
  }
}

const PopularDiscs = () => {
  const discsIDs = ['f5cc15ea-67a8-3c6b-9887-d45ae13a3156', 'db6a41da-710b-36eb-a288-48b4b1c5b130',
  'd9f1ba4b-dfaf-4961-8f97-63c149b361a0', '495ab548-ef52-4dcf-a226-bc70b1ad7c86']
  let [discs, setDiscs] = useState(null);

  if(!discs) {
    Promise.all([getDisc(discsIDs[0]),
    getDisc(discsIDs[1]),
    getDisc(discsIDs[2]),
    getDisc(discsIDs[3])])
    .then(discs => setDiscs(discs));
    return <EntityList placeholder={true} size={4}/>
  }else {
    const items = discs.map((disc) => {
      const cover = (<CoverArt disc={disc} size={2}/>);
      const widget = (<span><FaEye className='icon'/> {Math.floor(Math.random() * 1000)}</span>)
      return {
        'cover': cover,
        'link': `/disc/${disc.id}`,
        'title': disc.title,
        'subtitle': disc.artist.name,
        'widget': widget
      }
    });
    const list = [{
      'items': items
    }];
    return <EntityList list={list}/>
  }
}

const PopularSongs = () => {
  const songsIDs = ['1e49a0d0-372e-459d-9c53-5d864186bb02', '5892ed7d-fed4-4f00-b72e-af1315fcb62d',
  '4d6473d8-a21b-47c0-9d2e-00d210d68f3a', '92b00514-f535-4b32-99ea-d74b9ccb416b']
  let [songs, setSongs] = useState(null);

  if(!songs) {
    Promise.all([getSong(songsIDs[0]),
    getSong(songsIDs[1]),
    getSong(songsIDs[2]),
    getSong(songsIDs[3])])
    .then(songs => setSongs(songs));
    return <EntityList placeholder={true} size={4}/>
  }else {
    const items = songs.map((song) => {
      const widget = (<span><FaEye className='icon'/> {Math.floor(Math.random() * 1000)}</span>);
      return {
        'cover': null,
        'link': `/song/${song.id}`,
        'title': song.title,
        'subtitle': song.artist.name,
        'widget': widget
      }
    });
    const list = [{
      'items': items
    }];
    return <EntityList list={list}/>
  }
}

export const Recomended = () => {
  // TODO crear una forma de obtener cosas populares
  // Esto es un por mientras hago todo el resto y la pagina de inicio no se vea tan vacia
  return (
    <Grid>
      <Row>
        <Col>
          <h3>Artistas Populares</h3>
          <PopularArtists/>
        </Col>
        <Col>
          <h3>Canciones Populares</h3>
          <PopularSongs/>
        </Col>
      </Row>
      <RowCol>
        <h3>Discos Populares</h3>
        <PopularDiscs/>
      </RowCol>
    </Grid>
  )
}