import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { Flex } from '@ant-design/react-native';
import { TouchableRipple, Divider } from 'react-native-paper';
import { ScrollView } from 'react-native-gesture-handler';
import { Div } from 'react-native-magnus';
import Icon from 'react-native-vector-icons/FontAwesome';
import { useTranslation } from 'react-i18next';

import { useRoute } from '@react-navigation/native';
import { useRequest } from '@umijs/hooks';

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

import Text from '../../components/Text';
import Button from '../../components/Button';

const Types = new Map([
  ['MERCHANT', ['商家少送/漏送商品', '食品品质/安全问题']],
  [
    'RIDER',
    [
      '等待时间过长，超市配送',
      '提前点击确认送达',
      '错送商品',
      '商品破损',
      '错送商品',
      '威胁/辱骂/殴打',
      '骚扰顾客',
    ],
  ],
]);

export default function ComplaintScreen({ navigation }) {
  const { t } = useTranslation();
  const route = useRoute();
  const { params } = route;
  const { orderId } = params || 0;

  const [orderInfo, setorderInfo] = React.useState({ merchant: {} });

  const { merchant } = orderInfo;

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

  return (
    <>
      <Header title={t('ding-dan-tou-su')} />
      <ScrollView contentContainerStyle={styles.scroll}>
        <View style={styles.card}>
          <Text size="c2" type="info">
            {t('tou-su-shang-jia')}
          </Text>
          <Text size="s1">{orderInfo.merShowName || ' '}</Text>
          <Divider />
          <View style={styles.main}>
            {Types.get('MERCHANT').map((item, index) => {
              return (
                <TouchableRipple
                  key={index}
                  onPress={() => {
                    navigation.navigate('ComplaintNext', {
                      orderId,
                      type: item,
                      target: 'MERCHANT',
                    });
                  }}
                >
                  <Flex style={styles.item}>
                    <Flex.Item>
                      <Text size="c2" type="info">
                        {item}
                      </Text>
                    </Flex.Item>
                    <Icon name="angle-right" color="#B4B4B4" />
                  </Flex>
                </TouchableRipple>
              );
            })}
          </View>
        </View>

        <View style={styles.card}>
          {orderInfo.riderStatus !== 'NOT_RECEIVED' && (
            <>
              <Text size="c2" type="info">
                {t('tou-su-qi-shou')}
              </Text>
              <Text size="s1">{orderInfo.riderName}</Text>
              <Divider />
              <View style={styles.main}>
                {Types.get('RIDER').map((item, index) => {
                  return (
                    <TouchableRipple
                      key={index}
                      onPress={() => {
                        navigation.navigate('ComplaintNext', {
                          orderId,
                          type: item,
                          target: 'RIDER',
                        });
                      }}
                    >
                      <Flex style={styles.item}>
                        <Flex.Item>
                          <Text size="c2" type="info">
                            {item}
                          </Text>
                        </Flex.Item>
                        <Icon name="angle-right" color="#B4B4B4" />
                      </Flex>
                    </TouchableRipple>
                  );
                })}
              </View>
              <Divider />
            </>
          )}
          <Flex style={styles.bottom}>
            <Flex.Item>
              <Text size="c2" type="info">
                {t('wei-zhao-dao-tou-su-xiang')}
              </Text>
            </Flex.Item>
            <Button size="small" outline>
              {t('lian-xi-ke-fu')}
            </Button>
          </Flex>
        </View>
      </ScrollView>
    </>
  );
}

const styles = StyleSheet.create({
  scroll: {
    paddingVertical: 10,
  },
  card: {
    paddingHorizontal: 15,
    paddingVertical: 20,
    backgroundColor: '#fff',
    marginBottom: 10,
  },
  item: {
    paddingVertical: 5,
  },
  main: {
    paddingVertical: 5,
  },
  bottom: {
    paddingVertical: 10,
  },
});