/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet,AppState,FlatList,ProgressBarAndroid,TouchableOpacity, Text, View} from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {responsiveFontSize,responsiveHeight,responsiveWidth} from 'react-native-responsive-dimensions';
import {HistoryListItem,HistoryItemSectionned} from './HistoryItem';
import {credrequester} from './../../route.json';
import {loadDemandeCredit,loadMyDemandeCredit} from './../../webservice/HistoryRequestApi';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import BaseScreen from './../../screens/BaseScreen'
import Button from 'apsl-react-native-button'
import {readUser} from "../../webservice/AuthApi";

let route=require('./../../route.json')
let moment=require('moment-timezone')
let theme=require('./../../utils/theme.json')
import {primary,primaryDark,accent,purpleLight,primaryLight} from './../../utils/theme.json';
import IndicatorViewPager from "rn-viewpager/viewpager/IndicatorViewPager";
import {PagerTabIndicator,PagerTitleIndicator,PagerDotIndicator} from 'rn-viewpager'
type Props = {};
var sortIcons;
var sectionIcons;
import I18n from 'react-native-i18n'
import {IlinkEmitter} from "../../utils/events";
require('./../../utils/Translations')
import { SinglePickerMaterialDialog } from 'react-native-material-dialog';
import {Header} from "react-native-elements";
import {withNavigationFocus} from "react-navigation";
class History extends BaseScreen {
    static navigatorStyle = {
        navBarBackgroundColor: primary,
        statusBarColor: primaryDark,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF',
            contextualMenuStatusBarColor:theme.accent,
            contextualMenuBackgroundColor: theme.accentLight,
            contextualMenuButtonsColor: '#ffffff'

    };
    static navigationOptions =({navigation})=> {
        return {
            title:I18n.t('CREDIT_MANAGE'),
            drawerLabel: navigation.getParam('name',I18n.t('CREDIT_MANAGE')),
        drawerIcon: ({ tintColor }) => (
            <Icon
                name={'credit-card'}
                size={24}
            />
        ),
    }};

    static options(passProps){
        return {
            topBar:{
                visible:true,
                drawBehind:false,
                background:{
                    color:theme.primaryDark
                }
            }
        }
    }

    constructor(props) {
        super(props, true);
        this.state = this.initState();
        readUser().then((user)=>{this.setState({user:user})})
        this._populateIcons().then(() => {
          });
        IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
        this.refreshData();
    };

    navigationButtonPressed({ buttonId }) {
        if (buttonId === 'id') {
            this.showFilter();
        }else if(buttonId==='sectionned'){
            this.setState({isSectionned:!this.state.isSectionned})
        }
    }
    updateLangue(){
        this.props.navigation.setParams({name:I18n.t('CREDIT_MANAGE')})
        this.forceUpdate()
    }
    onNavigatorEvent(event) {
        if (event.type === 'NavBarButtonPress') {
            if (event.id === 'id') {
                this.showFilter();
            }else if(event.id==='sectionned'){
                this.setState({isSectionned:!this.state.isSectionned})
            }
        }else{
            switch(event.id) {
                case 'willAppear':
                    this.refreshData()
                        break;
                    break;
                case 'didAppear':
                    break;
                case 'willDisappear':
                    break;
                case 'didDisappear':
                    break;
                case 'willCommitPreview':
                    break;
            }
        }
    }

