import React from "react";
import { Text, TouchableOpacity, View, StyleSheet} from "react-native";
import Icon from './Icon';
import PropTypes from "prop-types";

class ToggleCard extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            visibility: false
        }
    }


    render() {
        return (
            <View style={{}}>
                <TouchableOpacity
                    onPress={() => this.setState({visibility: !this.state.visibility})}
                    style={[styles.containerStyle, {marginTop: this.props.marginTop, backgroundColor: this.props.backgroundColor, borderBottomColor: this.props.borderBottomColor}, this.props.containerStyle ]}>
                    <Icon name={this.props.iconName} class={this.props.iconClass} size={25} color={this.props.iconColor}/>
                    <View style={{flex: 1, paddingHorizontal: 10}}>
                        <Text style={[{fontSize: 17, color: this.props.textColor}, this.props.titleStyle]}>{this.props.title}</Text>
                        { this.props.subtitle != null ?
                            <Text style={{fontSize: 13, fontStyle: 'italic'}}> {this.props.subtitle}</Text>
                            :
                            undefined
                        }
                    </View>
                    {this.state.visibility ?
                        <Icon name={'arrow-drop-up'} size={22} color={this.props.iconColor}/>
                        :
                        <Icon name={'arrow-drop-down'} size={22} color={this.props.iconColor}/>
                    }
                </TouchableOpacity>

                <View>
                    {this.state.visibility ?
                        <View style={[ styles.contentContainer, this.props.contentContainerStyle ]}>
                            {this.props.children !== undefined ?
                                this.props.children :
                                <Text style={{fontSize: 11}}> Sem informações </Text>
                            }

                        </View>
                        :
                        undefined

                    }

                </View>

            </View>

        )
    }
}

const styles= StyleSheet.create({
    containerStyle: {
        flex: 1,
        alignItems: 'center',
        flexDirection: 'row',
        height: 50,
        borderRadius: 0,
        paddingHorizontal: 10,
        borderBottomWidth: 0,

    },
    contentContainer: {
        paddingHorizontal: 7,
        marginVertical: 6
    }
});

ToggleCard.propTypes = {
    title: PropTypes.string.isRequired,
    subtitle: PropTypes.string,
    iconName: PropTypes.string,
    iconClass: PropTypes.string,
    marginTop: PropTypes.number,
    iconColor: PropTypes.string,
    backgroundColor: PropTypes.string,
    textColor: PropTypes.string,
    containerStyle: PropTypes.object,
    titleStyle: PropTypes.object,
    contentContainerStyle: PropTypes.object,
    borderBottomColor: PropTypes.string
};

ToggleCard.defaultProps = {
    marginTop: 10,
    iconColor: 'white',
    textColor: 'white',
    backgroundColor: '#125f85',
    subtitle: null,
};


export default ToggleCard;
