import React from 'react';
import {useState, useEffect} from 'react';
import {ScrollView, StyleSheet, Text, View, Dimensions, Button, Image, TextInput, TouchableOpacity, ActivityIndicator} from 'react-native';
import Theme from '../../../../components/theme.style.js';
import Assets from '../../../../components/assets.manager.js';
import Icon from '../../../../components/icons';
import DB from '../../../../components/storage';
import REQUEST from '../../../../components/api';
import {Divider} from 'react-native-elements';

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

const styles = {
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
    alignItems: 'center',
    justifyContent: 'center'
  },
  panel: {
    flex: 1,
    backgroundColor: 'white',
    position: 'relative'
  },
  panelHeader: {
    height: 60,
    backgroundColor: Theme.colors.lightGray,
    alignItems: 'center',
    justifyContent: 'center'
  }
}

const {height} = Dimensions.get('window')

const renderStations = (data, onPress, onUpdateFavorite) => {
  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 (
      <TouchableOpacity key={index} activeOpacity={1} onPress={() => onPress(station) || null} key={index} style={{}}><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>
        <TouchableOpacity onPress={() => updateFavorite(station, index, onUpdateFavorite)} style={{flex: 0, justifyContent: 'center'}}>
          <Icon.Ionicons name={station.favorite ? "md-heart" : "ios-heart-empty"} size={28} color={station.favorite ? "red" : Theme.colors.darkGray} />
        </TouchableOpacity>
      </View>
      <Divider style={{marginTop: 5, padding: 0, margin:0, width: Theme.screen.w}} /></TouchableOpacity>
    )
  })
}

const updateFavorite = async (city, index, callback) => {
  let session = await DB.session()
  let urlTask = city.favorite ? "station_delete_favorite" : "station_add_favorite"
  let method = city.favorite ? "delete" : "get"
  console.log(urlTask, method)
  REQUEST(urlTask, method, {
    Authorization: session.token
  }, {
    noID: true,
    value: city.station_uuid
  }, {}, function(res){
    console.log(res.message)
    callback(index, city.favorite ? false : true)
  }, function(error){
    console.log(error)
  })
}

export default function renderStationPanel(props){

  const [panel, setpanel] = useState(null)
  const [updatedFavorite, setupdatedfavorite] = useState(false)
  const [updatedFavoriteIndex, setupdatedfavoriteindex] = useState(null)

  useEffect(() => {
    // console.log("Error has", props.error)
    if(props.visible){
      panel.show()
    }
    return setpanel(null)
  }, [props.visible])

  return (
    <SlidingUpPanel
      ref={(c) => setpanel(c)}
      draggableRange={{top: height / 2.35, bottom: 60}}
      showBackdrop={false}>
      <View style={styles.panel}>
        <View style={styles.panelHeader}>
          <View style={{flexDirection: 'row', justifyContent: 'center', padding: 15}}>
            <Text style={{flex: 4, padding: 5, color: Theme.colors.textPrimary, fontSize: 15}}>
              {props.error ? "There was an error" : props.loading || props.data.length == 0 ? "Getting Nearby Stations" : "Unioil Stations found: " + props.data.length}
            </Text>
            <View style={{flex: 0, justifyContent: 'center'}}>
              {props.error ? 
                <TouchableOpacity onPress={props.onError} activeOpacity={1}>
                  <Text style={{color: '#fff'}}>Try Again</Text>
                </TouchableOpacity> : props.loading || props.data.length == 0 ? <ActivityIndicator color="gray" size={25} /> : null}
            </View>
          </View>
        </View>
        <ScrollView style={{flex: 1}}>
          {renderStations(props.data, props.onClick, props.onUpdateFavorite)}
          <View style={{height: Theme.screen.h}}></View>
        </ScrollView>
      </View>
    </SlidingUpPanel>
  )
}