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 { useRequest } from 'ahooks';
import useModel from 'flooks';

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

import { getMoney } from '../utils/SystemUtils';
import request from '../utils/RequestUtils';
import { today } from '../utils/TimeUtils';
import { useTranslation } from 'react-i18next';

import ReacordCom from './ReacordCom';

export default function MineWalletScreen({
  navigation,
}: StackScreenProps<RootStackParamList, 'Login'>) {
  const { t } = useTranslation();
  const { userInfo } = useModel(User, ['userInfo']);

  const { data, loading } = useRequest(
    () => {
      return request.get(__DEV__ ? '/moneyRecord/all' : '/moneyRecord/my', {
        params: {
          query: {
            time: today(),
          },
        },
      });
    },
    {
      formatResult: (response) => response.content,
      initialData: [],
      defaultLoading: false,
    }
  );

  const { money } = userInfo;

  return (
    <Div bg="gray100" flex={1}>
      <Div bg="yellow500" row>
        <Text color="red700" fontSize="sm" flex={1} pl={20} pt={30}>
          {t('yu-e')}
        </Text>
        <Text
          flex={1}
          textAlign="center"
          fontSize="6xl"
          color="white"
          fontWeight="bold"
          py={20}
        >
          {getMoney(money)}
        </Text>
        <Button
          onPress={() => navigation.navigate('BankCard')}
          flex={1}
          bg="transparent"
          alignSelf="flex-end"
          py={30}
        >
          <Text
            textDecorLine="underline"
            textDecorColor="white"
            color="white"
            fontSize="xl"
          >
            {t('ti-xian')}
          </Text>
        </Button>
      </Div>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
        }}
        stickyHeaderIndices={[0, 2]}
      >
        <Div row h={40} alignItems="center" bg="gray100" px={20}>
          <Text flex={1} fontSize="sm">
            {t('jin-ri-zhang-dan')}
          </Text>
          <Text fontSize="sm" color="gray500">
            {t('jin-ri-shou-ru')}¥ 16,752.95
          </Text>
          <Text fontSize="sm" color="gray500" ml={10}>
            {t('jin-ri-zhi-chu')} ¥ 6,752.95
          </Text>
        </Div>

        <Div bg="white" px={15}>
          {data.map((item) => {
            return <ReacordCom key={item.id} info={item} />;
          })}

          {data.length == 0 && !loading && (
            <Text p={15} textAlign="center">
              {t('jin-ri-huan-mei-you-zhang-dan-xin-xio')}
            </Text>
          )}
        </Div>
        <Button
          p={0}
          block
          mb={50}
          bg="white"
          mt={10}
          onPress={() => navigation.navigate('MineRecord')}
        >
          <Div flex={1} row h={52} alignItems="center" px={15}>
            <Text flex={1} fontSize="sm">
              {t('wo-de-dui-zhang-dan')}
            </Text>

            <Icon ml={5} name="right" fontSize="sm" />
          </Div>
        </Button>
      </ScrollView>
    </Div>
  );
}