import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { Div, Button, Select, Image, Text, Avatar } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { Modal, Portal, TouchableRipple, Badge } from 'react-native-paper';
import Icon from 'react-native-vector-icons/FontAwesome';
import { useTranslation } from 'react-i18next';
import { useRequest, useCreation, useUnmount } from '@umijs/hooks';
import { useNavigation, useFocusEffect } from '@react-navigation/native';
import useModel from 'flooks';
import AddressModel from './model'; // detail模块通用方法
import MapModel from '../Map/model';

const AddressItem = ({ info, onPress }) => {
  return (
    <>
      <Button onPress={onPress} bg="hide" p={0} block>
        <Div flex={1} row alignItems="center" py={15}>
          <Div flex={1} mx={15}>
            <Text fontSize="sm" textAlign="left">
              {info.addressName}
            </Text>
            <Text fontSize="sm" color="gray300" textAlign="left">
              {info.number}
            </Text>
            <Div row>
              <Text fontSize="sm" color="gray300" textAlign="left">
                {info.name}
              </Text>
              <Text fontSize="sm" color="gray300" textAlign="left">
                ({info.sex})
              </Text>
              <Text ml={15} fontSize="sm" color="gray300" textAlign="left">
                {info.phone}
              </Text>
            </Div>
          </Div>
        </Div>
      </Button>

      <Div h={1} bg="gray200" />
    </>
  );
};

export default function HomeAddressCom() {
  const { t } = useTranslation();
  const {
    addressList,
    getAddressList,
    goEdit,
    setShow,
    chooseAddressId,
    setChoose,
  } = useModel(AddressModel, ['addressList', 'goEdit', 'chooseAddressId']);

  useRequest(getAddressList);

  const navigation = useNavigation();
  const { changeChooseInfo } = useModel(MapModel, []);
  useUnmount(() => {
    setShow(false);
  });

  return (
    <>
      <Div bg="white" px={15} pb={15}>
        <Div h={1} bg="gray200" />
        <Text py={12} fontSize="sm" color="gray500">
          {t('shou-huo-di-zhi')}
        </Text>
        <Div h={1} bg="gray200" />
        {addressList.map((item) => {
          return (
            <AddressItem
              key={item.id}
              info={item}
              isChoose={chooseAddressId === item.id}
              onPress={() => {
                changeChooseInfo({
                  addressName: item.addressName,
                  location: {
                    lat: item.latitude,
                    lng: item.longitude,
                  },
                });
                navigation.navigate('Home');
              }}
            />
          );
        })}

        {addressList.length === 0 && (
          <>
            <Div p={20}>
              <Text color="gray300" textAlign="center">
                {t('dang-qian-zan-wu-di-zhi')}
              </Text>
            </Div>
            <Div h={1} bg="gray200" />
          </>
        )}

        <Button
          block
          textAlign="left"
          px={0}
          bg="hide"
          py={15}
          onPress={() => {
            navigation.navigate('EditAddress');
          }}
        >
          <Text flex={1} color="brand500">
            {t('xin-zeng-di-zhi')}
          </Text>
        </Button>
      </Div>
    </>
  );
}