// withHooks
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketGps } from 'esoftplay/cache/market/gps/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';

import React, { useEffect } from 'react';
import { Pressable, View } from 'react-native';


export interface MarketAddress_autocompleteArgs {

}
export interface MarketAddress_autocompleteProps {

}

function getPlaces(query: string): Promise<any[]> {
  return new Promise((r, j) => {
    new MarketGps().getAutoComplete(query).then((o) => {
      r(o.predictions)
    })
  })
}


export default function m(props: MarketAddress_autocompleteProps): any {
  const [places, setPlaces] = useSafeState<any>([])
  const [keyword, setKeyword] = useSafeState('')

  useEffect(() => {
    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
  }, [])

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        onlyBack
        title={esp.lang("market/address_autocomplete", "header_title")} />
      <LibScroll style={{ flex: 1 }} >
        <MarketInput_square
          placeholder={esp.lang("market/address_autocomplete", "placeholder_location")}
          onChangeText={(t) => {
            setKeyword(t)
            LibUtils.debounce(() => getPlaces(t).then(setPlaces), 1000)
          }}
        />
        <Pressable onPress={() => {
          LibProgress.show(esp.lang("market/address_autocomplete", "waiting_location"))
          new MarketGps().getLocationAsync().then((v) => {
            if (v?.coords?.latitude && v?.coords?.longitude) {
              const { coords: { latitude, longitude } } = v
              LibNavigation.sendBackResult({ address: "", latlong: latitude + ',' + longitude }, LibNavigation.getResultKey(props))
              LibProgress.hide()
            }
          }).catch(() => {
            LibToastProperty.show(esp.lang("market/address_autocomplete", "location_not_found"))
            LibProgress.hide()
          })
        }}
          style={styleId_QylRF} >
          <LibIcon name='crosshairs-gps' color={'#999'} />
          <View style={styleId_23fjhC} >
            <LibTextstyle textStyle='footnote' style={styleId_aDTfH} text={esp.lang("market/address_autocomplete", "current_location")} />
            <LibTextstyle textStyle='caption1' text={esp.lang("market/address_autocomplete", "use_current_location")} />
          </View>
        </Pressable>

        {
          places?.map?.((place: any, index: number) => (
            <Pressable key={index} onPress={() => {
              new MarketGps().getPlaceDetail(place.place_id).then((latlong) => {
                LibNavigation.sendBackResult({ address: place.description, latlong: latlong }, LibNavigation.getResultKey(props))
              })
            }}
              style={styleId_Z1KewV9} >
              <LibTextstyle textStyle='footnote' style={styleId_aDTfH} text={place?.structured_formatting?.main_text} />
              <LibTextstyle textStyle='caption1' text={place?.structured_formatting?.secondary_text} />
            </Pressable>
          ))
        }
        {
          keyword.length > 0 && places.length == 0 &&
          <LibSkeleton backgroundStyle={{ height: LibStyle.height }}>
            {
              new Array(10).fill('').map((x: any, i: number) => (
                <View key={i} style={styleId_Z1KewV9} >
                  <View style={{ width: '50%', height: 14, borderRadius: 10, backgroundColor: 'white' }} />
                  <View style={{ marginTop: 5, width: '90%', height: 12, borderRadius: 10, backgroundColor: 'white' }} />
                </View>
              ))
            }
          </LibSkeleton>
        }
      </LibScroll>
    </View>
  )
}
const styleId_QylRF: any = { padding: 17, borderBottomWidth: 0.5, borderBottomColor: "#f1f1f1", flexDirection: 'row', alignItems: 'center' }
const styleId_23fjhC: any = { flex: 1, marginLeft: 10 }
const styleId_aDTfH: any = { fontWeight: 'bold' }
const styleId_Z1KewV9: any = { padding: 17, borderBottomWidth: 0.5, borderBottomColor: "#f1f1f1" }