'use strict';

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  ScrollView,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import {Container, Content, Input, List, Footer, FooterTab, Button, Icon} from 'native-base';
import {Actions} from 'react-native-router-flux';
var SearchBar = require('react-native-search-bar');



import AreaSpline from './js/charts/AreaSpline';
import Pie from './js/charts/Pie';
import Theme from './js/theme';
import data from './resources/data';

type State = {
  activeIndex: number,
  wagePerYear: any
}

var colors = [
  "#1f77b4", "#ff7f0e", "#2ca02c"//, "#d62728", "#9467bd",
 // "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
]

export default class StatsPage extends Component {

  state: State;

  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0,
      wagePerYear: data.wagePerYear,
      percent: data.certif[0].number,
      name: data.certif[0].name,
      curColor: colors[0],
	  initialWage: data.certif[0].initialWage,
	  currentWage: data.certif[0].currentWage
    };
    this._onPieItemSelected = this._onPieItemSelected.bind(this);
    this._shuffle = this._shuffle.bind(this);

  }

  _onPieItemSelected(newIndex){
    this.setState({...this.state, activeIndex: newIndex, wagePerYear: this._shuffle(data.wagePerYear), percent: data.certif[newIndex].number, name: data.certif[newIndex].name, curColor: colors[newIndex], initialWage: data.certif[newIndex].initialWage, currentWage: data.certif[newIndex].currentWage});

  }

  _shuffle(a) {
      for (let i = a.length; i; i--) {
          let j = Math.floor(Math.random() * i);
          [a[i - 1], a[j]] = [a[j], a[i - 1]];
      }
      return a;
  }

  renderFooter(){
    return (
      <Footer style={{backgroundColor:"#09507C"}}>
        <FooterTab>
          <Button transparent onPress={()=> Actions.FeedPage()} >
             <Icon name="ios-home" style={{color:"gray"}} />
          </Button>
          <Button transparent onPress={() => Actions.StatsPage()}>
             <Icon name='ios-stats' style={{color:"gray"}}/>
          </Button>
          <Button transparent>
             <Icon name='ios-chatboxes' style={{color:"gray"}}/>
          </Button>
          <Button  transparent onPress={() => Actions.PeopleList()}>
             <Icon name='ios-return-right'/>
          </Button>
        </FooterTab>
      </Footer>
    );
  }

  renderPercentage(){
    return (
      <View style={{marginLeft: 30, marginRight: 20}}>
        <Text><Text style={{fontSize: 35, color: this.state.curColor}}>{this.state.percent}%</Text> of all graduates </Text>
        <Text style={{marginLeft: 40}}> have a  <Text style={{fontSize: 30, color: this.state.curColor}}>{this.state.name}</Text> certificate</Text>
		<Text style={{marginLeft: 10}}> Average Starting Wage is  <Text style={{fontSize: 30, color: this.state.curColor}}>{this.state.initialWage}</Text> </Text>
		<Text style={{marginLeft: 40}}> Average Wage is  <Text style={{fontSize: 30, color: this.state.curColor}}>{this.state.currentWage}</Text> </Text>

      </View>
    );

  }

  render() {
    const height = 200;
    const width = 500;

    return (
      <Container style={{backgroundColor:"#DEEDF2"}}>
        <Content>
          <View style={{height: 70, backgroundColor:"#09507C"}}>
            <View style={{marginTop:20, marginLeft:30, marginRight:30}}>
              <SearchBar
                ref='searchBar'
                placeholder='Search'
                hideBackground={true}
                textFieldBackgroundColor="#DEEDF2"
              />
            </View>
          </View>
          <ScrollView>
            <View style={{backgroundColor:'#DEEDF2',marginTop: 21}} >
              <View style={{ marginLeft: 15, marginRight: 15}}>
                <Text style={styles.chart_title}>Distribution of Certificates</Text>
              </View>
              <Pie
                pieWidth={150}
                pieHeight={150}
                onItemSelected={this._onPieItemSelected}
                colors={Theme.colors}
                width={width}
                height={height}
                data={data.certif}
                style={{top: 30}}/>
              <View style={{borderColor:"white", borderTopWidth: 3, borderBottomWidth: 3, paddingTop: 20, paddingBottom: 20}}>
                {this.renderPercentage()}
              </View>
              <View>
                <Text style={{ marginTop: 10, marginLeft: 30, marginRight: 30, paddingTop: 15,textAlign: 'center',paddingBottom: 5,paddingLeft: 5,
                  fontSize: 15, backgroundColor:'#DEEDF2',color: 'grey', fontWeight:'bold',}}>Percentage of Graduates Graduated With {this.state.name} Over Time</Text>
              </View>
              <AreaSpline
                width={width}
                height={height}
                data={this.state.wagePerYear}
                color={Theme.colors[this.state.activeIndex]} />
            </View>
          </ScrollView>
        </Content>
        {this.renderFooter()}
      </Container>


    );
  }
}

const styles = {
  chart_title : {
    paddingTop: 15,
    textAlign: 'center',
    paddingBottom: 5,
    paddingLeft: 5,
    fontSize: 18,
    backgroundColor:'#DEEDF2',
    color: 'grey',
    fontWeight:'bold',
  }
}