import * as React from 'react';
import {useState, useEffect} from 'react';
import { SafeAreaView, ScrollView, Button, View, Text, StyleSheet, TextInput, Modal, TouchableOpacity, ActivityIndicator } from 'react-native';
import CustomHeader from '../../../components/header.js';
import Theme from '../../../components/theme.style.js';
import Icon from '../../../components/icons';
import DB from '../../../components/storage';
import REQUEST from '../../../components/api';

import {Divider} from 'react-native-elements';
import SlidingUpPanel from 'rn-sliding-up-panel';
import Geolocation from '@react-native-community/geolocation';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

class Stations extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    loading: false,
    panel: null,
    showPanel: false,
    session: null,
    stations: [],
    initialRegion :{ 
      latitude: 14.599512,
      longitude: 120.984222,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    },
    mylocation: {}
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  fetch = async (coords, successCallBack, errorCallback) => {
    this.state.panel.hide()
    let session = await DB.session()
    this.setState({ session: session })
    REQUEST('gas_stations', 'post', {
      Authorization: session.token
    }, {}, {
      lcard_uuid: session.user.lcard_uuid,
      longitude: coords.longitude,
      latitude: coords.latitude
    }, (success) => {
      successCallBack(success)
    }, (error) => {
      errorCallback(error)
    })
  }

  updateRegion = () => {
    if(this.state.stations.length > 0){
      let region = this.state.initialRegion
      region.latitude = parseFloat(this.state.stations[0].latitude)
      region.longitude = parseFloat(this.state.stations[0].longitude)
      region.latitudeDelta = 0.00700
      region.longitudeDelta = 0.00100
      this.setState({ initialRegion: region })
    }
  }

  init = async () => {
    this.setState({ loading: true })
    Geolocation.getCurrentPosition(info => {
      console.log(info)
      this.fetch(info.coords, success => {
        this.setState({ loading: false, stations: success.data, mylocation: info.coords })
        this.state.panel.show()
        this.state.updateRegion()
      }, error => {
        this.setState({ loading: false })
      })
    }, error => {
      console.log(error)
      this.setState({ loading: false })
    })
  }

  renderStations = (data) => {
    return data.map((station, index) => {
      let stars = [1,2,3,4,5].map((star, i) => {
        let name = station.stars >= star ? "star" : "staro"
        let mgn = index > 0 ? 5 : 0
        return (
          <TouchableOpacity key={i}>
            <Icon.AntDesign name={name} style={{marginLeft: mgn}} color={Theme.colors.yellow} size={20} />
          </TouchableOpacity>)
      })
      return (
        <View key={index}>
          <View style={{flex: 0, padding: 15, flexDirection: 'row'}}>
              <View style={{flex: 5}}>
                <Text style={{fontSize: 16, padding: 5, color: Theme.colors.textPrimary}}>{station.name}</Text>
                <Text style={{color: Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 13}}>{station.address}</Text>
                <View style={{flexDirection: 'row', paddingTop: 7}}>
                  {stars}
                </View>
              </View>
              <View style={{flex: 0, justifyContent: 'center'}}>
                <Icon.Ionicons name={station.favorite ? "md-heart" : "ios-heart-empty"} size={28} color={station.favorite ? "red" : Theme.colors.darkGray} />
              </View>
            </View>
          <Divider style={{marginTop: 5, padding: 0, margin:0, width: Theme.screen.w}} />
        </View>
      )
    })
  }

  render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        <CustomHeader title="Stations" menu={true} navigation={this.props.navigation} />
        <View style={styles.mapContainer}>
          <MapView
            provider={PROVIDER_GOOGLE}
            loadingEnabled={true}
            style={styles.map}
            showsUserLocation={true}
            region={this.state.initialRegion}/>
        </View>
        <View style={{flex: 0, backgroundColor: '#fff', border: 1, margin: 15, height: 50, padding: 0, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 15, elevation: 10}}>
          <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
            <View style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
              <Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} />
            </View>
            <View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}>
              <TextInput style={{fontSize: 17}} placeholder="Search for city" />
            </View>
          </View>
        </View>
        <View style={styles.panelInctiveContainer}>
          <SlidingUpPanel 
            ref={c => this.setState({ panel: c })}
            backdropOpacity={1}
            allowDragging={true}
            showBackdrop={false}
            draggableRange={{top: Theme.screen.h / 2.35, bottom: Theme.screen.h / 1.96}}>
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'flex-start', backgroundColor: '#fff'}}>
              <TouchableOpacity activeOpacity={1} onPress={() => this.setState({ showPanel: true })} style={{ width: '100%', height: 60, top: -70}}>
                <View style={{flex: 1, flexDirection: 'row', backgroundColor: Theme.colors.lightGray, justifyContent: 'flex-start', padding: 20, alignItems: 'flex-start'}}>
                  <Text style={{flex: 4, color: Theme.colors.textPrimary, fontSize: 14}}>Unioil Stations found: {this.state.stations.length}</Text>
                  <View style={{flex: 0}}>{this.state.loading ? <ActivityIndicator color="gray" /> : null}</View>
                </View>
              </TouchableOpacity>
              <ScrollView>
                {this.renderStations(this.state.stations)}
                <View style={{height: Theme.screen.h}}></View>
              </ScrollView>
            </View>
          </SlidingUpPanel>
        </View>
      </SafeAreaView>
    );
  }
}

