import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { getCards } from './../../../actions/cards'

import CardPreview from './cardPreview';
import Spinner from './../../common/spinner';


class CardsPage extends React.Component {
    componentDidMount() {
        const { getCards } = this.props;
        getCards();
    }

    render() {
        const { cards: { isFetching, data, error }, getCards } = this.props;
        console.log('Pasha lox', isFetching, data, error);
        console.log('PROPS', this.props);

        return (
            isFetching
                ?
                <Spinner />
                : data
                    ?
                    <div className='page' >
                        {data.map(card => (
                            <CardPreview
                                title={card.name}
                                cover={card.image}
                                action={null}
                            />))}
                    </div >
                    : error
                        ?
                        <div className='page' >
                            Error handler
                        </div >
                        :
                        null
        )
    }
}

const mapStateToProps = state => ({
    cards: state.cards
});
const mapDispatchToProps = dispatch => bindActionCreators({ getCards }, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(CardsPage);