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 { 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 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="订单投诉" />
      <ScrollView contentContainerStyle={styles.scroll}>
        <View style={styles.card}>
          <Text size="c2" type="info">
            投诉商家
          </Text>
          <Text size="s1">{merchant.showName || ' '}</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}>
          <Text size="c2" type="info">
            投诉骑手
          </Text>
          <Text size="s1">胖待还</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">
                未找到投诉项
              </Text>
            </Flex.Item>
            <Button size="small" outline>
              联系客服
            </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,
  },
});