import React from 'react';
import {useState, useEffect} from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,
  View,
  Dimensions,
  Button,
  Image,
  TextInput,
  TouchableOpacity,
  ActivityIndicator,
  Animated,
  SafeAreaView,
} from 'react-native';
import { connect } from 'react-redux';
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';
import * as Animatable from 'react-native-animatable';
import BottomSheet from 'reanimated-bottom-sheet';
import NetInfo from '@react-native-community/netinfo';

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, props) => {
  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={{backgroundColor: props.app_theme?.theme.colors.background}}>
        <View style={{flex: 0, padding: 15, flexDirection: 'row'}}>
          <View style={{flex: 5}}>
            <Text
              style={{
                fontSize: 16,
                padding: 5,
                color: props.app_theme?.theme.colors.text,
              }}>
              {station.name}
            </Text>
            <Text
              style={{
                color: props.app_theme?.theme.colors.text,
                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) {
      callback(index, city.favorite ? false : true);
    },
    function (error) {
      console.log(error);
    },
  );
};

const renderStationPanel = (props) => {
  const [panel, setpanel] = useState(null);
  const [updatedFavorite, setupdatedfavorite] = useState(false);
  const [updatedFavoriteIndex, setupdatedfavoriteindex] = useState(null);
  const [loading, setLoading] = useState(false);
  const [snap, setSnap] = useState(['10', '10', '3']);
  const [initialSnap, setInitialSnap] = useState(0)

  useEffect(() => {
    init();
  }, [props.visible]);

  const init = () => {
    if (props.visible == true) {
      setSnap(['35', '8', '8']);
      setInitialSnap(0)
    } else if (props.data.length != 0) {
      setSnap(['38', '8', '8']);
      setInitialSnap(0)
    } else {
      setSnap(props.snapPoints);
      setInitialSnap(2)
    }
  };

  const getPanelTitle = () => {
    if(props.error) return 'There was an error'
    else if(props.loading || !props.isSearched && props.data.length == 0) return 'Getting Nearby Stations'
    else if(props.isSearched) return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
    else return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
  }

  const renderHeaders = () => {
    return (
      <View style={styles.panel}>
        <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,
                padding: 5,
                color: props.app_theme?.theme.colors.text,
                fontSize: 15,
              }}>
              {getPanelTitle()}
            </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 ? (
                <ActivityIndicator color={props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : "gray"} size={25} />
              ) : null}
            </View>
          </View>
        </View>
      </View>
    );
  };

  const renderContents = () => {
    return (
      <SafeAreaView>
        {props.data.length > 0 ? renderStations(props.data, props.onClick, props.onUpdateFavorite, props) : <View style={{height: 250, width: '100%', backgroundColor: props.app_theme?.theme.colors.background}}></View>}
      </SafeAreaView>
    );
  };

  return (
    <View style={{flex: 1}}>
      <BottomSheet
      snapPoints={props.data.length > 1 ? snap : ['20','20','20']}
      renderContent={renderContents}
      enabledBottomInitialAnimation={true}
      enabledInnerScrolling={true}
      initialSnap={0}
      renderHeader={renderHeaders}/>
    </View>
  );
}

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

export default connect(mapStateToProps, null)(renderStationPanel)

// 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={{backgroundColor: '#fff'}}>
//         <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);
//   const [loading, setLoading] = useState(false);
//   const [snap, setSnap] = useState(['10', '10', '3']);
//   const [initialSnap, setInitialSnap] = useState(0)

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

//   const init = () => {
//     if (props.visible == true) {
//       setSnap(['38', '8', '8']);
//       setInitialSnap(0)
//     } else if (props.data.length != 0) {
//       // setSnap([450, 300, 60]);
//       // setSnap(['450', '300', '60']);
//       setSnap(['38', '8', '8']);
//       setInitialSnap(0)
//     } else {
//       // setSnap([60, 60, 60]);
//       // setSnap(['60', '60', '60']);
//       setSnap(props.snapPoints);
//       setInitialSnap(2)
//     }
//   };

//   useEffect(() => {
//     init();
//   }, [props.visible]);

//   const getPanelTitle = () => {
//     if(props.error) return 'There was an error'
//     else if(props.loading || !props.isSearched && props.data.length == 0) return 'Getting Nearby Stations'
//     else if(props.isSearched) return 'Unioil Stations found: ' + props.data.length
//     else return 'Unioil Stations found: ' + props.data.length
//   }

//   const renderHeaders = () => {
//     return (
//       <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} */}
              
//               {getPanelTitle()}

//             </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 ? (
//                 <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>
//     );
//   };

//   const renderContents = () => {
//     return (
//       <SafeAreaView>
//         {props.data.length == 0 ? <View style={{height: 250, width: '100%', backgroundColor: '#fff'}}></View> : renderStations(props.data, props.onClick, props.onUpdateFavorite)}
//       </SafeAreaView>
//     );
//   };

//   return (

//     <View style={{flex: 1}}>
//       <BottomSheet
//       snapPoints={snap}
//       renderContent={renderContents}
//       enabledBottomInitialAnimation={true}
//       enabledInnerScrolling={true}
//       initialSnap={0}
//       renderHeader={renderHeaders}
//     />
//     </View>

//   );
// }