import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'antd';
import {Track} from './components/songComponents/Track';
import {Header} from './components/mainComponents/Header';
import {Playlist} from './components/cardComponents//Playlist';
import {Footer} from './components/mainComponents/Footer';
import {CurrentTrack} from './components/songComponents/CurrentTrack';
import {SongsBlock} from './components/menuComponents/SongsBlock';
import { ISong, IAlbum, IGenre, IBand, IPlaylist, IAdvertisement } from './models/IModels';
import axios from 'axios';
import { PlaylistsBlock } from './components/menuComponents/PlaylistsBlock';
import { MenuBlock } from './components/mainComponents/MenuBlock';
import { getAds, getGenres, getPlaylists, getSongs } from './API/api';
import { AdBlock } from './components/mainComponents/AdBlock';


function App() {
  const [songs, setSongs] = React.useState<ISong[]>([]);
  const [albums, setAlbums] = React.useState<IAlbum[]>([]);
  const [genres, setGenres] = React.useState<IGenre[]>([]);
  const [bands, setBands] = React.useState<IBand[]>([]);
  const [playlists, setPlaylist] = React.useState<IPlaylist[]>([]);
  const [ads, setAds] = React.useState<IAdvertisement[]>([]);

  async function fetchData() {
    const responseSongs = getSongs();
    // const responseAlbums = await axios.get<IAlbum[]>('http://localhost:3000/albums');
    const responseGenres = getGenres();
    // const responseBands = await axios.get<IBand[]>('http://localhost:3000/bands');
    const responsePlaylists = getPlaylists();
    const responseAds = getAds();

    setSongs((await responseSongs).data);
    // setAlbums(responseAlbums.data);
    setGenres((await responseGenres).data);
    // setBands(responseBands.data);
    setPlaylist((await responsePlaylists).data);
    setAds((await responseAds).data);
  }

  useEffect(
    () => {
      fetchData();
    },
    []
  )
  
  const song = songs[1];

  return (
  
    <div className="App bg-slate-100">     
      <div id="app" className='bg-white'>
        <Header />
        <div id='main-content'>
          <MenuBlock playlists={playlists} songs={songs} albums={albums} genres={genres}/>
          <AdBlock ads={ads} />
          <CurrentTrack /> 
        </div>
        
        <Footer />
      </div>
      
    </div>
  );
}

export default App;
