/* eslint-disable no-underscore-dangle */
import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import {
  Div,
  Button,
  Image,
  Text,
  Avatar,
  Icon,
  Input,
} from 'react-native-magnus';
import { Appbar } from 'react-native-paper';
import { ScrollView } from 'react-native-gesture-handler';

import useModel from 'flooks';
import { getSearch } from '../../Utils/MapUtils';

// 搜索

export default function SearchMapScreen({ navigation }) {

  const [points, setPoints] = React.useState([]);

  return (
    <>
      <Div bg="white" pb={10} borderBottomWidth={1} borderColor="gray200">
        <StatusBar backgroundColor="#fff" style="dark" translucent />

        <Appbar.Header
          theme={{ colors: { primary: '#fff' } }}
          style={{
            elevation: 0,
            shadowOffset: {
              width: 0,
              height: 0,
            },
            shadowOpacity: 0,
            zIndex: 2,
          }}
        >
          <Appbar.BackAction onPress={navigation.goBack} />
          <Appbar.Content
            title="选择收货地址"
            titleStyle={{ textAlign: 'center', fontSize: 16 }}
          />
          <Div w={56} h={56} />
        </Appbar.Header>

        <Div
          row
          rounded="circle"
          block
          bg="gray200"
          mx={15}
          mt={10}
          alignItems="center"
          px={10}
        >
          <Text>南京市</Text>
          <Input
            placeholder="小区/写字楼/学校 等"
            p={10}
            focusBorderColor="gray200"
            bg="gray200"
            fontSize="xs"
            prefix={<Icon name="search" color="gray300" fontFamily="Feather" />}
            onChangeText={(val) => {
              getSearch(val, 'nearby(31.983908,118.730357,10000)').then(
                (res) => {
                  setPoints(res.pois);
                }
              );
            }}
          />
        </Div>
      </Div>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#fff',
        }}
      >
        <Div px={15}>
          {points.map((item) => {
            return (
              <AddressItem
                info={item}
                key={item.id}
                onPress={() => {
                  navigation.navigate('Home');
                }}
              />
            );
          })}
        </Div>
      </ScrollView>
    </>
  );
}

function AddressItem({ info, onPress }) {
  const distance =
    info._distance > 1000
      ? `${(info._distance / 1000).toFixed(2)}km`
      : `${info._distance}m`;
  return (
    <Button bg="hide" block p={0} onPress={onPress}>
      <Div borderBottomWidth={1} borderColor="gray200" py={5} flex={1}>
        <Div row alignItems="center">
          <Text fontSize="xl" flex={1} fontWeight="bold">
            {info.title}
          </Text>
          <Text fontSize="sm" color="gray300">
            {distance}
          </Text>
        </Div>
        <Text fontSize="sm" color="gray300" mt={5}>
          {info.address}
        </Text>
      </Div>
    </Button>
  );
}