import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import Icon from "react-native-vector-icons/MaterialIcons";
import CheckIcon from "react-native-vector-icons/SimpleLineIcons";
import colors from '../styles/colors';

export default class Cobertura extends Component{

    constructor(props) {
        super(props);
        this.state = {
          data: props.data,
          expanded : false,
        }
    }

  render() {
    const { handleOnPress, is_bichos } = this.props;
    const { nome, status, contratado, utilizado, disponivel, carencia_dias } = this.props.itemCobertura;

    return (
       <View style={{marginTop: 5}}>
            <TouchableOpacity style={styles.row} onPress={()=>this.toggleExpand()}>
                    <View style={ { flexDirection: 'row', alignItems: 'center', width: '90%', backgroundColor: 'transparent'}}>
                        <View style={{flexDirection: 'row', alignItems: 'center', width: '10%', backgroundColor: 'transparent'}}>
                                {status == 'COMPLETO' ?
                                <CheckIcon name={'check'} size={24} color={'#76D362'} />
                                :
                                status == 'INCOMPLETO' ?
                                <CheckIcon name={'close'} size={24} color={'#FF4D35'} />
                                :
                                <CheckIcon name={'exclamation'} size={24} color={'#FFAE2F'} />
                            }
                        </View>
                        <View style={{flexDirection: 'row', alignItems: 'center', width: '85%', backgroundColor: 'transparent'}}>
                             <Text numberOfLines={3} style={[styles.title]}>{nome}</Text>
                        </View>
                    </View>
                    <View  style={{flexDirection: 'row',backgroundColor: 'transparent', width: '10%', justifyContent: 'flex-end', alignItems: 'center'}}>
                             <Icon name={this.state.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={30} color={'#9e9e9e'} />
                    </View>
            </TouchableOpacity>
            <View style={styles.parentHr}/>
            {
                this.state.expanded &&
                <View style={{flex: 1}}>
                    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', margin: 10}}>
                        <Text style={ styles.labelContratoUtilizadoEDisponivel}>Contratado</Text>
                        <Text style={[styles.labelContratoUtilizadoEDisponivel, {borderRightWidth: 1, borderLeftWidth: 1, paddingBottom: 7, borderColor: colors.lightGray}]}>Utilizado</Text>
                        <Text style={ styles.labelContratoUtilizadoEDisponivel}>Disponível</Text>
                    </View>
                    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', margin: 10, marginTop: -16, marginBottom: 20,backgroundColor: 'transparent'}}>
                        <Text style={ styles.textContratoUtilizadoEDisponivel}>{contratado}</Text>
                        <Text style={ styles.textContratoUtilizadoEDisponivel}>{utilizado}</Text>
                        <Text style={ styles.textContratoUtilizadoEDisponivel}>{disponivel}</Text>
                    </View>
                    { is_bichos ?
                            <View style={[styles.childRow]}>
                                  <Text style={[styles.font]}>{carencia_dias}</Text>
                            </View>
                        :
                            <TouchableOpacity style={[styles.childRow, ]} onPress={handleOnPress}>
                                <Text style={[styles.font]}>Exibir procedimentos e carências</Text>
                                <Icon name={'arrow-forward'} size={19} color={'#5E5E5E'} />
                            </TouchableOpacity>
                }
                </View>
            }

       </View>
    )
  }

  onClick=(index)=>{
    const temp = this.state.data.slice()
    temp[index].value = !temp[index].value
    this.setState({data: temp})
  }

  toggleExpand=()=>{
    this.setState({expanded : !this.state.expanded})
  }

}

const styles = StyleSheet.create({
    textContratoUtilizadoEDisponivel: {
        flex: 1,
        textAlign: 'center',
        fontFamily: 'Poppins-SemiBold',
        color: '#686C71',
        fontSize: 15,
    },
    labelContratoUtilizadoEDisponivel: {
        flex: 1,
        textAlign: 'center',
        fontFamily: 'Poppins-SemiBold',
        color: colors.gray08,
        fontSize: 15,
    },
    font:{
        fontSize: 15,
        color: '#4E5053',
        fontFamily: 'Poppins-Medium',
        marginRight: 5,
    },
    title:{
        fontSize: 16,
        textAlign: 'left',
        marginLeft: 7,
        color: '#686C71',
        fontFamily: 'Poppins-SemiBold',
    },
    row:{
        marginBottom: 10,
        flexDirection: 'row',
        justifyContent:'space-between',
        minHeight: 60,
        flex: 1,
        paddingLeft:15,
        paddingRight:18,
        alignItems:'center',
        marginRight: 2,
        marginLeft: 2,
        flexDirection: 'row',
        zIndex: 1,
        backgroundColor: 'white',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.2,
        shadowRadius: 4,
        elevation: 3,
        borderTopLeftRadius: 10,
        borderBottomLeftRadius: 10,
        borderBottomRightRadius: 10,
        borderTopRightRadius: 10,
    },
    childRow:{
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        marginBottom: 15,
    },
    parentHr:{
        height:1,
        color: '#ffffff',
        width:'100%'
    },
});