    showFilter() {

        /*if (this.state.filter) {
            Navigation.mergeOptions(route.stackRoot,
                {
                topBar: {
                    rightButtons: [
                        {
                            title: 'Non Traité',
                        },
                        {
                            title: 'Traité',
                        },
                        {
                            title: 'Période',
                        },
                        {
                            title: 'Tout',
                        },
                        {
                            title: 'Trier par',
                        },
                        {
                            title: '',
                        },
                    ],
                    onButtonPressed: (index) => {
                        let data = this.state.conserve
                        console.log(index)
                        console.log(data);

                        if (data !== null) {
                            let filtre = "";
                            if (index < 2) {
                                switch (index) {
                                    case 0:
                                        filtre = I18n.t('NO_TREAT')
                                        break;
                                    case 1:
                                        filtre = I18n.t('TREAT');
                                        break;

                                }
                                let fi = data.filter(item => item.statut === filtre)
                                this.setState({listdata: fi, filter: true})
                            } else if (index === 2) {
                                this.setState({panelVisible: true})
                            } else {
                                this.setState({listdata: data, filter: false})
                            }
                        }
                    }
                }}
            );

        } else {
            Navigation.mergeOptions(route.stackRoot,
                {
                    topBar: {
                        rightButtons: [
                            {
                                title: I18n.t('NO_TREAT'),
                            },
                            {
                                title: I18n.t('TREAT'),
                            }
                            , {
                                title: I18n.t('PERIOD'),
                            },
                            {
                                title: '',
                            },
                            {
                                title: 'Trier par',
                            }, {
                                title: '',
                            },
                        ],
                        onButtonPressed: (index) => {
                            let data = this.state.conserve
                            if (data != null && data.length > 0) {
                                var filtre = "";
                                if (index < 2) {
                                    switch (index) {
                                        case 0:
                                            filtre = I18n.t('NO_TREATED');
                                            break;
                                        case 1:
                                            filtre = I18n.t('TREATED');
                                            break;

                                    }
                                    let fi = data.filter(item => item.statut === filtre)
                                    this.setState({listdata: fi, filter: true})
                                } else if (index === 2) {
                                    this.setState({panelVisible: true})
                                    this.props.navigator.showContextualMenu(
                                        {
                                            rightButtons: [
                                                {
                                                    title: I18n.t('CANCEL'),
                                                },
                                                {
                                                    title: I18n.t('FILTER'),
                                                },

                                            ],
                                            onButtonPressed: (index) => {
                                                console.log(index)

                                                switch (index) {
                                                    case 1:
                                                        let {dateend, datestart} = this.state;
                                                        this.onfilterPress();
                                                }
                                                this.setState({panelVisible: false});
                                            }
                                        }
                                    );
                                } else {
                                    this.setState({listdata: data, filter: false})
                                }
                            }
                        }
                    }
                }
            );

        }*/
    }

    _populateIcons = function () {
        return new Promise(function (resolve, reject) {
            Promise.all(
                [
                    Icon.getImageSource('sort', 30),
                    Icon.getImageSource('layer-group', 30),
                ]
            ).then((values) => {
                sortIcons = values[0];
                sectionIcons=values[1];
                resolve(true);
            }).catch((error) => {
                console.log(error);
                reject(error);
            }).done();
        });
    };

    initState() {
        return {
            user:{},
            listdata: [],
            listdataSend:[],
            conserve: [],
            appState: AppState.currentState,
            filter: false,
            sortIcons: null,
            panelVisible: false,
            filder_disable: true,
            datestartformated: 'La date de debut',
            dateendformated: 'La date de fin',
            datestart: null,
            dateend: null,
            isLoaded:false,
            isSectionned:false,
            isDateTimePickerVisible: false,
            isDateEndTimePickerVisible: false
        }
    }

    updateList(data: Array) {
        if (!this.state.filter) {
            let rev = data.reverse()
            this.setState({listdata: rev, conserve: rev, isLoaded: true});
        }
    }
    updateMyList(data) {
        if (!this.state.filter) {
            let rev = data.reverse()
            this.setState({listdataSend: rev, conserve: rev, isLoaded: true});
        }

    }
    componentDidMount() {
        AppState.addEventListener('change', this._handleAppStateChange);
    }

