import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import * as Animatable from 'react-native-animatable';
import {
  Div,
  Button,
  RadioGroup,
  Radio,
  Image,
  Text,
  Avatar,
  Input,
} from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { useTranslation } from 'react-i18next';
import Request from '../utils/RequestUtils';
import { toastInfo, toastSuccess } from '../utils/SystemUtils';

const ReasonMap = new Map([
  [
    'RIDER_CANNOT_REACH_USER',
    {
      name: 'wu-fa-lian-xi-shang-yong-hu',
    },
  ],
  [
    'DO_NOT_WANT_SOMETHING_TEMPORARILY',
    {
      name: 'yong-hu-ju-qian',
    },
  ],
  [
    'OTHER',
    {
      name: 'qi-ta',
      hasInput: true,
    },
  ],
]);

export default function ApplayRefundModalScreen({
  navigation,
  route,
}: StackScreenProps) {
  const { params } = route;
  const { orderId } = params || {};
  const { t } = useTranslation();

  const [reason, setReason] = React.useState<string>('RIDER_CANNOT_REACH_USER');
  const [extra, setExtra] = React.useState<string>('');

  const inRef = React.useRef();

  return (
    <Div flex={1} bg="black600" alignItems="center" justifyContent="center">
      <Animatable.View animation="slideInUp" duration={300}>
        <Div bg="white" p={10} rounded="sm" minW={287}>
          <Text fontSize="xl" fontWeight="bold" textAlign="center">
            取消订单申请
          </Text>

          <Div px={10} py={10}>
            <RadioGroup
              value={reason}
              onChange={(value: any) => {
                if (value !== 'OTHER') {
                  setExtra('');
                }
                setReason(value);
              }}
            >
              {[...ReasonMap.keys()].map((item, index) => {
                let info = ReasonMap.get(item);
                return (
                  <Radio
                    value={item}
                    key={index}
                    activeColor="yellow500"
                    inactiveColor="gray300"
                    pr={20}
                    my={5}
                  >
                    <Text ml={6} fontSize="sm" color="black">
                      {t(info.name)}
                    </Text>

                    {info.hasInput && (
                      <Input
                        w={96}
                        h={25}
                        opacity={1}
                        loaderColor="gray400"
                        color="gray900"
                        fontSize="sm"
                        value={extra}
                        onChangeText={setExtra}
                        ml={5}
                        bg="gray100"
                      />
                    )}
                  </Radio>
                );
              })}
            </RadioGroup>
          </Div>
          <Text color="gray500" textAlign="right" fontSize="xs">
            （作为责任评判的依据之一，请如实填写）
          </Text>
          <Div row py={10} mt={10}>
            <Button
              flex={1}
              mx={3}
              rounded="xs"
              bg="white"
              color="black"
              borderWidth={1}
              borderColor="yellow500"
              fontSize="sm"
              onPress={() => navigation.goBack()}
            >
              {t('qu-xiao')}
            </Button>
            <Button
              flex={1}
              mx={3}
              rounded="xs"
              bg="yellow500"
              fontSize="sm"
              onPress={() => {
                Request.get('/orderRefundApply/apply', {
                  params: {
                    orderId,
                    reason,
                    remark: extra,
                    img: '',
                  },
                })
                  .then((res) => {
                    toastSuccess('申请提交成功');
                  })
                  .catch((e) => {
                    toastInfo(e.error);
                  })
                  .finally(() => {
                    navigation.goBack();
                  });
              }}
            >
              {t('que-ren')}
            </Button>
          </Div>
        </Div>
      </Animatable.View>
    </Div>
  );
}