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

import useModel from 'flooks';
import { useNavigation } from '@react-navigation/native';

import { useTranslation } from 'react-i18next';

import user from '../../../flooks/User';
import MapModel from '../../Map/model';

export default function Header() {
  const { t, i18n } = useTranslation();
  const { chooseInfo, getChooseInfo } = useModel(MapModel, [
    'chooseInfo',
    'getChooseInfo',
  ]);
  const { state, setTrue, setFalse } = useBoolean(false);

  const { logout } = useModel(user, []);

  const navigation = useNavigation();

  const addressName = useCreation(() => {
    if (chooseInfo) {
      return chooseInfo.addressName;
    } else {
      return '';
    }
  }, [chooseInfo]);

  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={() => navigation.navigate('HomeAddress')}
          block
          bg="hiden"
          p={0}
          flex={1}
        >
          <Div flex={1} row>
            <Icon
              name="navigation"
              color="brand500"
              fontFamily="Feather"
              ml={15}
            />
            <Text
              numberOfLines={2}
              ellipsizeMode="tail"
              fontSize="xl"
              ml={5}
              fontWeight="bold"
              flex={1}
            >
              {getChooseInfo.loading ? t('jia-zai-zhong') : addressName}
            </Text>
          </Div>
        </Button>

        <Menu
          visible={state}
          onDismiss={setFalse}
          anchor={<Appbar.Action icon="dots-vertical" onPress={setTrue} />}
        >
          <Menu.Item
            onPress={() => {
              setFalse();
              navigation.navigate('MapScreen');
            }}
            title={t('di-tu-xuan-dian-ce-shi')}
          />
          <Menu.Item onPress={logout} title={t('tui-chu-deng-lu')} />
          <Menu.Item
            onPress={() => {
              const list = ['zh', 'th', 'en'];
              i18n.changeLanguage(
                list[(list.indexOf(i18n.language) + 1) % list.length]
              );
            }}
            title={t('qie-huan-yu-yan')}
          />
          <Menu.Item onPress={() => {}} title="版本0914 已取消订单" />
        </Menu>
      </Appbar.Header>
    </>
  );
}