    componentWillUnmount() {
        AppState.removeEventListener('change', this._handleAppStateChange);

    }
    _handleAppStateChange = (nextAppState) => {
        if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
        }
        this.setState({appState: nextAppState});
    }
    renderList(list:Array) {
        if(this.state.isLoaded){
            let data = list;
        if(data!==null) {
            if (data.length > 0) {
                return (<HistoryListItem
                    list={list}
                    refreshing={()=>{this.refreshData()}}
                    isRefreshing={this.state.isRefreshing}
                    navigator={this.props.navigation}
                    style={styles.listbackground}/>)
            } else if (this.state.filter) {

                return (
                    <View style={styles.emptyListe}>
                        <Text>{I18n.t('NO_ITEM_REQUEST')}</Text>
                    </View>
                )
            }else if(data.length===0){
                return (
                    <View style={styles.emptyListe}>
                        <Text>{I18n.t('NO_ITEM_REQUEST')}</Text>
                    </View>
                )
            } else {
                return (
                    <View style={styles.emptyListe}>
                        <ProgressBarAndroid/>
                        <Text>{I18n.t('LOADING_DOTS')}</Text>
                    </View>
                )
            }
        }else {
            return (
                <View style={styles.emptyListe}>
                    <Text>{I18n.t('EMPTY_LIST_REQUEST')} </Text>
                </View>
            )

        }

    }else if(list.length===0){
            return (
                <View style={styles.emptyListe}>
                    <Text>Aucuns éléments ne corresponds</Text>
                </View>
            )
        }

    }
    componentDidUpdate(prevProps) {
        if (prevProps.isFocused !== this.props.isFocused && this.props.isFocused) {
            this.refreshData()
        }
    }

    render() {

        return (
            <View style={{flex:1,marginBottom:20}}
            >
               
            <IndicatorViewPager
                style={{flex:1}}
                indicator={
                    this.state.user.category==="geolocated"?this._renderTabGeolocated():
                        this.state.user.category==='hyper'?this._renderTabHyper()
                                        :this._renderTabs()}
            >
                {this.state.user.category!=="hyper"?this._renderListDemandsSend():null}
                {this.state.user.category!=="geolocated"?this._renderListDemandReceive():null}
            </IndicatorViewPager>
            </View>
                );

    }
    renderSectionnedList(list) {

        if (this.state.isLoaded) {
            let data =list;
            if (data !== null) {
                if (data.length > 0) {
                    return (          <HistoryItemSectionned
                        list={list}
                        navigator={this.props.navigator}
                        style={styles.listbackground}/>)
                } else if (this.state.filter) {

                    return (
                        <View style={styles.emptyListe}>
                            <Text>{I18n.t('NO_ITEMS_REQUEST')}</Text>
                        </View>
                    )
                } else {
                    return (
                        <View style={styles.emptyListe}>
                            <ProgressBarAndroid/>
                            <Text>{I18n.t('LOADING_DOTS')}</Text>
                        </View>
                    )
                }
            } else {
                return (
                    <View style={styles.emptyListe}>
                        <Text>{I18n.t('EMPTY_LIST_REQUEST')}</Text>
                    </View>
                )

            }
        }
    }
    renderLoading(){
        return (<View><ProgressBarAndroid/><Text>{I18n.t('LOADING_DOTS')}</Text></View>)
    }
    showSlidingUpPanel() {
      /*  return (<SlidingUpPanel
            style={styles.slidingup}
            height={responsiveHeight(100)}
            visible={this.state.panelVisible}
            ref={(c) => this.panel = c}
            draggableRange={{top: responsiveHeight(100), bottom: 0}}
            onRequestClose={() => this.setState({panelVisible: false})}>
            <View style={styles.container}>
                {this.showSlidingUpView()}
            </View>
        </SlidingUpPanel>)
    }

    showSlidingUpView() {
      /*  return (
            <View style={datefilter.container}>
                <View stlye={datefilter.content}>
                 <DatepickerRange
                        styles={{
                            borderColor: 'transparent',
                            borderRadius: 0,
                            margin: 10,
                            height:responsiveWidth(50)
                        }}
                        initialMonth='201801'
                        onSelect={(fromdate,untildate)=>this._handleDatePicked(fromdate,untildate)}
                        dayHeadings={['D', 'L', 'M', 'M', 'J', 'V', 'S']}
	                    maxMonth={12}
                        startdate={moment('20180101').format('YYYYMMDD')}
                        untilDate='20181231'
                        minDate='20180101'
                        maxDate='20181231'
	                    buttonColor='green'
                        showReset={false}
                showClose={false}
                placeHolderStart= 'Date de debut'
                placeHolderUntil= 'Date fin'
                selectedBackgroundColor= 'green'
                selectedTextColor='white'
                    />
            </View>
            </View>

                )*/
    }

    onfilterPress() {
        let {datestart, dateend} = this.state;
        let data = this.state.conserve;

        if (data !== null) {
            data = data.filter(item => {
                let mda = moment(item.dateAjout)
                return moment(item.dateAjout).isAfter(moment(datestart).toDate()) && (mda.isBefore(moment(dateend).toDate()))
            })

            this.setState({listdata: data, panelVisible: false, filter: true})
        }

    }

    _showDateTimePicker = (type) => {
        if (type === 1)
            this.setState({
                isDateTimePickerVisible: true
            });
        else this.setState({
            isDateEndTimePickerVisible: true
        });
    }
    _showDateEndPicker = () => this.setState({isDateEndTimePickerVisible: true});

    _hideDateTimePicker = () => this.setState({isDateTimePickerVisible: false, isDateEndTimePickerVisible: false});
    _handleDatePicked = (fromdate, enddate) => {
        console.log([fromdate,enddate]);

        this.setState({
            datestart: fromdate,
            datestartformated: moment(fromdate).format('dddd Do ,MMMM YYYY'),
            dateend: enddate,
            dateendformated: moment(enddate).format('dddd Do ,MMMM YYYY')
        });
        let startdate = this.state.datestart;
        let enddatemo = moment(enddate);
        let dif = moment(enddatemo).diff(startdate);
        if (dif < 0) {
            this.setState({filder_disable: true});
            this.props.navigator.showSnackbar({
                text: I18n.t('DATE_WRONG'),
                duration: 'long',
                backgroundColor: 'red',
                textColor: 'white'
            })
        } else {
            this.setState({filder_disable: false});
        }

        this._hideDateTimePicker();
    };

    printOptions() {
        if(this.state.user.category==="hyper"){
         return (<ActionButton buttonColor={accent}>
            <ActionButton.Item buttonColor={purpleLight} title={I18n.t('SAVE_HISTORY')} onPress={() => {

                }}>
                    <Icon name="save" style={styles.actionButtonIcon}/>
                </ActionButton.Item>
            </ActionButton>);
        }else{
            return ( <ActionButton buttonColor={accent}>
                <ActionButton.Item buttonColor={primary} title={I18n.t('MAKE_REQUEST')}
                                   onPress={() => {
                    this.props.navigation.navigate(route.credrequester)
                                   }}
                >
                    <Icon name="edit" style={styles.actionButtonIcon}/>
                </ActionButton.Item>
                <ActionButton.Item buttonColor={purpleLight} title={I18n.t('SAVE_HISTORY')} onPress={() => {

                }}>
                    <Icon name="save" style={styles.actionButtonIcon}/>
                </ActionButton.Item>
            </ActionButton>)
        }
    }

    _renderListDemandsSend() {
        return (   <View style={styles.container}>
                {
                    this.state.isLoaded?
                        this.state.isSectionned?
                            this.renderSectionnedList(this.state.listdataSend):
                            this.renderList(this.state.listdataSend):this.renderLoading()
                }
                {this.printOptions()}
                {this.showSlidingUpPanel()}
            </View>
        )
    }

    _renderListDemandReceive() {
        return (   <View style={styles.container}>
                {
                    this.state.isLoaded?
                        this.state.isSectionned?
                            this.renderSectionnedList(this.state.listdata):
                            this.renderList(this.state.listdata):this.renderLoading()
                }
                {this.printOptions()}
                {this.showSlidingUpPanel()}
            </View>
        )
    }

    _renderTabGeolocated() {
        let tabs = [{
            text: I18n.t('DEMANDE_SEND'),
        }]
        return <PagerTabIndicator
            style={{
                height:responsiveHeight(8)
            }}
            tabs={tabs} />;
    }

    _renderTabHyper() {
        let tabs = [{
            text:I18n.t('DEMANDE_RECEIVE'),
        }]
        return <PagerTabIndicator
            style={{
                height:responsiveHeight(8)
            }}
            tabs={tabs} />;
    }

    _renderTabs() {
        let tabs = [{
            text: I18n.t('MY_DEMANDE'),
            iconSource:this.state.usersicon
        },{
            text: I18n.t('DEMANDE_RECEIVE'),
            iconSource:this.state.charticon
        }]
        return <PagerTabIndicator
            style={{
                height:responsiveHeight(8)
            }}
            tabs={tabs} />;
    }


    refreshData() {
        this.setState({isRefreshing:true})
        loadDemandeCredit().then((data) => {
            if(data.success!==undefined) {
                this.updateList(data.demands);
                this.setState({isRefreshing:false})
            }
        });
        loadMyDemandeCredit().then((data)=>{
            if(data.success!==undefined) {
                this.setState({isRefreshing:false})
                this.updateMyList(data.demands)
            }
        })
    }
}
export default withNavigationFocus(History);
const datefilter=StyleSheet.create({
    titleHeader:{
      fontSize:20,
      fontWeight:'bold',
      color:'black',
        flex:1,
    },
    datetitle:{
      fontSize:17,
      color:'black',
        marginLeft:responsiveWidth(2),
    },
    datetext:{
      fontSize:16,
        marginLeft:responsiveWidth(5)
    },
    content:{
        flex:2,

    },
    btnContainer:{
        flexDirection:'row',
        width:responsiveWidth(100),
        alignSelf:'flex-end',
        flex:2,
    },
    btn:{
        flex:1,
        borderColor:'transparent',
        borderRadius:0,
    },
    btntext:{
        fontWeight:'bold',
        color:accent
    },
    container:{
        flex:1,
        justifyContent:'space-evenly'
    }
})
const styles = StyleSheet.create({
    slidingup:{
      width:responsiveHeight(100),
    },
    root:{
      flex:1,
    },
  container: {
    flex: 1,
    backgroundColor:'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
    emptylist:{
      flex:1,
        justifyContent:'center',
        alignItems:'center'
    },
  backgroundd_drawer:{
      backgroundColor:'#000',
  },
  listbackground:{
  },
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
    dateText:{
        marginTop:20,
        marginLeft:responsiveWidth(13),
        marginBottom:20,
        fontSize:17,
    },
    titlecontent:{
        fontSize:17,
        marginLeft:responsiveWidth(10),

        color:'black'
    },
    content:{
        flex:8
    },

    title:{
        fontSize:20,
        marginLeft:20,
        marginTop:20,
        color:'black',
        fontWeight:'bold'
    },
});