import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Text } from 'react-native-magnus';

import { useTranslation } from 'react-i18next';
import { useNavigation } from '@react-navigation/native';
import { useRequest } from '@umijs/hooks';
import useModel from 'flooks';
import userCoupon from './model'; // 优惠券模块

export default function SettingCom() {
  const { userCouponList, init } = useModel(userCoupon, ['userCouponList']);
  useRequest(init, {});

  const navigation = useNavigation();
  const { t } = useTranslation();

  return (
    <Button
      block
      m={5}
      bg="white"
      rounded="none"
      onPress={() => navigation.navigate('Coupon')}
    >
      <Div alignItems="center">
        <Text fontSize="xl" fontWeight="bold" textAlign="left">
          {t('hong-bao-ka-quan')}
        </Text>
        <Div row mt={2}>
          <Text fontSize="sm" color="red500" textAlign="left">
            {userCouponList.length}
          </Text>
          <Text fontSize="sm" textAlign="left">
            {t('ge-wei-shi-yong-hong-bao')}
          </Text>
        </Div>
      </Div>
    </Button>
  );
}