import React, { useEffect, useState } from 'react'
import { 
  View, 
  StyleSheet,
  Text,
  TouchableOpacity
} from 'react-native'
import { useNavigation } from '@react-navigation/native';
import Theme from '../../../../components/theme.style.js';
import List from './List.js';
import Search from '../search/Search.js';
import SearchResult from '../search/SearchResult';
import CustomHeader from '../../../../components/header.js'
import CustomSafeArea from '../../../../components/safeArea.component.js'
import DB from '../../../../components/storage';

const Lists = (props) => {
  const [result, setResult] = useState([]);
  const [savedLocations, setSavedLocations] = useState([]);
  const navigation = useNavigation();

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

  const init = async () => {
    const locations = await DB.get("iqair");
    const parsedLocations = JSON.parse(locations);

    setSavedLocations(parsedLocations);
  }

  const onPress = () => {
    navigation.navigate("Search", { onGoBack: () => init() });
  }

  return (
    <CustomSafeArea>
      <CustomHeader  
        navigation={navigation}
        title="IQAIR"
        boldTitle={true}
        back={result.length > 0} 
        onBackPress={result.length > 0 ? () => {
            init();
            setResult([]);
          } 
          : 
          () => navigation.goBack()
        }
      />
      
      <View style={styles.container}>
        <Search onPress={onPress} />

        { result.length === 0 &&
          <List data={savedLocations} init={init} /> }

        <TouchableOpacity onPress={onPress} style={styles.addLocationButton}>
          <Text style={styles.addLocationText}>ADD UNIOIL STATION</Text>
        </TouchableOpacity>
      </View>
    </CustomSafeArea>
  )
}

export default Lists

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
  }, 
  addLocationButton: {
    backgroundColor: Theme.colors.primary,
    width: Theme.screen.w - 80,
    alignSelf: 'center',
    marginBottom: 20,
    alignItems: 'center',
    paddingVertical: 10,
    borderRadius: 5
  },
  addLocationText: {
    color: Theme.colors.white,
    fontSize: 15
  }
})