import React from 'react';
import {useState, useEffect, useRef} from 'react';
import { connect } from 'react-redux';
import { 
  Text,
  View, 
  TouchableOpacity, 
  Linking, 
  Platform, 
  Alert
} from 'react-native';
import {
  NavigationApps,
  actions,
  googleMapsTravelModes, 
  mapsTravelModes
} from "../../../../components/navigationapps";
import Theme from '../../../../components/theme.style.js';
import Icon from '../../../../components/icons';
import DB from '../../../../components/storage';
import REQUEST from '../../../../components/api';
import BottomSheet from 'reanimated-bottom-sheet';

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 renderStationPanel = (props) => {

  const [panel, setpanel] = useState(null)
  const [updateFavorite, setUpdateFavorite] = useState(0)
  const [updateFavoriteVal, setUpdateFavoriteVal] = useState(false)
  const nvapp = useRef();

  useEffect(() => {
    if(props.visible){
      panel.show()
    }
    return setpanel(null)
  }, [props.visible])

  const renderStationDetails = (station, onPress) => {
    let stars = [1,2,3,4,5].map((star, i) => {
    let name = station.stars >= star ? "star" : "staro"
    let mgn = i > 0 ? 5 : 0
    return (
      <TouchableOpacity key={i}>
        <Icon.AntDesign name={name} style={{marginLeft: mgn}} color={Theme.colors.yellow} size={20} />
      </TouchableOpacity>
    )
  })

  return (
    <TouchableOpacity activeOpacity={1} style={{backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.background : Theme.colors.white }}>
      <View style={{flex: 0, padding: 15, flexDirection: 'row'}}>
        <View style={{flex: 5}}>
          <Text style={{fontFamily: 'arial',color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 15}}>{station.address}</Text>
          <View style={{padding: 5, width: '90%', flexDirection: 'row'}}>
            <Text style={{flex: 1, fontFamily: 'arial', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontSize: 14}}>Contact: </Text>
            <View style={{flex: 3, fontFamily: 'arial', color: Theme.colors.textPrimary, fontSize: 14}}>
              {station.contact_numbers.map((num, i) => {
                return (
                  <TouchableOpacity key={i} onPress={() => {
                    let url = Platform.OS == 'ios' ? 'telprompt:' : 'tel:'
                    Linking.canOpenURL(url).then(supported => {
                      if (!supported) {
                        console.log('Cant handle url')
                        alert("Call Not Supported")
                      } else {
                        Alert.alert("Call Customer Service", "You will be redirected to the dialer to call Unioil Customer Service", [
                          {
                            text: 'Cancel',
                            style: 'cancel',
                          },{
                            text: 'OK', onPress: () => Linking.openURL(`${url}${num}`)
                          }
                        ],
                        {cancelable: true})
                        return true
                      }
                      }).catch(err => {
                        console.error('An error occurred', err)
                      })
                    }}>
                    <Text style={{color: "darkblue"}}>{num}</Text>
                  </TouchableOpacity>)
              })}
            </View>
          </View>
          <Text style={{fontFamily: 'arial',color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, padding: 0, width: '90%', fontSize: 13}}></Text>
          <View style={{flexDirection: 'row', paddingTop: 7}}>
            {stars}
          </View>
        </View>
        {updateFavorite == 0 ? 
          <TouchableOpacity onPress={() => updateFavoriteCall(props.stationId, station, props.onload)} 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> : 
          <TouchableOpacity onPress={() => updateFavoriteCall(props.stationId, station, props.onload)} style={{flex: 0, justifyContent: 'center'}}>
            <Icon.Ionicons name={updateFavoriteVal ? "md-heart" : "ios-heart-empty"} size={28} color={updateFavoriteVal ? "red" : Theme.colors.darkGray} />
          </TouchableOpacity>}        
      </View>

      {/* <List>
        <ListItem itemDivider style={{backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.lightGray}}>
          <View style={{flexDirection: 'row'}}>
            <Text style={{flex: 1, color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Fuel Prices</Text>
            <Text style={{flex: 3, alignItems: 'flex-start', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontStyle: 'italic', fontSize: 12}}>Last Update: {station.latest_update}</Text>
          </View>
        </ListItem>
        {
          [1,2,3,4,5].map((data, index) => {
            return (
              <ListItem key={index}>
                <Left><Text style={{color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{station.fuel_prices[index] ? station.fuel_prices[index].fuel_name : ''}</Text></Left>
                <Right>
                  {station.fuel_prices[index] ? (
                    <Text style={{color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, color: Theme.colors.primary}}>&#8369; {station.fuel_prices[index].price}</Text>
                  ) : null}                  
                </Right>                
              </ListItem>
            )
          })
        }  
      </List> */}
    </TouchableOpacity>
  )
}

  const updateFavoriteCall = async (id, city, onload) => {
    let session = await DB.session()
    let urlTask;
    let method;
    if(updateFavorite == 0){
      urlTask = city.favorite ? "station_delete_favorite" : "station_add_favorite"
      method = city.favorite ? "delete" : "get"
    }else{
      urlTask = updateFavoriteVal ? "station_delete_favorite" : "station_add_favorite"
      method = updateFavoriteVal ? "delete" : "get"
    }
    onload(true)
    REQUEST(urlTask, method, {
      Authorization: session.token
    }, {
      noID: true,
      value: id
    }, {}, function(res){
      setUpdateFavorite(1)
      onload(false)
      if(updateFavorite == 0){
        setUpdateFavoriteVal(city.favorite ? false : true)
      }else{
        setUpdateFavoriteVal(updateFavoriteVal ? false : true)
      }
    }, function(error){
      onload(false)
    })
  }

  return (
    <View style={{flex: 1}}>
      <BottomSheet
      snapPoints={['57', '57', '57']} //['40', '3', '3']
      renderContent={() => {
        return renderStationDetails(props.data, props.onClick)
      }}
      enabledBottomInitialAnimation={true}
      enabledInnerScrolling={true}
      initialSnap={0}
      renderHeader={() => {
        console.log(props.data.address)
        return (
        <View style={[styles.panelHeader, {backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.lightGray}]}>
          <View style={{flexDirection: 'row', justifyContent: 'center', padding: 15}}>
            <Text style={{flex: 4, paddingTop: 17, justifyContent: 'center', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontSize: 16}}>
              {props.data.name}
            </Text>
            <View style={{flex: 0, justifyContent: 'center'}}>
              <TouchableOpacity onPress={() => {}} activeOpacity={1} style={{top: -20}}> 
                <View style={{width: 60, justifyContent: 'center', alignItems: 'center', height: 60, borderRadius: 30, backgroundColor: Theme.colors.primary, elevation: 10}}>
                  {(props.data && props.data.address != undefined && props.data.address != "") ? 
                    <NavigationApps
                      iconSize={35}
                      row
                      modalVisible={true}
                      viewMode="sheet"
                      actionSheetBtnCloseTitle="Cancel"
                      actionSheetBtnOpenTitle={<Icon.Ionicons name="ios-send" color="#fff" size={35} />}
                      actionSheetTitle="Choose an application to view the route"
                      address={props.data.address} // address to navigate by for all apps 
                      waze={{ address: props.data.address, lat:props.data.latitude, lon:props.data.longitude, action: actions.navigateByLatAndLon}} // specific settings for waze
                      googleMaps={{ address: props.data.address, lat:'',lon:'',action: actions.navigateByAddress, travelMode:googleMapsTravelModes.driving}} // specific settings for google maps
                      maps={{ address: props.data.address, lat:'', lon:'',action: actions.navigateByAddress, travelMode:mapsTravelModes.driving}} // specific settings for maps
                  /> : null}
                </View>
                <Text style={{color: Theme.colors.primary}}>Directions</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        )
      }}/>
    </View>
  );
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(renderStationPanel);