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,
  Icon,
} from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { Modal, Portal, TouchableRipple, Badge } from 'react-native-paper';
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模块通用方法

const AddressItem = ({ info, editEvent, isChoose, leftEvent }) => {
  return (
    <>
      <Div row alignItems="center" py={15}>
        <Button bg="white" onPress={leftEvent}>
          {isChoose ? (
            <Icon name="checkcircle" color="#FFC21C" size={16} />
          ) : (
            <Div
              w={16}
              h={16}
              rounded="circle"
              borderWidth={1}
              borderColor="#787878"
            />
          )}
        </Button>
        <Button block flex={1} mx={15} p={0} bg="hide" onPress={leftEvent}>
          <Div flex={1}>
            <Text fontSize="sm" textAlign="left">
              {info.addressName}
            </Text>
            <Text fontSize="xs" textAlign="left">
              {info.addressInfo}
            </Text>
            <Div row>
              <Text fontSize="xs" color="gray300" textAlign="left">
                {info.name}
              </Text>
              <Text ml={15} fontSize="xs" color="gray300" textAlign="left">
                {info.phone}
              </Text>
            </Div>
          </Div>
        </Button>
        <Button onPress={editEvent} bg="white">
          <Icon name="edit" color="#787878" size={20} />
        </Button>
      </Div>

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

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

  const addressRequest = useRequest(getAddressList);
  const [visible, setvisible] = React.useState(false);

  const navigation = useNavigation();

  useUnmount(() => {
    setShow(false);
  });

  useFocusEffect(
    React.useCallback(() => {
      if (goEdit) {
        setvisible(true);
      }
    }, [goEdit])
  );

  const chooseaddressInfo = useCreation(() => {
    if (chooseAddressId) {
      return addressList.find((item) => {
        return item.id === chooseAddressId;
      });
    } else {
      return {};
    }
  }, [chooseAddressId, addressList]);

  return (
    <>
      <TouchableRipple
        onPress={() => {
          setvisible(true);
        }}
      >
        <Div row alignItems="center" minH={56} py={10}>
          {chooseAddressId ? (
            <Div flex={1} overflow="hidden">
              <Text
                fontSize="xl"
                textAlign="left"
                // numberOfLines={1}
                // ellipsizeMode="tail"
              >
                {chooseaddressInfo.addressName}
              </Text>
              <Text fontSize="sm" color="gray300" textAlign="left">
                {chooseaddressInfo.number}
              </Text>
              <Div row>
                <Text fontSize="xs" color="gray300" textAlign="left">
                  {chooseaddressInfo.name}
                </Text>
                <Text mx={10} fontSize="xs" color="gray300" textAlign="left">
                  {chooseaddressInfo.sex}
                </Text>
                <Text fontSize="xs" color="gray300" textAlign="left">
                  {chooseaddressInfo.phone}
                </Text>
              </Div>
            </Div>
          ) : (
            <>
              <Text color="gray300">{t('qing-xuan-ze-di-zhi')}</Text>
              <Div flex={1} />
            </>
          )}

          <Icon name="right" color="#000" />
        </Div>
      </TouchableRipple>
      <Div h={1} bg="gray200" />
      <Portal>
        <Modal
          visible={visible}
          contentContainerStyle={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            maxHeight: '70%',
            zIndex: 2,
            justifyContent: 'flex-end',
          }}
          onDismiss={() => {
            setvisible(false);
            setShow(false);
          }}
        >
          <Div bg="white" px={15} mt={56}>
            <Div py={15}>
              <Text textAlign="center">{t('xuan-ze-shou-huo-di-zhi')}</Text>
            </Div>

            <Div h={1} bg="gray200" />
            {addressList.map((item) => {
              return (
                <AddressItem
                  key={item.id}
                  info={item}
                  isChoose={chooseAddressId === item.id}
                  leftEvent={() => {
                    setChoose(item.id);
                    setvisible(false);
                    setShow(false);
                  }}
                  editEvent={() => {
                    setvisible(false);
                    navigation.navigate('EditAddress', { id: item.id });
                    setShow(true);
                  }}
                />
              );
            })}

            {addressList.length === 0 && (
              <Div p={30}>
                <Text color="gray300" textAlign="center">
                  {t('zan-wu-shu-ju')}
                </Text>
              </Div>
            )}

            <Button
              bg="white"
              position="absolute"
              right={20}
              top={15}
              onPress={() => {
                setvisible(false);
                navigation.navigate('EditAddress');
                setShow(true);
              }}
            >
              <Icon name="plus" color="#b5b5b5" size={16} />
            </Button>
          </Div>
        </Modal>
      </Portal>
    </>
  );
}