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

import ArtistCard from "./ArtistCard";


const ArtistList = ({navigation, type}) => {
    // @ts-ignore
    let ARTISTS_LIST = useSelector((state) => state.ReducerArtist.artists);
    if(type == "search") {
        // @ts-ignore
        ARTISTS_LIST = useSelector((state) => state.ReducerArtist.artistsSearch);
    }

    useEffect(() => {
        console.log('ARTISTS_LIST has changed:', ARTISTS_LIST);
    }, [ARTISTS_LIST]);

    console.log("----")
    console.log(ARTISTS_LIST)
    return (
        <ScrollView>
            <FlatList
                data={ARTISTS_LIST}
                renderItem={({ item }) => (
                    <ArtistCard navigation={navigation} item={item} />
                )}
                keyExtractor={(item) => item.name}
            />
        </ScrollView>
    );


};

export default ArtistList;