import React from 'react';
import {
  View, StyleSheet, Text, TouchableOpacity,
  TouchableNativeFeedback, TimePickerAndroid, Platform, SafeAreaView,
  DatePickerIOS, Dimensions, Modal, ActivityIndicator, KeyboardAvoidingView
} from 'react-native';
import { connect } from 'react-redux';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { ScrollView } from 'react-native-gesture-handler';
import MapView from 'react-native-maps';

import PlaceAutoComplete from '../components/PlaceAutoComplete';
import CustomInput from '../components/CustomInput';
import TimeInput from '../components/TimeInput';
import Label from '../components/Label';
import Color from '../constants/Colors';
import firebase from '../data/firebase';
import { BoldText, RegularText } from '../components/StyledText';
import { Collections } from '../constants/Collection';
import Actions from '../state/Actions';
import { UserHelper } from '../state/Records';

const { width, height } = Dimensions.get('screen');

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fafafa'
  },
  map:{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    height: 200
  },
  btnText: { textAlign: 'center', fontWeight: 'bold', color: '#fff' },
  button: { paddingVertical: 12, marginHorizontal: 16, marginVertical: 8, paddingHorizontal: 16, borderRadius: 16, backgroundColor: Color.primary }
});

const Prayers = ["Jummah", "Fazr", "Zuhr", "Asar", "Magrib", "Esha"];

@connect(state => ManageMosqueScreen.setProps(state))
class ManageMosqueScreen extends React.Component {

  constructor(props) {
    super(props);
    this.state = this.getInitialState();
    const { navigation: { state: { params } } } = this.props;
    if (params && params.Mosque) {
      this.state.input = params.Mosque;
      this.state.isEdit = true;
    }
  }

  static setProps(state) {
    return {
      user: state.currentUser
    };
  }


  getInitialState() {
    return {
      isSaving: false,
      isSuccess: false,
      error: null,
      input: {
        name: '',
        description: '',
        address: {

        },
        prayers: {

        }
      },
      prayerKey: null
    };
  }

  resetScreen() {
    this.setState(this.getInitialState());
  }

  handleInput(key, value) {
    const { input } = this.state;
    input[key] = value;
    this.setState({ input, error: null });
  }

  async updateToFirebase() {
    const { input, isSaving } = this.state;
    const { user } = this.props;
    if(isSaving){
      return;
    }
    const { name, description, address, prayers } = input;
    if (name.trim().length === 0) {
      this.setState({ error: 'Name must be provided.' });
      return;
    }
    if (description.trim().length === 0) {
      this.setState({ error: 'Description must be provided.' });
      return;
    }
    if (!address) {
      this.setState({ error: 'Please select location from dropdown.' });
      return;
    }
    this.setState({ isSaving: true, error: null });
    try {
      const mosque = {
        ...input,
        accepted: UserHelper.isEditor(user),
        addedBy: user.email
      }
      const newAddr = {
        geo:{
          location:{
            lat:mosque.address.latitude,
            lng:mosque.address.longitude
          },
          name:mosque.address.name
        }
      }
      mosque.address = newAddr;
      const response = await firebase.firestore
          .collection(Collections.Mosques)
          .doc(this.state.input.id).update(mosque);
          this.setState({ isSuccess: true });
          this.props.dispatch(Actions.updateMosque(mosque));
    }catch(err) {
      console.log(err);
    }
    this.setState({isSaving:false});
    }


  async saveToFirebase() {
    const { input, isSaving } = this.state;
    const { user } = this.props;
    if (isSaving) {
      return;
    }
    const { name, description, address, prayers } = input;
    if (name.trim().length === 0) {
      this.setState({ error: 'Name must be provided.' });
      return;
    }
    if (description.trim().length === 0) {
      this.setState({ error: 'Description must be provided.' });
      return;
    }
    if (!address || !address.latitude) {
      this.setState({ error: 'Please select location from dropdown.' });
      return;
    }
    this.setState({ isSaving: true, error: null });
    try {
      const mosque = {
        ...input,
        accepted: UserHelper.isEditor(user),
        addedBy: user.email
      };
      const newAddr = {
        geo:{
          location:{
            lat:mosque.address.latitude,
            lng:mosque.address.longitude
          },
          name:mosque.address.name
        }
      }
      mosque.address = newAddr;
      const response = await firebase.firestore
        .collection(Collections.Mosques)
        .add(mosque);
      mosque.id = response.id;
      this.setState({ isSuccess: true });
      this.props.dispatch(Actions.addMosque(mosque));
    } catch (exp) {
      this.setState({ error: exp.message });
    }
    this.setState({ isSaving: false });
  }

  async showPrayerTimeSetter(name) {
    if (Platform.OS === 'android') {
      try {
        const time = await TimePickerAndroid.open();
        if (time.action != TimePickerAndroid.dismissedAction) {
          const date = new Date();
          date.setHours(time.hour < 10 ? '0' + time.hour : time.hour);
          date.setMinutes(time.minute < 10 ? '0' + time.minute : time.minute);
          this.setPrayerTime(name, date);
        }
      } catch (exp) {
        this.setState({ error: exp.message });
      }
    } else {
      this.setState({ prayerKey: name });
    }
  }

  setPrayerTime(name, date) {
    const { input } = this.state;
    const hour = date.getHours();
    const min = date.getMinutes();
    input.prayers[name] = {
      date,
      time: [hour < 10 ? '0' + hour : hour, min < 10 ? '0' + min : min].join(':')
    };
    this.setState({ input });
  }

