import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
import { TouchableRipple } from 'react-native-paper';
import { ScrollView } from 'react-native-gesture-handler';

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

import Header from '../../components/Header';

const counpon = {
  amount: 18,
  enabled: true,
  endDate: '2022-12-11',
  fullAmount: 50,
  id: 744,
  merchantId: 189,
  name: '六一优惠',
  startDate: '2022-12-08',
};

const CounponItem = ({ info, isEnd, canUse, isChoose }) => {
  const { t } = useTranslation();
  const navigation = useNavigation();
  return (
    <Div mt={10} mx={5}>
      <TouchableRipple
        disabled={!canUse}
        onPress={() => navigation.navigate('Home', { screen: 'Home' })}
      >
        <Div row bg="white" alignItems="center" pt={15} pr={15}>
          <Div minW={80} alignItems="center">
            <Text color={!canUse ? 'gray400' : 'red500'} fontSize="xl">
              ¥{counpon.amount}
            </Text>
            {counpon.fullAmount > 0 && (
              <Text fontSize="xs" color="gray300" textAlign="left">
                {t('man')}
                {counpon.fullAmount}
                {t('yuan-ke-yong')}
              </Text>
            )}
            {counpon.fullAmount === 0 && (
              <Text fontSize="xs" color="gray300" textAlign="left">
                {t('wu-jinemen-jian')}
              </Text>
            )}
          </Div>
          <Div flex={1}>
            <Text
              color={!canUse ? 'gray400' : 'black'}
              fontSize="xl"
              fontWeight="bold"
            >
              {counpon.name}
            </Text>
            <Text fontSize="xs" color="gray300" textAlign="left">
              {t('xian')}
              {counpon.startDate}
              {t('zhi')}
              {counpon.endDate}
              {t('shi-yong')}
            </Text>
          </Div>
          {canUse && (
            <Icon
              name="checkcircle"
              color={isChoose ? 'brand500' : 'gray200'}
              size={16}
            />
          )}
        </Div>
        <Div pb={15}>
          {isEnd && <Text mt={10}>{t('you-hui-quan-yi-guo-qi')}</Text>}
          {!isEnd && !canUse && <Text mt={10}>{t('dian-pu-bu-ke-yong')}</Text>}
        </Div>
      </TouchableRipple>
    </Div>
  );
};

export default function OrderCouponScreen() {
  const {
    userCouponList,
    userCouponListHis,
    init,
    getBadList,
  } = useModel(userCoupon, ['userCouponList', 'userCouponListHis']);

  useRequest(init, {});
  useRequest(getBadList, {});
  const { t } = useTranslation();

  return (
    <>
      <Header title={t('xuan-ze-you-hui-quan')} />
      <ScrollView
        contentContainerStyle={{ flexGrow: 1, backgroundColor: '#eee' }}
      >
        {userCouponList.map((item) => {
          return <CounponItem key={item.id} info={item} canUse />;
        })}

        {userCouponList.length === 0 && (
          <Div p={10} alignItems="center">
            <Text textAlign="center">{t('wu-ke-yong-you-hui-quan')}</Text>
          </Div>
        )}

        {userCouponListHis.map((item) => {
          return <CounponItem key={item.id} info={item} isEnd canUse={false} />;
        })}
      </ScrollView>
    </>
  );
}