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 useModel from 'flooks';
import User from '../../flooks/User';

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

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

  return (
    <>
      <Header title="设置" />
      <ScrollView>
        <Div row bg="white" p={20} mt={10}>
          <Text fontSize="sm" textAlign="left" flex={1}>
            登录密码
          </Text>

          <Text fontSize="sm" textAlign="left">
            设置密码
          </Text>
          <Icon name="right" fontSize="xl" />
        </Div>

        <Div row bg="white" p={20} mt={10}>
          <Text fontSize="sm" textAlign="left" flex={1}>
            版本号
          </Text>
          <Text fontSize="sm" textAlign="left">
            v{Application.nativeApplicationVersion}
          </Text>
          <Icon name="right" fontSize="xl" />
        </Div>

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