export default Stations

// export default function Stations(navigation) {

//   const [loading, setloading] = useState(false)
//   const [panel, setpanel] = useState(null)
//   const [showPanel, setshowpanel] = useState(false)
//   const [session, setsession] = useState(null)
//   const [stations, setstations] = useState([])
//   const [initialRegion, setinitialRegion] = useState({
//     latitude: 14.599512,
//     longitude: 120.984222,
//     latitudeDelta: 0.0922,
//     longitudeDelta: 0.0421,
//   })
//   const [mylocation, setmylocation] = useState({})

//   const fetch = async () => {
//     setloading(true)
//     panel.hide()
//     let session = await DB.session()
//     await setsession(session)
//     REQUEST('gas_stations', 'post', {
//       Authorization: session.token
//     }, {}, {
//       lcard_uuid: session.user.lcard_uuid,
//       longitude: mylocation.longitude,
//       latitude: mylocation.latitude
//     }, function(res){
//       setloading(false)
//       setstations(res.data)
//       panel.show()
//       updateRegion()
//     }, function(e){
//       console.log(e)
//       setloading(false)
//     })
//     setloading(false)
//   }

//   const updateRegion = () => {
//     if(stations.length > 0){
//       let region = initialRegion
//       region.latitude = parseFloat(stations[0].latitude)
//       region.longitude = parseFloat(stations[0].longitude)
//       region.latitudeDelta = 0.00700
//       region.longitudeDelta = 0.00100
//       setinitialRegion(region)
//     }
//   }

//   const init = async () => {
//     Geolocation.getCurrentPosition(info => setmylocation(info.coords) );
//     // if(!mylocation.accuracy){
//     //   alert("Location is disabled")
//     //   return
//     // }
//     fetch()
//   }

//   useEffect(() => {
//     init()
//   }, [])

//   return (
//     <SafeAreaView style={{flex: 1}}>
//       <CustomHeader title="Stations" menu={true} navigation={navigation} />
      
//       <View style={styles.mapContainer}>
//         <MapView
//           provider={PROVIDER_GOOGLE}
//           loadingEnabled={true}
//           style={styles.map}
//           showsUserLocation={true}
//           region={initialRegion}
//         />
//       </View>

//       <View style={{flex: 0, backgroundColor: '#fff', border: 1, margin: 15, height: 50, padding: 0, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 15, elevation: 10}}>
//         <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
//           <View style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
//             <Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} />
//           </View>
//           <View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}>
//             <TextInput style={{fontSize: 17}} placeholder="Search for city" />
//           </View>
//         </View>
//       </View>

//       {/* <View style={ showPanel ? {...styles.panelActiveContainer} : {...styles.panelInctiveContainer}}> */}
//       <View style={styles.panelInctiveContainer}>
//         <SlidingUpPanel 
//           ref={c => setpanel(c)}
//           backdropOpacity={1}
//           allowDragging={true}
//           showBackdrop={false}
//           draggableRange={{top: Theme.screen.h / 2.35, bottom: Theme.screen.h / 1.96}}>
//           <View style={{flex: 1, alignItems: 'center', justifyContent: 'flex-start', backgroundColor: '#fff'}}>
//             <TouchableOpacity activeOpacity={1} onPress={() => setshowpanel(true)} style={{ width: '100%', height: 60, top: -70}}>
//               <View style={{flex: 1, flexDirection: 'row', backgroundColor: Theme.colors.lightGray, justifyContent: 'flex-start', padding: 20, alignItems: 'flex-start'}}>
//                 <Text style={{flex: 4, color: Theme.colors.textPrimary, fontSize: 14}}>Unioil Stations found: {stations.length}</Text>
//                 <View style={{flex: 0}}>{loading ? <ActivityIndicator color="gray" /> : null}</View>
//               </View>
//             </TouchableOpacity>
//             <ScrollView>
//               {renderStations(stations)}
//               <View style={{height: Theme.screen.h}}></View>
//             </ScrollView>
             
//           </View>
//         </SlidingUpPanel>
//       </View>
//     </SafeAreaView>
//   );
// }

const styles = StyleSheet.create({
  mapContainer: {
    ...StyleSheet.absoluteFillObject,
    flex: 1,
    marginTop: 50,
    height: Theme.screen.h - 15,
    width: Theme.screen.w,
    justifyContent: 'flex-end',
    alignItems: 'center',
   },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
  panelActiveContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    backgroundColor:'transparent',
    top: Theme.screen.h / 2.35
  },
  panelInctiveContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    backgroundColor:'red',
    height: 40,
    top: Theme.screen.h / 1.9
  }
});