import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    AppState,
    FlatList,
    ProgressBarAndroid,
    TouchableOpacity,
    Text,
    View,
    Animated,
    StatusBar
} from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/MaterialIcons';
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";
import Calendar from 'react-native-calendario';
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'
require('./../../utils/Translations')
import { SinglePickerMaterialDialog } from 'react-native-material-dialog';
import {Header} from "react-native-elements";
import {withNavigationFocus} from "react-navigation";
import IconWithBadge from "../IconWithBadge";
import { Appbar, Paragraph, Menu, Divider, Provider } from 'react-native-paper';
  class MyHistory extends React.Component{
    static navigatorStyle = {
        navBarBackgroundColor: primary,
        statusBarColor: primaryDark,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF',
        contextualMenuStatusBarColor:theme.accent,
        contextualMenuBackgroundColor: theme.accentLight,
        contextualMenuButtonsColor: '#ffffff'

    };
    static navigationOptions =({navigation})=> {
        const {routeName}=navigation.state
        return {
         
            tabBarLabel:routeName==="myDemand"?I18n.t('MY_DEMAND'): I18n.t('DEMAND_RECEIVE'),
            tabBarIcon:({focused,horizontal,tintColor})=>{
              return (<IconWithBadge
                  badgeCount={navigation.getParam("count",0)}
                  size={20}
                  name={routeName==="myDemand"?"mail": "inbox"}
                  color={focused?tintColor:"grey"}
              />)
            },
        
            drawerLabel: I18n.t('CREDIT_MANAGE'),
        drawerIcon: ({ tintColor }) => (
            <Icon
                name={'credit-card'}
                size={24}
            />
        ),
    }};

    constructor(props) {
        super(props, true);
        this.state = this.initState();
        readUser().then((user)=>{this.setState({user:user})})
        this._populateIcons().then(() => {
        });
        
        this.navigation=this.props.navigation


    };

    navigationButtonPressed({ buttonId }) {
        if (buttonId === 'id') {
            this.showFilter();
        }else if(buttonId==='sectionned'){
            this.setState({isSectionned:!this.state.isSectionned})
        }
    }


    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: [],
            count:0,
            translateAnim:new Animated.Value(0),
            visibleMenu:false,
            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) {
        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() {
        const {routeName}=this.navigation.state
        this.setState({position:routeName==="myDemand"?0:1})
        this.refreshData()
        this.intervaller=setInterval(()=>{    
                this.refreshData(false)
        }, 2000)
        this.animateSlidingUp(false)
        this.props.navigation.addListener("didFocus", () => {
            this.refreshData(false)
            console.warn("loading")
     
        })

    }

    componentWillUnmount() {
        clearInterval(this.intervaller)
    }

    renderList(list) {
        if(this.state.isLoaded && list instanceof Array){
            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>{I18n.t('NO_ITEM_REQUEST')}</Text>
                
                </View>
            )
            
        }

    }
    renderOptionsMenu(){
        return ( 
            <View
              style={{
                    position:"absolute",
                  zIndex:100,
                paddingTop: 50,
                right:10,
                flexDirection: 'row',
                visible:this.state.visibleMenu,
                justifyContent: 'center'
              }}>
              <Menu
                visible={this.state.visibleMenu}
                onDismiss={this._closeMenu}
                anchor={
                  <Button onPress={this._openMenu}>Show menu</Button>
                }
              >
                <Menu.Item onPress={() => {
                    this.setState({isSectionned:!this.state.isSectionned})
                    this._closeMenu()
                    }} 
                    title="Section" />
                <Divider />
                <Menu.Item onPress={() => {

                            this.animateSlidingUp(!this.state.isSliding)
                            this._closeMenu()
                }} title={I18n.t("FILTER_DATE")} />
              </Menu>
            </View>
        )
    }
    animateSlidingUp(state=false){
        const height = responsiveHeight(100)
        let initialValue = !state ? 0:height ,
            finalValue = !state ?  height:0;

        this.setState({isSliding:state})


        this.state.translateAnim.setValue(initialValue);  //Step 3
        Animated.timing(     //Step 4
            this.state.translateAnim,
            {
                toValue: finalValue,
                duration:500,
                useNativeDriver: true,
            }
        ).start()
    }
  _openMenu = () => this.setState({ visibleMenu: true });

  _closeMenu = () => this.setState({ visibleMenu: false });

    render() {
        return (
            <Provider>
            <View style={{flex:1}}
            >
                <StatusBar
                    backgroundColor={theme.primaryDark}
                    barStyle="light-content"
                    translucent={false}
                />
                
              <Appbar.Header dark={true} style={{backgroundColor:theme.primary}}>
                <Appbar.BackAction
                  onPress={()=>{this.props.navigation.pop()}}
                />
                <Appbar.Content
                  title={I18n.t('CREDIT_MANAGE')}
                  subtitle={this.state.position===0?I18n.t('MY_DEMAND'): I18n.t('DEMAND_RECEIVE')}
                />
                <Appbar.Action icon="refresh" onPress={()=>{this.refreshData()}} />
                <Appbar.Action icon="more-vert" onPress={()=>this._openMenu()} />
              </Appbar.Header>
              {this.renderOptionsMenu()}

              {this.state.position===0?this._renderListDemandsSend():this._renderListDemandReceive()}
            </View>
                  </Provider>
        );

    }
    renderSliding(){
        return (<Animated.View style={[styles.slidingup,{translateY:this.state.translateAnim}]}>
        <Calendar
  onChange={(range) => console.log(range)}
  minDate="2018-04-20"
  startDate="2018-04-30"
  endDate="2018-05-05"
  theme={{
    activeDayColor: {},
    monthTitleTextStyle: {
      color: '#6d95da',
      fontWeight: '300',
      fontSize: 16,
    },
    emptyMonthContainerStyle: {},
    emptyMonthTextStyle: {
      fontWeight: '200',
    },
    weekColumnsContainerStyle: {},
    weekColumnStyle: {
      paddingVertical: 10,
    },
    weekColumnTextStyle: {
      color: '#b6c1cd',
      fontSize: 13,
    },
    nonTouchableDayContainerStyle: {},
    nonTouchableDayTextStyle: {},
    startDateContainerStyle: {},
    endDateContainerStyle: {},
    dayContainerStyle: {},
    dayTextStyle: {
      color: '#2d4150',
      fontWeight: '200',
      fontSize: 15,
    },
    dayOutOfRangeContainerStyle: {},
    dayOutOfRangeTextStyle: {},
    todayContainerStyle: {},
    todayTextStyle: {
      color: '#6d95da',
    },
    activeDayContainerStyle: {
      backgroundColor: '#6d95da',
    },
    activeDayTextStyle: {
      color: 'white',
    },
    nonTouchableLastMonthDayTextStyle: {}
  }}
  style={{height:responsiveHeight(60)}}
/>
<View style={{flexDirection:'row'}}>
<Button>{I18n.t('QUIT')}</Button>
<Button>{I18n.t('FILTER')}</Button>
</View>
</Animated.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('DEMAND_SEND'),
        }]
        return <PagerTabIndicator
            style={{
                height:responsiveHeight(8)
            }}
            tabs={tabs} />;
    }

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

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


    refreshData(autoref=true) {
        if(autoref)
        this.setState({isRefreshing:true})
        loadDemandeCredit().then((data) => {
            if(data.success!==undefined) {
                this.setState({listdata:[]})
                this.updateList(data.demands);
                if(this.state.position!==0)this.props.navigation.setParams({count:data.demands.length})
                this.setState({isRefreshing:false})
            }
        }).catch((e)=>{
            console.warn(e)
        });
        loadMyDemandeCredit().then((data)=>{
            if(data.success!==undefined) {
                this.setState({listdataSend:[]})
                this.setState({isRefreshing:false})
                if(this.state.position===0)this.props.navigation.setParams({count:data.demands.length})

                this.updateMyList(data.demands)
            }
        }).catch((e)=>{
            console.warn(e)
        });
    }
}
export default MyHistory;
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:{
        position:"absolute",
        height:responsiveHeight(84),
        bottom:0,
        backgroundColor:'white',
        width:responsiveWidth(100),
        zIndex: 1000
    },
    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'
    },
});