import * as React from 'react'
import { StatusBar, Platform } from 'react-native'
import Constants from 'expo-constants'
import { Appbar, Menu, Divider } from 'react-native-paper'
import { useBoolean } from '@umijs/hooks'
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, [])

  return (
    <>
      {Platform.OS !== 'ios' && <StatusBar backgroundColor="#fff" />}

      <Appbar.Header
        theme={{ colors: { primary: '#fff' } }}
        statusBarHeight={Platform.OS === 'ios' ? Constants.statusBarHeight : 0}
        style={{
          elevation: 0,
          shadowOffset: {
            width: 0,
            height: 0,
          },
          shadowOpacity: 0,
        }}
      >
        <Appbar.Content title={TlocationWord} titleStyle={{ fontSize: 16 }} />

        <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.04.0.1" />
        </Menu>
      </Appbar.Header>
    </>
  )
}