import React, { Component } from 'react';
import {
    LayoutAnimation,
    Text,
    TouchableWithoutFeedback,
    View
} from 'react-native';
import { connect } from 'react-redux';
import { CardSection } from './common';
import * as actions from '../actions';

class ListItem extends Component {
    componentWillUpdate(){
        LayoutAnimation.spring();
    }

    renderDescription(){
        const { library, expanded } = this.props;

        if (expanded) {
            return (
                <CardSection>
                    <Text>
                        {library.item.description}
                    </Text>
                </CardSection>

            );
        }
    }

    render () {
        const { id, title } = this.props.library.item;
        return(
            <TouchableWithoutFeedback
             onPress={() => this.props.selectLibrary(id)}
             >
                <View>
                    <CardSection >
                        <Text style={styles.titleStyle}>
                            {title}
                        </Text>
                        {this.renderDescription()}
                 </CardSection>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

const styles = {
    titleStyle: {
        fontSize: 18,
        paddingLeft: 15
    }
};

const mapStateToProps = (state, ownProps) => {
    const expanded = state.selectedLibraryId === ownProps.library.item.id

    return { expanded };
}

export default connect(mapStateToProps, actions)(ListItem);