import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Appbar, Menu } from 'react-native-paper';
import { useBoolean } from '@umijs/hooks';
import { Icon, Text, Button, Div } from 'react-native-magnus';

import useModel from 'flooks';
import words from '../flooks/Words';
import user from '../flooks/User';

export default function Header() {
  const { state, setTrue, setFalse } = useBoolean(false);
  const {
    setlocal,
    TlocationWord,
    TchangeToth,
    TchangeToChinese,
    local,
  } = useModel(words);
  const { logout } = useModel(user, []);

  const [location, setLocation] = React.useState();
  console.log(location);
  function locationEvent() {
    getLocation().then((res) => {
      // console.log(res);
      setLocation(res);
    });
  }

  return (
    <>
      <StatusBar backgroundColor="transparent" style="dark" translucent />

      <Appbar.Header
        statusBarHeight={0}
        theme={{ colors: { primary: '#fff' } }}
        style={{
          elevation: 0,
          shadowOffset: {
            width: 0,
            height: 0,
          },
          shadowOpacity: 0,
          zIndex: 2,
        }}
      >
        <Button onPress={locationEvent} block bg="hiden" p={0} flex={1}>
          <Div flex={1} row color="brand500">
            <Icon
              name="navigation"
              // color="brand500"
              fontFamily="Feather"
              ml={15}
            />
            <Text
              numberOfLines={2}
              ellipsizeMode="tail"
              fontSize="xl"
              ml={5}
              fontWeight="bold"
              flex={1}
            >
              {location ? location.addressName : ''}
            </Text>
          </Div>
        </Button>

        <Menu
          visible={state}
          onDismiss={setFalse}
          anchor={<Appbar.Action icon="dots-vertical" onPress={setTrue} />}
        >
          <Menu.Item onPress={logout} title="退出登录" />

          <Menu.Item
            onPress={() => {
              setlocal();
            }}
            title={local ? TchangeToChinese : TchangeToth}
          />
          <Menu.Item onPress={() => {}} title="版本06.28.1" />
        </Menu>
      </Appbar.Header>
    </>
  );
}