/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable no-underscore-dangle */
import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import {
  StyleSheet,
  View,
  Clipboard,
  Dimensions,
  Animated,
  PanResponder,
  findNodeHandle,
  UIManager,
  TouchableOpacity,
  RefreshControl,
} from 'react-native';
import { Div, Button, Image, Text } from 'react-native-magnus';
import { Appbar, Menu } from 'react-native-paper';
import Constants from 'expo-constants';

import { Flex } from '@ant-design/react-native';
import { ScrollView } from 'react-native-gesture-handler';

import { useRequest, useCreation, useMount } from '@umijs/hooks';
import { useTranslation } from 'react-i18next';

import { useRoute } from '@react-navigation/native';
import { useAnimation } from 'react-native-animation-hooks';
import useModel from 'flooks';
import Toast from '../../flooks/Toast';

import Header from '../Order/Header'; // 头部
import PayCom from './PayCom';

import OrderModel from '../Order/model';

import { connectKefu } from '../../Utils/TotastUtils';
import {
  merchantStatusMap,
  orderStatusMap,
  RiderStatusMap,
  payMap,
  reasonMap,
} from '../../Utils/OrderUtils';
import Time from '../../Utils/TimeUtils';

import MapScreen from '../Map/MapScreen';

export default function PayOrderScreen({ navigation }) {
  const { t } = useTranslation();
  const [orderInfo, setorderInfo] = React.useState({
    merchant: {},
    orderGoodsSpecs: [],
  });

  const { payOrder } = useModel(OrderModel, []);

  const { loading, success, warnning, clearLoading } = useModel(Toast, []);

  const route = useRoute();
  const { params } = route;
  const { orderId } = params || 0;

  const orderRequest = useRequest(`/orderInfo/get/${orderId}`, {
    refreshDeps: [orderId],
    onSuccess: (result) => {
      setorderInfo(result);
    },
  });

  const { merchant, orderGoodsSpecs } = orderInfo;

  return (
    <Div bg="gray200" w="100%" flex={1}>
      <Header title="收银台" orderId={orderId} />
      <ScrollView
        contentContainerStyle={{ flexGrow: 1, backgroundColor: '#eee' }}
        refreshControl={
          <RefreshControl
            refreshing={orderRequest.loading}
            onRefresh={orderRequest.run}
          />
        }
      >
        <Div pt={10} pb={10} px={15}>
          <View style={[styles.card]}>
            <Text fontSize="xl">
              {t('yu-ji')}
              {new Time(
                orderInfo.timeOfArrival,
                'yyyy-MM-DD HH:mm:ss'
              ).getFormat('HH:mm')}
              {t('song-da')}
            </Text>
          </View>
          <View style={[styles.card]}>
            <Div row pb={10}>
              <Text fontSize="xl" fontWeight="bold">
                {orderInfo.merShowName}
              </Text>
            </Div>
            <Div>
              {orderGoodsSpecs.map((item) => {
                return (
                  <GoodsItem info={item} goods={item.goods} key={item.id} />
                );
              })}
            </Div>
            <Flex style={styles.info}>
              <Flex.Item>
                <Flex>
                  <Text fontSize="xs" color="gray300" textAlign="left">
                    {t('bao-zhuang-fei')}
                  </Text>
                  <Text fontSize="xs" color="gray300" textAlign="left">
                    {t('can-he')}
                  </Text>
                </Flex>
              </Flex.Item>
              <Text fontSize="xs" color="gray300" textAlign="left">
                ¥{orderInfo.packingPrice}
              </Text>
            </Flex>
            <Flex style={styles.info}>
              <Flex.Item>
                <Text fontSize="xs" color="gray300" textAlign="left">
                  {t('pei-song-fei-ding-dong-zhuan-song')}
                </Text>
              </Flex.Item>
              <Text fontSize="xs" color="gray300" textAlign="left">
                ¥{orderInfo.deliveryAmount}
              </Text>
            </Flex>
            <Flex style={styles.info}>
              <Flex.Item>
                <Text fontSize="xs" color="gray300" textAlign="left">
                  {t('man-jian')}
                </Text>
              </Flex.Item>
              <Text fontSize="xs" color="red500" textAlign="left">
                -¥{orderInfo.fullReduction}
              </Text>
            </Flex>
            {!!orderInfo.firstBuy && (
              <Flex style={styles.info}>
                <Flex.Item>
                  <Text fontSize="xs" color="gray300" textAlign="left">
                    {t('shou-dan')}
                  </Text>
                </Flex.Item>
                <Text fontSize="xs" color="red500" textAlign="left">
                  ¥{orderInfo.firstBuy}
                </Text>
              </Flex>
            )}

            <Flex style={styles.info}>
              <Flex.Item>
                <Text fontSize="xs" color="gray300" textAlign="left">
                  {t('hong-bao')}
                </Text>
              </Flex.Item>
              <Text fontSize="xs" color="red500" textAlign="left">
                -¥{orderInfo.redBag || 0}
              </Text>
            </Flex>
            <Flex style={styles.total} justify="end">
              <Text size="s1">
                {t('xiao-ji')} ¥{orderInfo.realAmount}
              </Text>
            </Flex>
          </View>
        </Div>
        <Div pt={10} pb={10} px={15}>
          <Div bg="white" p={15}>
            <PayCom />
          </Div>

          <Button
            block
            bg="brand500"
            mt={20}
            onPress={() => {
              payOrder(orderId).then(() => {
                navigation.replace('OrderDetail', { orderId });
              });
            }}
          >
            立即支付
          </Button>
        </Div>
      </ScrollView>
    </Div>
  );
}

const GoodsItem = ({ info, goods }) => {
  return (
    <Div row>
      <Image w={33} h={33} rounded={3} source={{ uri: goods.img }} />
      <Div flex={1} ml={10}>
        <Div row>
          <Text fontSize="sm" flex={1}>
            {goods.name}
          </Text>
          <Text fontSize="sm">X {info.num}</Text>
          <Text ml={10}>¥{info.goodsRealPrice}</Text>
        </Div>
        <Text fontSize="xs" color="gray400">
          {info.specification}
        </Text>
      </Div>
    </Div>
  );
};

const styles = StyleSheet.create({
  scroll: {
    flexGrow: 1,
  },
  card: {
    borderRadius: 3,
    backgroundColor: '#fff',
    marginBottom: 5,
    padding: 15,
  },
  item: {
    paddingVertical: 5,
  },
  icon: {
    width: 33,
    height: 33,
    borderRadius: 3,
  },
  goodsMain: {
    marginLeft: 10,
  },
  type: {
    // marginTop:3,
  },
  main: {
    marginTop: 10,
    paddingVertical: 5,
    borderColor: '#E5E5E5',
    borderTopWidth: 1,
  },
  info: {
    marginTop: 10,
  },
  total: {
    paddingTop: 10,
    marginTop: 10,
    borderColor: '#E5E5E5',
    borderTopWidth: 1,
  },
  address: {
    minWidth: 50,
    marginRight: 30,
  },
  info2: {
    marginTop: 10,
  },
});