  setLocation(details: object, which: string) {
    this.handleInput('address', details);
  }

  render() {
    const { input: { name, prayers, description, address }, prayerKey, error, isSaving, isSuccess } = this.state;
    if (isSuccess) {
      return (
        <View style={styles.container}>
          <View style={{ backgroundColor: '#f7f7f7', justifyContent: 'center', flex: 1, padding: 16, alignItems: 'center' }}>
            <MaterialIcons style={{ fontSize: 48, color: 'green', marginBottom: 16 }} name="check-circle" />
            <BoldText style={{ marginBottom: 8 }}>Success!</BoldText>
            <RegularText>'{name}' has been saved.</RegularText>
            <TouchableOpacity activeOpacity={.85} style={[styles.button, { minWidth: 200 }]} onPress={() => this.resetScreen()}>
              <Text style={{ textAlign: 'center', fontWeight: 'bold', color: '#fff' }}>Add another</Text>
            </TouchableOpacity>
          </View>
        </View>
      );
    }
    return (
      <SafeAreaView style={{ flex: 1 }}>
        {/* <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}> */}
          <ScrollView style={styles.container} keyboardShouldPersistTaps="always">
            <View style={{ flex: 1 }}>
              <CustomInput
                label="Name"
                value={name}
                onChangeText={(name) => this.handleInput('name', name)} />
              <CustomInput
                label="Description"
                value={description}
                multiline={true}
                onChangeText={(description) => this.handleInput('description', description)} />
              <Label>Prayer time</Label>
              <View style={{ marginBottom: 8, backgroundColor: '#fff', padding: 8 }}>
                {
                  Prayers.map(
                    (name) => (
                      <TimeInput
                        value={prayers[name] && prayers[name].time}
                        key={name}
                        name={name}
                        onClick={() => this.showPrayerTimeSetter(name)} />
                    )
                  )
                }
              </View>
              <Label>Address</Label>
              <PlaceAutoComplete
                place={address}
                label='Address'
                placeholder='Chooose Address'
                which='address'
                setLocation={this.setLocation.bind(this)} />
              {
                error && <BoldText style={{ color: 'red', marginTop: 8 }}>{error}</BoldText>
              }
              {
                this.state.input.address && this.state.input.address.latitude != null  ? (
              <View style={{ padding: 120}}>
                <MapView
                      style={styles.map}
                      loadingBackgroundColor="#f9f5ed"
                      showsUserLocation
                      provider="google"
                      initialRegion={{
                        latitude: 26.667105900000003 ,
                        longitude: 88.4188101,
                        longitudeDelta: 0.0034,
                        latitudeDelta: 0.0043,
                      }}
                      region={{
                        latitude: this.state.input.address.latitude,
                        longitude: this.state.input.address.longitude,
                        longitudeDelta: 0.0034,
                        latitudeDelta: 0.0043,
                      }}
                      >
                      <View style={{}}>

                      </View>
                        <MapView.Marker
                              draggable
                              onDragEnd={(e) => {
                                const {latitude, longitude} = e.nativeEvent.coordinate;
                                console.log(latitude+" "+longitude);
                                newObj =  this.state;
                                newObj.input.address.latitude = latitude;
                                newObj.input.address.longitude = longitude;
                                this.setState(newObj);
                                console.log(this.state);
                              }}
                              pinColor={'green'}
                              coordinate={{ latitude: this.state.input.address.latitude, longitude: this.state.input.address.longitude }}
                              title={name}
                            />
                  </MapView>
              </View>

                ):(
                  <View style={{padding:16}}>
                    <Text>Please Select Location From Above Map</Text>
                  </View>
                )

              }

              <Modal
                visible={Platform.OS === 'ios' && prayerKey != null}
                onRequestClose={() => this.setState({ prayerKey: null })}
                transparent
                style={{ zIndex: 111, justifyContent: 'flex-end' }}
                animationType="slide"
              >
                <View style={{ flex: 1, backgroundColor: 'transparent' }} />
                <View style={{ padding: 16, backgroundColor: '#fff' }}>
                  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                    <Text style={{ fontWeight: 'bold', paddingVertical: 8 }}>{prayerKey}</Text>
                    <View style={{ width: 16 }} />
                    <TouchableOpacity activeOpacity={.85} onPress={() => this.setState({ prayerKey: null })}>
                      <Text style={{ paddingVertical: 8, color: 'blue', textAlign: 'right' }}>DONE</Text>
                    </TouchableOpacity>
                  </View>
                  <DatePickerIOS
                    mode='time'
                    date={prayers[prayerKey] && prayers[prayerKey].date || new Date()}
                    style={{ zIndex: 9999 }}
                    onDateChange={(date) => {
                      this.setPrayerTime(prayerKey, date);
                    }}
                  />
                </View>
              </Modal>
            </View>
          </ScrollView>
          <TouchableOpacity
            onPress={() =>  {
             if(!isSaving && this.state.isEdit){
              return this.updateToFirebase();
             } else if(!isSaving ){
              return this.saveToFirebase();
             }
            }}
            activeOpacity={.85}
            style={styles.button}
          >
            {
              !isSaving && <Text style={styles.btnText}>Save</Text>
            }
            {
              isSaving && <ActivityIndicator />
            }
          </TouchableOpacity>
        {/* </KeyboardAvoidingView> */}
      </SafeAreaView>
    );
  }
}

export default ManageMosqueScreen;