/* eslint-disable react/style-prop-object */
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 } from 'react-native-magnus';
import { Appbar } from 'react-native-paper';
import { ScrollView } from 'react-native-gesture-handler';
import { useCreation } from '@umijs/hooks';
import { useTranslation } from 'react-i18next';

import useModel from 'flooks';
import HomeModel from './Home/model';
import MapModel from '../Map/model';
import HomeAddressCom from '../Address/HomeAddressCom';

export default function AddressScreen({ navigation }) {
  const { locationInfo, getNowLocation, changeChooseInfo } = useModel(
    MapModel,
    ['locationInfo', 'getNowLocation']
  );
  const { t } = useTranslation();

  const addressName = useCreation(() => {
    if (locationInfo) {
      return locationInfo.addressName;
    } else {
      return '';
    }
  }, [locationInfo]);

  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={t('xuan-ze-shou-huo-di-zhi')}
            titleStyle={{ textAlign: 'center', fontSize: 16 }}
          />
          <Button alignSelf="center" bg="hide" color="brand500" px={20}>
            {t('guan-li')}
          </Button>
        </Appbar.Header>

        <Button
          rounded="circle"
          block
          bg="gray200"
          mx={15}
          mt={10}
          onPress={() => navigation.navigate('SearchMap')}
        >
          <Div row alignItems="center">
            <Icon name="search1" color="gray500" />
            <Text color="gray500" fontSize="xs">
              {t('xiao-qu-xie-zi-lou-xue-xiao-deng')}
            </Text>
          </Div>
        </Button>
      </Div>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#fff',
        }}
      >
        <Div px={15} py={10}>
          <Text color="gray500" fontSize="sm">
            {t('dang-qian-ding-wei')}
          </Text>
          <Div row>
            <Button
              onPress={() => {
                navigation.navigate('Home');
                if (addressName) {
                  changeChooseInfo(locationInfo);
                }
              }}
              block
              bg="hiden"
              p={0}
              flex={1}
            >
              <Div flex={1} row>
                <Icon name="navigation" color="brand500" fontFamily="Feather" />
                <Text
                  numberOfLines={1}
                  ellipsizeMode="tail"
                  fontSize="xl"
                  ml={5}
                  fontWeight="bold"
                  flex={1}
                >
                  {getNowLocation.loading
                    ? t('jia-zai-zhong')
                    : addressName || t('ding-wei-shi-bai')}
                </Text>
              </Div>
            </Button>
            <Button onPress={getNowLocation} bg="hiden" color="brand500">
              {t('zhong-xin-ding-wei')}
            </Button>
          </Div>
        </Div>

        <HomeAddressCom />
      </ScrollView>
    </>
  );
}