import React, { Component,PureComponent } from 'react';
import PropTypes from 'prop-types';
import {StyleSheet,Text,View,FlatList,TouchableOpacity,SectionList,RefreshControl} from 'react-native';
import {responsiveFontSize,responsiveWidth,responsiveHeight} from 'react-native-responsive-dimensions';
import {convertDateToHumanText} from './../../utils/DateUtils';
import Icon from 'react-native-vector-icons/FontAwesome5';
var moment=require('moment-timezone')
const momentJS=require('moment')
import I18n from "react-native-i18n"

import 'moment/locale/fr'
import 'moment/locale/es-us'
import 'moment/locale/en-au'
import 'moment/locale/en-ca'
import 'moment/locale/en-ie'
import 'moment/locale/en-il'
import 'moment/locale/en-nz'

let route=require('./../../route.json');
var theme=require('./../../utils/theme.json');

export class HistoryItem extends React.Component{

  constructor(props){
    super(props);
      this.state=this.initState();
    }
   initState(){
     var textTitle=' Transaction '+this.props.selfData.id;
    var textDescription=I18n.t('PHONE')+' '+this.props.selfData.phone+" "+I18n.t('DEMAND_TEXT_FIRST_PART')+' '+(this.props.selfData.montant)+' '+I18n.t('TO_')+' ';
    textDescription+=this.props.selfData.reseau;
    var today=new Date();
    var l=this.props.selfData.date_creation;
    let t=this.props.selfData.status;
    moment.locale(I18n.locale)
    var re= moment.tz(this.props.selfData.date_creation,'Etc/GMT+0').format();
       re=moment(re)
    return {
        title:textTitle,
        description:textDescription,
        status:this.props.selfData.status==='1'?I18n.t('TREAT'):I18n.t('NO_TREAT'),
        time:re.fromNow(),
        navigator:this.props.navigator,
        type:t,
        colorstate:t==='1'?'green':'red'
      }
   };

    render(){
        return (
            <TouchableOpacity onPress={()=>
                this.props.navigator.navigate(route.historyItemDetails,
                    {item:this.props.selfData}

            )}>
        <View style={style.content}>
           <Text style={style.title}>{this.state.title}</Text>
           <Text style={style.description}>{this.state.description}</Text>
           <View style={style.timeContent}>
           <Text style={{
               fontWeight: 'bold',
               marginLeft: 20,
               marginBottom: 10,
               color:this.state.colorstate,

           }}>{this.state.status}</Text>
           <Text style={style.time}>{this.state.time}</Text>
           </View>
           <View style={style.bottomSeparator}/>

       </View>
            </TouchableOpacity>
       )
    
    }
    
}
export class HistoryItemSectionned extends  PureComponent{
    _keyExtractor = (item, index) => item.id;
    _renderItem = ({item}) => (
        <HistoryItem
            navigator={this.props.navigator}
            selfData={item}
        />
    );
    constructor(props){
        super(props);
        this.state=this.initState();
    }
    render() {
        return (

            <SectionList
                sections={[
                    {title:'Demande traité',type:0,data:this.state.treat,size:this.state.conservetreat.length,expandState:this.state.istreatexpand},
                    {title:'Demande non traité',type:1,data:this.state.untreat,size:this.state.conserveuntreat.length,expandState:this.state.isuntreatexpand}
                ]}
                renderSectionHeader={({section: {title,type,data,size,expandState}}) => (
                    <TouchableOpacity onPress={()=>this.onPressedHeader(type)} style={{
                        backgroundColor:theme.accent,
                        justifyContent:'center',
                        alignItems:'center',
                        flexDirection:'row',flex:1,height:70,width:responsiveWidth(100)}}>
                    <View style={{
                        height:70,
                        justifyContent:'center',
                        flex:1,
                        width:responsiveWidth(100),
                    }}>
                    <Text style={{fontWeight: 'bold',
                        marginLeft:20,
                        fontSize:20,
                        color:'white'
                    }}>{title}</Text>
                       <Text style={{
                            fontWeight: 'bold',
                            marginLeft: 20,
                            fontSize: 16,
                            color: 'white'
                        }}>{size} demande(s)</Text>
                        </View>
                        <Icon name={expandState?'sort-up':'sort-down'} size={30} color={'white'} style={{marginRight:20}}/>
                    </TouchableOpacity>
                        )}
                style={style.listStyle}
                extraData={this.state}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
            />
        );
    }
    onPressedHeader(type){
        if(type===0){
            this.setState({istreatexpand:!this.state.istreatexpand,treat:this.state.istreatexpand?[]:this.state.conservetreat})
    }else{
            this.setState({isuntreatexpand:!this.state.isuntreatexpand,untreat:this.state.isuntreatexpand?[]:this.state.conserveuntreat})

        }
    }
    initState(){
        let data=this.props.list

        return {
            conservetreat:    data.filter(item=>item.statut===I18n.t('TREAT')),
            treat: data.filter(item=>item.statut===I18n.t('TREAT')),
            istreatexpand:true,
            conserveuntreat:    data.filter(item=>item.statut!==I18n.t('TREAT')),
            untreat: data.filter(item=>item.statut!==I18n.t('TREAT')),
            isuntreatexpand:true
        }
    }
}
export class HistoryListItem extends React.Component{
  _keyExtractor = (item, index) => item.id;

  _onPressItem = (id: string) => {
     
  };
  _renderItem = ({item}) => (
    <HistoryItem
        navigator={this.props.navigator}
      selfData={item}
    />
  );
  constructor(props){
    super(props);
    this.state=this.initState();
  }
  initState(){
      return {
          refreshing:false,
      }
  }
  render() {
    return (
      <FlatList
      style={style.listStyle}
        data={this.props.list}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      refreshControl={
          <RefreshControl
              refreshing={this.props.isRefreshing}
              colors={[theme.primary,theme.purpleLight,theme.reddeconnect,theme.accentLight]}
              onRefresh={this.props.refreshing}
          />
      }
      />
    );
  }

  _onRefresh(){
      this.setState({refreshing:true})
      setTimeout(()=>{this.setState({refreshing:false})},5000);
  }
}

const style=StyleSheet.create({
    content:{
        width:responsiveWidth(100),
        borderBottomColor: '#FFFFFF',
        flex:1,
        flexDirection: 'column',
        paddingTop: 10,
  
    },
    listStyle:{
      backgroundColor:'white'
    },
    bottomSeparator:{
        width:responsiveWidth(100),
        height:5,
        justifyContent:'center',
        alignSelf: 'center',
        backgroundColor:'#EEE',
    },
    title:{
      color:'#000',
      paddingLeft: 10,
      fontSize:responsiveFontSize(2.2)
    },
    description:{
      fontSize:responsiveFontSize(1.8),
      color:'#4f5b62',
      paddingLeft: 10,
    
    },
    timeContent:{
        justifyContent:'space-between',
        flex:1,
        marginTop: 10,
        marginBottom: 5,
        flexDirection:'row',
    },
    time:{
        fontWeight: 'bold',
        marginRight: 20,
        marginBottom: 10,
        color:theme.accent,
    },
    treat:{
  },
  
  });