class DetailedView extends Component{

    constructor(props){
        super(props);

        this.icons = {
            'up'    : require('../Images/Arrowhead.png'),
            'down'  : require('../Images/Arrowhead-Down.png')
        };

        this.state = {
            title       : props.title,
            expanded    : true,
            animation   : new Animated.Value(),
            details: []
        };
    }
     toggle(){
        let initialValue    = this.state.expanded? this.state.maxHeight + this.state.minHeight : this.state.minHeight,
            finalValue      = this.state.expanded? this.state.minHeight : this.state.maxHeight + this.state.minHeight;

        this.setState({
            expanded : !this.state.expanded
        });

        this.state.animation.setValue(initialValue);
        Animated.spring(
            this.state.animation,
            {
                toValue: finalValue
            }
        ).start();

    }

  _setMaxHeight(event){
        this.setState({
            maxHeight   : event.nativeEvent.layout.height
        });
    }

    _setMinHeight(event){
        this.setState({
            minHeight   : event.nativeEvent.layout.height
        });
    }

    componentWillMount(){
        fetch('https://www.mywebsite.com' + this.props.navigation.state.params.id )
        .then((response) => response.json())
        .then((responseData) =>
          this.setState({
              details:responseData
              })
              );
    }

    showDetailsFunction(){
         let icon = this.icons['down'];

        if(this.state.expanded){
            icon = this.icons['up'];
        }

            return this.state.details.map(detail =>
               <ScrollView>
               {detail.data.curriculum.map(curr =>
              <Animated.View
                style={[styles.container,{height: this.state.animation}]}>
                {curr.type == 'section'? (
                <View onLayout={this._setMinHeight.bind(this)}>
                <Card>
                <CardSection>
                <TouchableHighlight onPress={this.toggle.bind(this)} underlayColor="#f1f1f1">
                <Image style={styles.buttonImage} source={icon}></Image>
                </TouchableHighlight>
                <View style={styles.thumbnailContainerStyle}>
                <Text style={styles.userStyle}>
                    {curr.title}
                </Text>
                </View>

                </CardSection>
                </Card>
                </View>
            ): (<Text></Text>)}
            <View style={styles.body} onLayout={this._setMaxHeight.bind(this)}>
                    {this.props.children}
                        {curr.type== 'unit'? (
                    <Card>
                    <CardSection>
                    <Text>{curr.title}</Text>
                    </CardSection>
                    </Card>
                    ): (<Text></Text>)}
                </View>

            </Animated.View>
            )}
            </ScrollView>
            );
    }
    render(){

   return(
   <View>
   {this.showDetailsFunction()}
                </View>
        );
  }
}
const styles= StyleSheet.create({
    thumbnailContainerStyle:{
        marginLeft:10,
        marginRight:10,
        padding:10,
    },
    thumbnail_style :{
        height: 50,
        width:50
    },
    headerTextStyle :{
        fontSize :15
    },
    headerContentStyle:{
        flexDirection:'column' ,
        justifyContent: 'space-around'
    },
    userStyle:{
        fontSize:16,
        color:'#000000',
        fontWeight:'bold',
        marginLeft:-5

    },
    container   : {
        backgroundColor: '#fff',
        margin:10,
    },
    titleContainer : {
        flexDirection: 'row'
    },
    title       : {
        flex    : 1,
        padding : 10,
        color   :'#2a2f43',
        fontWeight:'bold'
    },

    buttonImage : {
        width   : 30,
        height  : 25,
        alignItems: 'flex-end'

    },
    body        : {
        padding     : 10,
        paddingTop  : 0
    }
});
export default DetailedView;