import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity
} from "react-native";

export default class Comment extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      text: '',
      input: false,
      default: '写评论'
    };
  }
  render() {
    return (
      <View style={styles.courseComment}>
        <View style={[styles.padding, styles.title]}>
          <Text style={styles.font}>{this.props.title}</Text>
          <TouchableOpacity onPress={() => this.comments()}>
            <View style={[ styles.button, styles.center ]}>
              <Image source={require('../images/courseDetails/comment.png')} style={styles.iconSize} />
              <Text>写评论</Text>
            </View>
          </TouchableOpacity>
        </View>
        <View style={[ styles.padding ]}>
          <View style={[ styles.title ]}>
            <View style={[ styles.center ]}>
                <Image style={[styles.headImg ]}></Image>
                <View>
                  <Text style={{ fontSize: 16, color: '#373737' }}>小幸运</Text>
                  <Text style={{ fontSize: 14, color: '#7F7F7F' } }>2019-07-05</Text>
                </View>
            </View>
            <View style={[ styles.center ]}>
              <Image source={require('../images/courseDetails/reply.png')} style={styles.reply} />
              <Text>回复</Text>
            </View>
          </View>
          <View style={ styles.padding }>
            <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
          </View>
          <View style={[ styles.padding, styles.column ]}>
            <Text style={ styles.color }>卡通小熊</Text>
            <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
          </View>
        </View>
        {
            this.state.input ?
            <View style={[ styles.input, this.state.fullStyle]}>
            <TextInput
              style={{height: '100%', borderColor: '#DFDFDF', borderWidth: 1, width: '90%', backgroundColor: '#fff', borderRadius: 6, padding: 0, textAlignVertical: 'top', padding: 10}}
              onChangeText={(text) => this.setState({text})}
              value={this.state.text}
              numberOfLines={7}
              multiline = {true}
              autoFocus = {true}
              defaultValue= {this.state.default}
            />
            <Text style={{ color: '#58A8FA', fontSize: 18}}>发送</Text>
          </View>
          :
          null
        }
      </View>
    );
  }
  comments() {
    this.setState({
      input: true
    })
  }
}

const styles = StyleSheet.create({
  courseComment: {
    width: '100%',
    backgroundColor: '#fff',
    marginTop: 8,
    marginBottom: 60
  },
  padding: {
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 10,
    paddingBottom: 10,
  },
  title: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  font: {
    fontSize: 24,
    color: 'black',
    fontWeight: 'bold',
  },
  center: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    width: 98,
    height: 28,
    fontSize: 20,
    borderRadius: 28,
    color: 'black',
    backgroundColor: '#F0F1F5'
  },
  headImg: {
    width: 40,
    height: 40,
    backgroundColor: "red",
    marginRight: 10,
    borderRadius: 40
  },
  iconSize: {
    width: 20,
    height: 20,
    marginRight: 10
  },
  reply: {
    width: 16,
    height: 15,
    marginRight: 5
  },
  courseFont: {
    color: '#373737',
    fontSize: 16
  },
  column: {
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: '#F3F6FF'
  },
  color: {
    color: '#518AD1'
  },
  input: {
    width: '100%',
    height: 124,
    backgroundColor: '#F9F9F9',
    paddingLeft: 18,
    paddingTop: 18,
    paddingBottom: 18,
    paddingRight: 24,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end'
  }
});