import React from "react";
import {Alert, FlatList, TouchableNativeFeedback} from "react-native";
import ArtistCard from "./ArtistCard";
import StackNavigation from "../StackNavigation";
import {useNavigation} from "@react-navigation/native";

export class Artist {
    private _name: string;
    private _image: string;

    constructor(name: string, image: string) {
        this._name = name;
        this._image = image;
    }

    public get name(): string {
        return this._name;
    }

    public set name(value: string) {
        this._name = value;
    }

    get image(): string {
        return this._image;
    }

    set image(value: string) {
        this._image = value;
    }
}

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}) => {
    return (
        <FlatList data={ARTISTS_LIST} renderItem={({item}) =>
            <TouchableNativeFeedback onPress={() => {
                Alert.alert('You tapped the button!');
                navigation.navigate("ArtistDetail");
            }}>
                <ArtistCard item={item}/>
            </TouchableNativeFeedback>
        } keyExtractor={(item: Artist) => item.name}/>
    );
};

export default ArtistList;