/* eslint-disable global-require */
import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';

import { useTranslation } from 'react-i18next';
import useModel from 'flooks';
import Order from './model'; // Order模块通用方法

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

export default function RewardRiderScreen({ navigation }) {
  const { rewardRider } = useModel(Order, []);
  const { t } = useTranslation();

  const reward = () => {
    rewardRider().then(() => {
      navigation.goBack();
    });
  };

  return (
    <>
      <Header title={t('da-shang-qi-shou')} />
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#eee',
        }}
      >
        <Div bg="white" p={10} mx={10} mt={10} rounded="xs">
          <Div row alignItems="center">
            <Div bg="gray200" w={53} h={53} />
            <Text fontSize="2xl" fontWeight="bold" ml={10}>
              胖肥肥
            </Text>
            <Text fontSize="xs" ml={5} flex={1}>
              等级
            </Text>
            <Div>
              <Button
                borderColor="brand500"
                borderWidth={1}
                w={100}
                fontSize="xs"
                bg="white"
                color="black"
              >
                {t('lian-xi-qi-shou')}
              </Button>
            </Div>
          </Div>

          <Div row mt={5}>
            <Div flex={1} row>
              <Text fontSize="xs">{t('zhun-shi-shuai')}</Text>
              <Text fontSize="xs" ml={13}>
                100%
              </Text>
            </Div>

            <Div flex={1} row>
              <Text fontSize="xs">{t('ri-jun-song-dan')}</Text>
              <Text fontSize="xs" ml={13}>
                99
              </Text>
            </Div>
          </Div>

          <Div row flexWrap="wrap">
            <Div w="33.33%" px={3} mt={5}>
              <Button
                fontSize="xs"
                color="black"
                bg="white"
                borderColor="brand500"
                borderWidth={1}
                rounded="xs"
                block
              >
                颜值一流 999+
              </Button>
            </Div>
            <Div w="33.33%" px={3} mt={5}>
              <Button
                fontSize="xs"
                color="black"
                bg="white"
                borderColor="brand500"
                borderWidth={1}
                rounded="xs"
                block
              >
                穿着得体 999+
              </Button>
            </Div>
            <Div w="33.33%" px={3} mt={5}>
              <Button
                fontSize="xs"
                color="black"
                bg="white"
                borderColor="brand500"
                borderWidth={1}
                rounded="xs"
                block
              >
                穿着得体 999+
              </Button>
            </Div>
            <Div w="33.33%" px={3} mt={5}>
              <Button
                fontSize="xs"
                color="black"
                bg="white"
                borderColor="brand500"
                borderWidth={1}
                rounded="xs"
              >
                穿着得体 999+
              </Button>
            </Div>
            <Div w="33.33%" px={3} mt={5}>
              <Button
                fontSize="xs"
                color="black"
                bg="white"
                borderColor="brand500"
                borderWidth={1}
                rounded="xs"
              >
                穿着得体 999+
              </Button>
            </Div>
          </Div>
        </Div>

        <Div bg="white" mt={10} mx={10} px={10} pt={10} pb={30}>
          <Text fontSize="xl" fontWeight="bold">
            {t('da-shang-qi-shou')}
          </Text>
          <Text fontSize="xs" color="gray500" mt={10}>
            {t('da-shang-jiang-quanezhuan-gei-qi-shou')}
          </Text>
          <Text fontSize="xs" color="gray500" mt={10}>
            上次为您提前12:02分钟送达订单哦
          </Text>

          <Div row mt={10}>
            <Div w="33.33%" px={3} alignItems="center">
              <Image
                w={66}
                h={66}
                source={require('../../assets/images/jinbi1.png')}
              />
              <Button
                fontSize="xs"
                color="black"
                bg="white"
                borderColor="brand500"
                borderWidth={1}
                rounded="xs"
                block
                onPress={reward}
              >
                {t('da-shang')}
              </Button>
            </Div>
            <Div w="33.33%" px={3} alignItems="center">
              <Image
                w={66}
                h={66}
                source={require('../../assets/images/jinbi2.png')}
              />
              <Button
                fontSize="xs"
                color="black"
                bg="white"
                borderColor="brand500"
                borderWidth={1}
                rounded="xs"
                block
                onPress={reward}
              >
                {t('da-shang')}
              </Button>
            </Div>
            <Div w="33.33%" px={3} alignItems="center">
              <Image
                w={66}
                h={66}
                source={require('../../assets/images/jinbi3.png')}
              />

              <Button
                fontSize="xs"
                color="black"
                bg="white"
                borderColor="brand500"
                borderWidth={1}
                rounded="xs"
                block
                onPress={reward}
              >
                {t('da-shang')}
              </Button>
            </Div>
          </Div>
        </Div>
      </ScrollView>
    </>
  );
}