/* eslint-disable global-require */
/* eslint-disable react/style-prop-object */
import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { List } from 'react-native-paper';
import { ScrollView } from 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import Constants from 'expo-constants';
import { useCreation } from '@umijs/hooks';
import { useTranslation } from 'react-i18next';

import useModel from 'flooks';
import User from '../../flooks/User'; // detail模块通用方法

import UserCoupon from '../userCoupon/SettingCom';

import { connectKefuOn } from '../../Utils/TotastUtils';

export default function UserScreen({ navigation }) {
  const { t } = useTranslation();
  const { userInfo } = useModel(User, ['id']);
  const { avatar, nickname, username } = userInfo || {
    nickname: '未登录',
  };
  const showNick = useCreation(() => {
    if (nickname) {
      return nickname;
    } else {
      return showUser;
    }
  }, [nickname]);

  const showUser = useCreation(() => {
    if (username) {
      const name = username.substring(4, 7);
      return username.replace(name, '****');
    } else {
      return username;
    }
  }, [username]);
  return (
    <>
      <StatusBar backgroundColor="transparent" style="dark" translucent />

      <ScrollView
        contentContainerStyle={{ flexGrow: 1, backgroundColor: '#eee' }}
      >
        <Div row bg="white" pt={Constants.statusBarHeight + 20} px={20} pb={20}>
          <Button
            bg="white"
            p={0}
            onPress={() => {
              navigation.navigate('Setting');
            }}
          >
            {avatar ? (
              <Image
                h={53}
                w={53}
                rounded="circle"
                source={{
                  uri: avatar,
                }}
              />
            ) : (
              <Image
                h={53}
                w={53}
                rounded="circle"
                source={require('../../assets/images/logo_1.png')}
              />
            )}
          </Button>
          <Div justifyContent="space-between" ml={10}>
            <Text fontSize="xl" fontWeight="bold" textAlign="left">
              {showNick}
            </Text>
            <Text fontSize="sm" textAlign="left">
              {t('ding-dong-wai-mai')}
              {showUser}
            </Text>
          </Div>
        </Div>
        <UserCoupon />
        <Div bg="white" mb={5}>
          <List.Item
            title={t('wo-de-shou-cang')}
            left={(props) => (
              <List.Icon {...props} icon="heart-outline" color="#FFB11E" />
            )}
            right={(props) => <List.Icon {...props} icon="chevron-right" />}
            onPress={() => navigation.navigate('Collection')}
          />
        </Div>
        <Div bg="white" mb={5}>
          <List.Item
            title={t('lian-xi-ke-fu')}
            left={(props) => (
              <List.Icon {...props} icon="headset" color="#FFB11E" />
            )}
            right={(props) => <List.Icon {...props} icon="chevron-right" />}
            onPress={connectKefuOn}
          />
        </Div>
        <Div bg="white" mb={5}>
          <List.Item
            title={t('wo-de-di-zhi')}
            left={(props) => (
              <List.Icon {...props} icon="map-marker-radius" color="#FFB11E" />
            )}
            right={(props) => <List.Icon {...props} icon="chevron-right" />}
            onPress={() => navigation.navigate('Address')}
          />
        </Div>
        <Div bg="white" mb={5}>
          <List.Item
            title={t('he-zuo-shen-qing')}
            left={(props) => (
              <List.Icon {...props} icon="briefcase" color="#FFB11E" />
            )}
            right={(props) => <List.Icon {...props} icon="chevron-right" />}
            onPress={() => navigation.navigate('Cooperation')}
          />
        </Div>
        <Div bg="white" mb={5}>
          <List.Item
            title={t('she-zhi')}
            left={(props) => (
              <List.Icon {...props} icon="cogs" color="#FFB11E" />
            )}
            right={(props) => <List.Icon {...props} icon="chevron-right" />}
            onPress={() => navigation.navigate('AppSetting')}
          />
        </Div>
        <Div bg="white" mb={5}>
          <List.Item
            title={t('yin-si-tiao-kuan')}
            left={(props) => (
              <List.Icon {...props} icon="card-text" color="#FFB11E" />
            )}
            right={(props) => <List.Icon {...props} icon="chevron-right" />}
            onPress={() => navigation.navigate('Rule')}
          />
        </Div>
        <Div bg="white" mb={5}>
          <List.Item
            title={t('yi-jian-fan-kui')}
            left={(props) => (
              <List.Icon {...props} icon="tooltip-plus" color="#FFB11E" />
            )}
            right={(props) => <List.Icon {...props} icon="chevron-right" />}
            onPress={() => navigation.navigate('FeedBack')}
          />
        </Div>
      </ScrollView>
    </>
  );
}