import React from "react";
import {FlatList} from "react-native";
import {useDispatch, useSelector} from 'react-redux';
import {useEffect} from 'react';

import ArtistCard from "./ArtistCard";
import {Artist} from "../../Model/Artist";
import {getArtistList} from "../../redux/actions/action"

/*const ARTISTS_LIST: Artist[] = [
    new Artist("Eminem", "https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"),
    new Artist("Kendrick Lamar", "https://images.genius.com/d6d96651b423fa5a83c38ee2a4c6c939.1000x1000x1.jpg"),
    new Artist("J. Cole", "https://images.genius.com/84a98a8d26b13b7311aa2359ebade757.1000x1000x1.jpg"),
];*/

const ArtistList = ({navigation}) => {
    const ARTISTS_LIST = useSelector(state => state.appReducer.artist);
    const dispatch = useDispatch();

    useEffect(() => {
        const loadArtist = async () => {
            await dispatch(getArtistList("em"));
        };
        loadArtist();
    }, [dispatch]);

    return (
        <>
            <FlatList data={ARTISTS_LIST} renderItem={({item}) =>
                <ArtistCard navigation={navigation} item={item}/>
            } keyExtractor={(item: Artist) => item.name}/>
        </>
    );
};

export default ArtistList;