content: 
  'use strict';
  
  import React, { Component } from 'react';
  import { connect } from 'react-redux';
  
  import { openDrawer, closeDrawer } from '../../actions/drawer';
  import { popRoute } from '../../actions/route';
  
  
  import { setIndex } from '../../actions/list';
  import { replaceRoute, replaceOrPushRoute } from '../../actions/route';
  
  import PickerButton from '../PickerButton';
  
  import { Container, Header, Title, Content, Button, Icon,Text, View, Picker} from 'native-base';
  import {  TextInput,Alert } from 'react-native';
  import styles from './styles';
  import myTheme from '../../themes/base-theme';
  
  import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';
  
  var sqlite = require('react-native-android-sqlite')
  
  var radio_props = [
    {label: 'start', value: 0 },
    {label: 'continue', value: 1 },
    {label: 'finish', value: 2 }
  ];
  
  class BlankPage extends Component {
      constructor(props){
          super(props);
          this.state = {
              projectInfo : this.props.route.data,
              skill: [],
              skillchart: [],
              projectName: '',
              descriPtion: '',
              staTus: 0,
              editMode: false
          }
      }
      popRoute() {
          this.props.popRoute();
      }
      replaceRoute(route) {
          this.props.replaceRoute(route);
      }
  
      pushRoute(route, data) {
          this.props.navigator.push({
          id : route,
          data : data
          });
      }
  
      _initialrize()
      {
          this.setState({projectName: this.state.projectInfo.ProjectName});
          this.setState({descriPtion: this.state.projectInfo.Description});
      }
  
      _checkDB() {
      	  var _Self = this;
      	  let skillSelect = 'SELECT B.* FROM Skill_In_Project A, SkillChart B Where A.SkillId =B.SkillId AND A.ProjectId = ?';
      	  let Params = [this.state.projectInfo.ProjectId]
      		sqlite.query(skillSelect,Params)
      		.then((data) => {
      		    console.log("haha",data);
      		    var temp = [];
      			data.map((d , i) =>{
      				temp.push(d.Name);
      				_Self.setState({skill: temp});
      				console.log(_Self.state.skill);
      			})
  
      			}
  
      		)
      	}
  
  
      _Save()
      {
          let projectSelect= 'UPDATE Project SET ProjectName = ?, Description = ?, Status = ?, Sync = ? WHERE ProjectId = ?';
          let params = [this.state.projectName,this.state.descriPtion,this.state.staTus,0,this.state.projectInfo.ProjectId];
          sqlite.exec(projectSelect, params)
          sqlite.exec('DELETE FROM Skill_In_Project WHERE ProjectId = ?', [this.state.projectInfo.ProjectId])
  
          this.state.skill.map((item,index)=>{
              this.state.skillchart.map((sid,i)=>{
                  if(item === sid.value)
                  {
                      let Params = [sid.key,this.state.projectInfo.ProjectId];
                      sqlite.exec('INSERT INTO Skill_In_Project(SkillId,ProjectId) VALUES (?,?)', Params)
                      .then((_) => {
                          console.log('succsed skill');
                          }
                      )
                  }
  
              })
          })
  
          this.setState({editMode: false});
      }
  
      _Modify()
      {
          this.setState({editMode: true});
      }
  
      Cancel()
      {
          this.pushRoute('blankPage',this.state.projectInfo);
      }
  
      confirmDel()
      {
          if(this.state.editMode == false){
           Alert.alert(
             'Alert',
             'Do you want to delete this project?',
             [
               {text: 'Cancel', onPress: () => console.log('Cancel Pressed!')},
               {text: 'OK', onPress: () => this._Delete()},
             ]
             )
           }
      }
  
      _Delete()
      {
  
          let projectSelect= 'UPDATE Project SET Del = ? WHERE ProjectId = ?';
  //        let projectSelect= 'DELETE FROM Project WHERE ProjectId = ?';
          let skillSelect= 'DELETE FROM Skill_In_Project WHERE ProjectId = ?';
          let params = [this.state.projectInfo.ProjectId];
          sqlite.exec(projectSelect, [1,this.state.projectInfo.ProjectId])
          sqlite.exec(skillSelect, params)
  
  
          this.replaceRoute('home')
      }
      componentDidMount()
      {
          var gridArrays= [];
          console.log(this.props.route.data);
          this._checkDB();
          this._initialrize();
          sqlite.query('SELECT * FROM SkillChart',[])
          .then((data) => {
              data.map((d , i) =>{
                  gridArrays.push({value: d.Name,
                  key:d.SkillId
                  });
  
              })
              this.setState({
                  skillchart : gridArrays,
              });
              gridArrays=[];
              //console.log('data leng:',data.length);
              }
          )
      }
  	
      render() {
  
          const { props: { name, index, list } } = this;
  
          return (
              <Container theme={myTheme} style={{backgroundColor: '#ffffc9'}}>
                  <Header>
                     <Button transparent onPress={() => this.replaceRoute('home')}>
                         <Icon name='ios-arrow-back' />
                     </Button>
  
                     <Title>{(name) ? name : 'Modify Project'}</Title>
  
                     <Button transparent onPress={this.props.openDrawer}>
                         <Icon name='ios-menu' />
                     </Button>
                  </Header>
                  <Content padder>
                      <TextInput style={styles.pjname}
                      editable={this.state.editMode}
                      value={this.state.projectName}
                      onChangeText={(text) => this.setState({projectName: text})}
                      placeholder={'Project Name'}
                      maxLength={12}
                      multiline={false}
                  />
                  <View style={{flexDirection: 'row',marginTop: 10}}
                      accessible={false}>
                      <Text style={{fontSize: 18,color: '#514532'}}> Status       </Text>
  
                      <RadioForm buttonSize={10} buttonWrapStyle={{marginTop: 5}} disabled={!this.state.editMode} radio_props={radio_props} initial={this.state.projectInfo.Status} onPress={(value) => {this.setState({staTus:value})}} />
                  </View>
  
                     <PickerButton  pushRoute={(route) => this.pushRoute(route)} editable={this.state.editMode}  skill={this.state.skill} onChange={(value) => {
                         this.setState({skill : value});
                     }}/>
  
                  <TextInput
                      style={styles.dp}
                      editable={this.state.editMode}
                      value={this.state.descriPtion}
                      onChangeText={(text) => this.setState({descriPtion: text})}
                      placeholder={'Description'}
                      maxLength={100}
  
                      multiline={true}
                  />
                 {this.state.editMode ?(
                      <View style={{flexDirection: 'row', alignSelf:'center'}}>
                            <Button style={{alignSelf: 'center',marginTop: 15,marginRight: 20}} onPress={()=>{this._Save()}}>Save</Button>
                            <Button style={{alignSelf: 'center',marginTop: 15}} onPress={()=>{this.Cancel()}}>Cancel</Button>
                      </View>
                          )   :
                          (
                          <View style={{flexDirection: 'row', alignSelf:'center'}}>
                              <Button style={{alignSelf: 'center',marginTop: 15,marginRight: 20}} onPress={()=>{this._Modify()}}>Modify</Button>
                              <Button style={{alignSelf: 'center',marginTop: 15}} onPress={()=>{this.confirmDel()}}>Delete</Button>
                          </View>
                          )}
  
                  </Content>
              </Container>
          )
      }
  }
  
  function bindAction(dispatch) {
      return {
          openDrawer: ()=>dispatch(openDrawer()),
          closeDrawer: ()=>dispatch(closeDrawer()),
          replaceRoute:(route)=>dispatch(replaceRoute(route)),
          popRoute:(route)=>dispatch(popRoute(route)),
          replaceOrPushRoute:(route)=>dispatch(replaceOrPushRoute(route)),
          setIndex:(index)=>dispatch(setIndex(index))
      }
  }
  
  function mapStateToProps(state) {
      return {
          name: state.user.name,
          index: state.list.selectedIndex,
          list: state.list.list
      };
  }
  
  export default connect(mapStateToProps, bindAction)(BlankPage);
  