import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import MyTitle from '../MyTitle';
import MyButton from '../MyButton';
import MyRecord from '../MyRecord';

class RangePKRecord extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    this.props.navigation.setOptions({
      headerBackVisible: false,
    });
  }

  confirm = () => {
    this.props.navigation.navigate('联网自习');
  };

  render() {
    const {numberTop, numberCentre, numberBottom, range} =
      this.props.route.params;

    return (
      <View style={styles.container}>
        <MyTitle
          containerStyle={styles.myTitle.containerStyle}
          title="本次自习结束"
        />
        <MyRecord
          containerStyle={styles.myRecord.containerStyle}
          text={{
            textTop: '本次您总共学习了 ' + numberTop + ' 分钟',
            textCentre: '在 ' + range + ' 区域的排名是 ' + numberCentre,
            textBottom: '获得了 ' + numberBottom + ' 点经验',
          }}
        />
        <MyButton
          title="确认"
          buttonStyle={styles.myButton.buttonStyle}
          buttonEnabled={styles.myButton.buttonEnabled}
          onPress={this.confirm}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F2E2CE',
    flex: 1,
  },
  myTitle: {
    containerStyle: {
      flex: 1,
    },
  },
  myRecord: {
    containerStyle: {
      flex: 3,
    },
  },
  myButton: {
    buttonEnabled: {
      backgroundColor: '#e1c2a1',
      borderColor: '#bf7636',
    },
    buttonStyle: {
      width: '60%',
      borderRadius: 10,
      borderWidth: 3,
    },
  },
});

export default RangePKRecord;