import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import * as Application from 'expo-application';
import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { useTranslation } from 'react-i18next';

import useModel from 'flooks';
import User from '../../flooks/User';

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

export default function AppSettingScreen() {
  const { logout } = useModel(User, []);
  const { t } = useTranslation();

  return (
    <>
      <Header title="设置" />
      <ScrollView>
        <Div row bg="white" p={20} mt={10}>
          <Text fontSize="sm" textAlign="left" flex={1}>
            {t('deng-lu-mi-ma')}
          </Text>

          <Text fontSize="sm" textAlign="left">
            {t('she-zhi-mi-ma')}
          </Text>
          <Icon name="right" fontSize="xl" />
        </Div>

        <Div row bg="white" p={20} mt={10}>
          <Text fontSize="sm" textAlign="left" flex={1}>
            {t('ban-ben-hao')}
          </Text>
          <Text fontSize="sm" textAlign="left">
            v{Application.nativeApplicationVersion}
          </Text>
          <Icon name="right" fontSize="xl" />
        </Div>

        <Button block bg="brand500" m={10} onPress={logout}>
          {t('tui-chu-deng-lu')}
        </Button>
      </ScrollView>
    </>
  );
}