/**@flow
 * Created by shiyunjie on 2018/8/18.
 */
import React, { Component, Element } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableWithoutFeedback,
  Animated,
  Dimensions,
} from 'react-native';

const screenWidth = Dimensions.get('window').width


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    overflow: 'hidden',
    marginBottom: 12,
  },
  titleContainer: {
    flexDirection: 'row',
    width: screenWidth,
  },
  button: {
    width: 40,
    height: 80,
    justifyContent: 'center',
    paddingRight: 15,
    alignItems: 'flex-end',
  },
  body: {
    padding: 10,
    paddingTop: 0,
  },
  orderNum: {
    fontSize: 16,
    color: '#666',
    marginTop: 3,
  },
  part_text: {
    height: 80,
    width: screenWidth,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'stretch',
  },
})

type Props = {
  title : string,
  containerHeight : number,
  name : string,
  index : number,
  children? : Element<*>,
  amount? : string,
  isApprobation? : string,
  titleStyle?: Object,
  policyTitleColor?: Object,
  upIcon:Object,
  downIcon:Object,
}

class Panel extends Component {
  constructor(props : Props) {
    super(props)

    this.icons = {
      'up': props.upIcon,
      'down': props.downIcon,
    }

    this.state = {
      expanded: false,
      animation: new Animated.Value((this.props.containerHeight || 80)),
    };
  }


  setMaxHeight = (event) => {
    this.setState({
      maxHeight: event.nativeEvent.layout.height,
    })
  }

  setMinHeight = (event) => {
    this.setState({
      minHeight: event.nativeEvent.layout.height,
    })
  }

  toggle = () => {
    const initialValue =
      this.state.expanded ? this.state.maxHeight + this.state.minHeight : this.state.minHeight
    const 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()
  }

  render() {
    let icon = this.icons.down

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

    return (
      <Animated.View
        style={[styles.container, { height: this.state.animation }]}
      >
        <View
          style={styles.titleContainer}
          onLayout={this.setMinHeight}
        >
          <TouchableWithoutFeedback
            onPress={this.toggle}
          >
            <View
              style={[styles.part_text, this.props.titleStyle, !!this.props.containerHeight ? {height: this.props.containerHeight}: {}]}
            >
              <View
                style={{
                  flex: 1,
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'flex-start',
                  paddingLeft: (15),
                }}
              >
                <Text style={[styles.orderNum, this.props.policyTitleColor]} >{this.props.title || '标题'}</Text>
              </View>
              <View style={[styles.button,!!this.props.containerHeight ? {height: this.props.containerHeight}: {}]} >
                {icon}
              </View>
            </View>
          </TouchableWithoutFeedback>
        </View>
        <View style={styles.body} onLayout={this.setMaxHeight} >
          {this.props.children}
        </View>
      </Animated.View>
    )
  }
}

export default Panel
