import React, { Component } from 'react';
import {
  Alert,
  StyleSheet,
  TouchableHighlight,
  Text,
  View
} from 'react-native';

import NavigationBar from 'react-native-navbar';

import Libs from './libs';
import studyRecord from './studyrecord';
import Quiz from './quiz';

export default class LevelStart extends Component {
  _pressAction(comp, libType) {
    const { navigator } = this.props;
    if (navigator) {
      if (libType == 'wrong' && this.props.context.record.wrong.size == 0) {
        Alert.alert('学霸君，没有错题可练哦！');

        return;
      }

      navigator.push({
        component: comp,
        context: {
          level: this.props.context.level,
          record: this.props.context.record,
          libType: libType
        }
      });
    }
  }

  _clearRecord() {
    Alert.alert(
      '清除学习记录', '清除【' + Libs[this.props.context.level].name + '】的学习记录吗？',
      [
        {text: '清除', onPress: () => {
          this.props.context.record.quizIndex = 0;
          this.props.context.record.wrongQuizIndex = 0;
          this.props.context.record.studied = new Set();
          this.props.context.record.wrong = new Set();

          studyRecord.save(this.props.context.level, this.props.context.record);

          this.setState({});
        }},
        {text: '取消'}
      ]
    );
  }

  render() {
    let level = this.props.context.level;
    let record = this.props.context.record;

    let title = '【' + Libs[level].name + '】';

    return (
      <View style={styles.container}>
        <NavigationBar
          title={{ title: title, style: styles.title }}
          leftButton={{
            title: '<返回',
            handler: this.props.navigator.pop
          }}
        />
        <Text style={styles.instructions}>
          共{Libs[level].total}题，考{Libs[level].quizCount}题，答对{Libs[level].passCount}题通过考试。
        </Text>
        <Text style={styles.instructions}>
          已经学习{record.studied.size}道题，错题库中有{record.wrong.size}道题。
        </Text>
        <View style={{flex: 1}}>
          <TouchableHighlight underlayColor='#eee' onPress={() => this._pressAction(Quiz, "study")}>
            <Text style={styles.buttonText}>
              继续学习
            </Text>
          </TouchableHighlight>
          <TouchableHighlight underlayColor='#eee' onPress={() => this._pressAction(Quiz, "wrong")}>
            <Text style={styles.buttonText}>
              练习错题
            </Text>
          </TouchableHighlight>
          <TouchableHighlight underlayColor='#eee' onPress={() => this._pressAction(Quiz, "exam")}>
            <Text style={styles.buttonText}>
              模拟考试
            </Text>
          </TouchableHighlight>
          <TouchableHighlight underlayColor='#eee' onPress={() => this._clearRecord()}>
            <Text style={styles.buttonText}>
              清除学习记录
            </Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: '#fff',
  },
  title: {
    color: '#000',
    fontSize: 20,
    fontWeight: 'bold',
  },
  instructions: {
    color: '#000',
    textAlign: 'center',
    margin: 10,
  },
  buttonText: {
    color: '#000',
    fontSize: 15,
    fontWeight: 'bold',
    margin: 10,
  },
});