import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';

import { Flex, SwipeAction } from '@ant-design/react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { useTranslation } from 'react-i18next';

import { useRequest, useCreation } from '@umijs/hooks';
import useModel from 'flooks';
import AddressModel from './model'; // detail模块通用方法

import Header from '../../components/Header';

const AddressItem = ({ info, goNext, del }) => {
  const { t } = useTranslation();
  const right = [
    {
      text: t('shan-chu'),
      onPress: () => {
        console.log('删除');
        del();
      },
      style: { backgroundColor: 'red', color: 'white' },
    },
  ];
  return (
    <SwipeAction
      autoClose
      style={{ backgroundColor: 'transparent' }}
      right={right}
    >
      <Div bg="white" px={15} py={10} my={5} mx={10}>
        <Text fontSize="xl" textAlign="left">
          {info.addressName}
        </Text>
        <Div row>
          <Text fontSize="xs" color="gray300" textAlign="left">
            {info.name}
          </Text>
          <Text fontSize="xs" color="gray300" textAlign="left">
            {info.sex}
          </Text>
          <Text ml={15} fontSize="xs" color="gray300" textAlign="left">
            {info.phone}
          </Text>
        </Div>
        <Div row justifyContent="flex-end">
          {info.isDefault && (
            <Button fontSize="xs" bg="brand500">
              {t('mo-ren')}
            </Button>
          )}
          <Button
            fontSize="xs"
            ml={15}
            bg="white"
            color="gray600"
            borderColor="gray300"
            borderWidth={1}
            onPress={goNext}
          >
            {t('bian-ji')}
          </Button>
        </Div>
      </Div>
    </SwipeAction>
  );
};

export default function AddressScreen({ navigation }) {
  const { t } = useTranslation();
  const { addressList, getAddressList, delAddress } = useModel(AddressModel, [
    'addressList',
  ]);
  const addressRequest = useRequest(getAddressList);

  return (
    <>
      <Header title={t('di-zhi-lie-biao')} />
      <ScrollView>
        {addressList.map((item) => {
          return (
            <AddressItem
              key={item.id}
              info={item}
              del={() => {
                delAddress(item.id);
              }}
              goNext={() => {
                navigation.navigate('EditAddress', {
                  id: item.id,
                });
              }}
            />
          );
        })}
      </ScrollView>

      <Button
        block
        my={20}
        mx={15}
        bg="brand500"
        onPress={() => {
          navigation.navigate('EditAddress');
        }}
      >
        {t('xin-zeng-di-zhi')}
      </Button>
    </>
  );
}