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 { AdjustableText } from '../../../../components/text';
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 '@gorhom/bottom-sheet';
import { ScrollView } from 'react-native-gesture-handler';

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

const renderStationPanel = (props) => {

  const [updateFavorite, setUpdateFavorite] = useState(0)
  const [updateFavoriteVal, setUpdateFavoriteVal] = useState(false)
  const bottomSheetRef = useRef(null);
  const snapPoints = ['50%', '60%'];

  useEffect(() => {
    if (props.visible) {
      bottomSheetRef.current?.expand();
    } else {
      bottomSheetRef.current?.collapse();
    }
  }, [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 (
        <Icon.AntDesign name={name} style={{ marginLeft: mgn }} color={Theme.colors.yellow} size={20} key={i} />
      )
    })

    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={{ fontFamily: 'arial', color: '#6887ed', fontSize: 14 }}>Contact: </Text>
              <View style={{ 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) {
                          alert("Call Not Supported")
                        } else {
                          Alert.alert("Call Customer Service", '\n' + "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
              style={{ flex: 0, justifyContent: 'center' }}
              onPress={() => {
                updateFavoriteCall(props.stationId, station, props.onload)
              }}
            >
              <Icon.FontAwesome
                name={station.favorite ? 'heart' : 'heart-o'}
                size={28}
                color={station.favorite ? 'red' : Theme.colors.darkGray}
              />
            </TouchableOpacity> :
            <TouchableOpacity onPress={() => updateFavoriteCall(props.stationId, station, props.onload)} style={{ flex: 0, justifyContent: 'center' }}>
              <Icon.FontAwesome
                name={updateFavoriteVal ? 'heart' : 'heart-o'}
                size={28}
                color={updateFavoriteVal ? 'red' : Theme.colors.darkGray}
              />
            </TouchableOpacity>}
        </View>

        <View style={{ backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }}>
          <View style={{ flexDirection: 'row', paddingVertical: 15, paddingHorizontal: 15 }}>
            <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>
        </View>
        {
          station.fuel_prices.map((data, index) => {
            return (
              <View key={index} style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15, paddingVertical: 15, borderBottomWidth: .3, borderColor: Theme.colors.searchGray }}>
                <AdjustableText style={{ color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary }}>{data ? data.fuel_name : ''}</AdjustableText>
                <AdjustableText style={{ color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, color: Theme.colors.primary }}>&#8369; {data.price}</AdjustableText>
              </View>
            )
          })
        }
      </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 (err) {
      Alert.alert("Information", `\n${err.message}`);
      onload(false)
    }, "Favorite", city.favorite ? "Delete" : "Update")
  }

  return (
    <View style={{ flex: 1 }}>
      <BottomSheet
        ref={bottomSheetRef}
        snapPoints={snapPoints}
        index={0}
      >
        <View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }]}>
          <View style={{ flexDirection: 'row', justifyContent: 'center', padding: 15 }}>
            <Text numberOfLines={1} style={{ flex: 1, paddingRight: 40, paddingTop: 17, justifyContent: 'center', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.darkGray, fontSize: 16, fontWeight: 'bold' }}>
              {props.data.name}
            </Text>
            <View style={{ flex: 0, justifyContent: 'center' }}>
              <TouchableOpacity onPress={() => { }} activeOpacity={1}>
                <View style={{ width: 60, justifyContent: 'center', alignItems: 'center', height: 60, borderRadius: 30, backgroundColor: Theme.colors.primary, elevation: 5 }}>
                  {(props.data && props.data.address != undefined && props.data.address != "") ?
                    <NavigationApps
                      iconSize={30}
                      row
                      modalVisible={true}
                      viewMode="sheet"
                      actionSheetBtnCloseTitle="Cancel"
                      actionSheetBtnOpenTitle={<Icon.FontAwesome name="location-arrow" color="#fff" size={25} />}
                      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: props.data.latitude, lon: props.data.longitude, action: actions.navigateByAddress, travelMode: googleMapsTravelModes.driving }} // specific settings for google maps
                      maps={{ address: props.data.address, lat: props.data.latitude, lon: props.data.longitude, action: actions.navigateByAddress, travelMode: mapsTravelModes.driving }} // specific settings for maps
                    /> : null}
                </View>
                <Text style={{ color: Theme.colors.primary, fontSize: 11, alignSelf: 'center', marginTop: 5, }}>Directions</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <ScrollView style={{ flex: 1 }}>
          {renderStationDetails(props.data, props.onClick)}
        </ScrollView>
      </BottomSheet>
    </View>
  );
}

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

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