import React, { Component } from "react";
import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Image, View, Text, Button } from "react-native";
import firebase from "firebase";
import { Calendar } from "react-native-calendars";
import { ScrollView } from "react-native-gesture-handler";
import SectionedMultiSelect from 'react-native-sectioned-multi-select';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { fetchUser } from "../redux/actions";
import { styles } from "../config/styles";
import { availability } from "../config/availability";

export class AvailabilityScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            english: false,
            spanish: false,
            virtual: false,
            face_to_face: false,
            personal: false,
            group: false,
            cities: [],
            selectedItems: [],
            markedDates: {}
        };
        this.onSelectedItemsChange = this.onSelectedItemsChange.bind(this);
        this.onDaySelect = this.onDaySelect.bind(this);
        this.onSave = this.onSave.bind(this);
    };

    componentDidMount(){
        this.props.fetchUser();
        const { currentUser } = this.props;

        if(currentUser.english !== undefined){
            this.setState(currentUser);
        }
    };

    onSave(){
        const { selectedItems } = this.state;
    
        selectedItems.forEach((value) => {
            if(value === 'English'){
                this.setState({english : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({english : true}, {merge : true}));
            }
            else if(value === 'Spanish'){
                this.setState({spanish : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({spanish : true}, {merge : true}));
            }
            else if(value === 'Virtual'){
                this.setState({virtual : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({virtual : true}, {merge : true}));
            }
            else if(value === 'Face-to-Face'){
                this.setState({face_to_face : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({face_to_face : true}, {merge : true}));
            }
            else if(value === 'Personal Session'){
                this.setState({personal : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({personal : true}, {merge : true}));
            }
            else if(value === 'Group Session'){
                this.setState({group : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({group : true}, {merge : true}));
            }
            else if(!isNaN(value.charAt(0))){
                for (let key in this.state.markedDates) {
                    if(this.state.markedDates[key].hasOwnProperty('timeSlot')){
                        this.state.markedDates[key].timeSlot.push(value);
                    }
                    else{
                        this.state.markedDates[key].timeSlot = [];
                        this.state.markedDates[key].timeSlot.push(value);
                    }
                }
            }
            else{
                this.state.cities.push(value);
            }
        })
        firebase.firestore().collection('Interpreters')
            .doc(firebase.auth().currentUser.uid)
            .set(this.state, {merge : true})
            .then(() => {this.props.navigation.goBack()});
    };

    onSelectedItemsChange = (selectedItems) => {
        this.setState({selectedItems});
    };

    onDaySelect = (day) => {
        const selectedDay = day.dateString;
        let selected = true;

        if (this.state.markedDates[selectedDay]) {
            selected = !this.state.markedDates[selectedDay].selected;
        }
        const updatedMarkedDates = {...this.state.markedDates, ...{ [selectedDay]: { selected } } }
        this.setState({ markedDates : updatedMarkedDates });
    }

    render() {
        return (
            <ScrollView contentContainerstyle={styles.stdcontainer}>
                <Calendar
                    onDayPress={this.onDaySelect}
                    style={styles.calendar}
                    markedDates={this.state.markedDates}
                    theme={{selectedDayBackgroundColor: 'green'}}
                />
                <SectionedMultiSelect 
                    items={availability}
                    IconRenderer={Icon}
                    readOnlyHeadings={true}
                    uniqueKey='name'
                    subKey='children'
                    selectText='Choose your availability...'
                    onSelectedItemsChange={this.onSelectedItemsChange}
                    selectedItems={this.state.selectedItems}
                />
                <Button title='Save' onPress={() => {this.onSave()}}/>
            </ScrollView>
        );
    }
}

const mapStateProps = (store) => ({currentUser : store.userState.currentUser})
const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch)
export default connect(mapStateProps, mapDispatchProps)(AvailabilityScreen)