import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';

import { RootStackParamList } from '../types';
import { useTranslation } from 'react-i18next';

import useModel from 'flooks';

import User from '../stores/User';

import { connect } from '../utils/SystemUtils';

const logo = require('../assets/images/logo.png');

export default function RegisterScreen({ navigation }: StackScreenProps) {
  const { userInfo, riderInfo } = useModel(User, ['userInfo']);
  const { avatar, nickname, money } = userInfo;
  const { jobNumber } = riderInfo;
  const { t } = useTranslation();

  return (
    <Div bg="yellow500" flex={1}>
      <ScrollView
        contentContainerStyle={{ flexGrow: 1, backgroundColor: '#f2f2f2' }}
      >
        <Div h={112} bg="yellow500" justifyContent="flex-end" p={20}>
          <Button
            p={0}
            bg="transparent"
            onPress={() =>
              navigation.navigate('MineStack', {
                screen: 'MineInfo',
              })
            }
          >
            <Div flex={1} row alignItems="center">
              <Image w={53} h={53} source={avatar ? { uri: avatar } : logo} />
              <Div flex={1} ml={14}>
                <Div row alignItems="center">
                  <Text fontSize="xl" fontWeight="bold" flex={1}>
                    {nickname}
                  </Text>

                  <Icon color="black" name="right" ml={10} fontSize="xl" />
                </Div>
                <Text fontSize="sm" mt={5}>
                  {t('gong-hao')}：{jobNumber}
                </Text>
              </Div>
            </Div>
          </Button>
        </Div>
        <Div bg="gray100" p={10}>
          <Button
            block
            bg="white"
            p={10}
            rounded="sm"
            onPress={() =>
              navigation.navigate('MineStack', { screen: 'Wallet' })
            }
          >
            <Div flex={1} row>
              <Div flex={1}>
                <Text>{t('wo-de-ding-dong-bi')}</Text>
                <Div row alignItems="center" mt={5}>
                  <Text fontSize="xl" color="yellow400">
                    578.63
                  </Text>
                  <Text fontSize="sm" color="gray700" ml={6}>
                    {t('jin-ri-shou-ru')}
                  </Text>
                  <Text fontSize="xl" color="yellow400" ml={35}>
                    578.63
                  </Text>
                  <Text fontSize="sm" color="gray700" ml={6}>
                    {t('jin-ri-shou-ru')}
                  </Text>
                </Div>
              </Div>
              <Icon name="right" />
            </Div>
          </Button>
        </Div>
        <Button
          block
          bg="white"
          p={20}
          rounded="sm"
          mb={10}
          onPress={() =>
            navigation.navigate('MineStack', {
              screen: 'Heat3D',
            })
          }
        >
          <Div flex={1} row>
            <Text flex={1}>{t('dan-liang-re-li-tu')}</Text>
            <Icon name="right" />
          </Div>
        </Button>
        <Button
          block
          bg="white"
          p={20}
          rounded="sm"
          mb={10}
          onPress={() =>
            navigation.navigate('MineStack', {
              screen: 'MineAppraisal',
            })
          }
        >
          <Div flex={1} row>
            <Text flex={1}>{t('wo-de-ping-jia')}</Text>
            <Icon name="right" />
          </Div>
        </Button>
        <Button
          block
          bg="white"
          p={20}
          rounded="sm"
          mb={10}
          onPress={() =>
            navigation.navigate('MineStack', {
              screen: 'MineComplaint',
            })
          }
        >
          <Div flex={1} row>
            <Text flex={1}>{t('wo-de-tou-su')}</Text>
            <Icon name="right" />
          </Div>
        </Button>
        <Button block bg="white" p={20} rounded="sm" mb={10}>
          <Div flex={1} row>
            <Text flex={1}>{t('pei-xun-zhong-xin')}</Text>
            <Icon name="right" />
          </Div>
        </Button>
        <Button
          block
          bg="white"
          p={20}
          rounded="sm"
          mb={10}
          onPress={() => {
            connect(navigation);
          }}
        >
          <Div flex={1} row>
            <Text flex={1}>{t('lian-xi-ke-fu')}</Text>
            <Icon name="right" />
          </Div>
        </Button>
        <Button
          block
          bg="white"
          p={20}
          rounded="sm"
          mb={10}
          onPress={() => {
            navigation.navigate('MineStack', {
              screen: 'Setting',
            });
          }}
        >
          <Div flex={1} row>
            <Text flex={1}>{t('she-zhi')}</Text>
            <Icon name="right" />
          </Div>
        </Button>
      </ScrollView>
    </Div>
  );
}