import React, {useEffect, useState} from 'react'
import {connect} from 'react-redux'
import {Picker, Text} from 'native-base'
import { getDeckList, getModelList} from '../../actions/anki-get-actions';
import {selectDeck} from '../../actions/anki-set-actions';

const DeckPicker = props => {
    const [deckList, setDeckList] = useState([{name: "no decks", id: 0}]);
    useEffect(() => {
        props.getDeckList()
        props.getModelList()
    }, [])
    useEffect(() => {
        setDeckList(props.decks)
    }, [props.decks])
    return (
        <Picker onValueChange={id => props.selectDeck({id, deck: deckList[id]})} selectedValue={props.selectedDeck.id}>
            {deckList.map((deck, index) => (
                <Picker.Item label={deck.name} key={deck.id} value={index}/>
            ))}
        </Picker>
    )
}

export default connect(state => ({
    decks: state.anki.deckList,
    selectedDeck: state.anki.selectedDeck,
}),{
    getDeckList,
    selectDeck,
    getModelList
})(DeckPicker)