import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Text } from 'react-native-magnus';
import { TouchableRipple } from 'react-native-paper';
import { ScrollView } from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/FontAwesome';
import { useTranslation } from 'react-i18next';

import useModel from 'flooks';
import User from '../../flooks/User'; // detail模块通用方法

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

import { prompt } from '../../Utils/TotastUtils';

export default function LinksScreen() {
  const { t } = useTranslation();
  const { userInfo, uploadInfo, logout } = useModel(User, ['userInfo']);
  const { avatar, nickname } = userInfo || {
    nickname: t('wei-deng-lu'),
    avatar: '',
  };

  return (
    <>
      <Header title={t('ge-ren-zi-liao')} />
      <ScrollView>
        <Div row bg="white" rounded="none" p={9} alignItems="center" my={5}>
          <Text flex={1}>{t('tou-xiang')}：</Text>
          <ImagePicker
            img={avatar}
            h={33}
            w={33}
            setImg={(img) => uploadInfo({ avatar: img })}
          />
          <Icon name="angle-right" color="#000" />
        </Div>
        <TouchableRipple
          onPress={() => {
            prompt(t('ni-cheng'), t('qing-shu-ru-ni-cheng'), nickname, (val) =>
              uploadInfo({ nickname: val })
            );
          }}
        >
          <Div
            row
            bg="white"
            rounded="none"
            p={9}
            alignItems="center"
            my={5}
            minH={51}
          >
            <Text flex={1}>{t('ni-cheng')}：</Text>
            <Text mr={5}>{nickname}</Text>
            <Icon name="angle-right" color="#000" />
          </Div>
        </TouchableRipple>

        {/* <Button block bg="brand500" m={10} onPress={logout}>
          退出登录
        </Button> */}
      </ScrollView>
    </>
  );
}