import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Platform } from 'react-native';
import { Div, Button, Text, Icon } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { TextareaItem } from '@ant-design/react-native';
import { useTranslation } from 'react-i18next';

import { PullPicker } from 'teaset';

import { useRoute } from '@react-navigation/native';
import { useCreation } from '@umijs/hooks';
import useModel from 'flooks';
import Order from './model'; // Order模块通用方法

import Header from '../../components/Header';
import ImagePicker from '../../components/ImagePicker';
import { reasonMap } from '../../Utils/OrderUtils';

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

  const [imgList, setimgList] = React.useState(['']);
  const [content, setcontent] = React.useState('');
  const [chooseReason, setchooseReason] = React.useState('');

  const route = useRoute();
  const { params } = route;
  const { orderId } = params || {};
  const canSubmit = useCreation(() => {
    if (orderId && chooseReason && content) {
      return true;
    } else {
      return false;
    }
  }, [orderId, chooseReason, content, imgList]);

  function changeImg(img, index) {
    const list = [...imgList];
    if (!img) {
      list.splice(index, 1);
    } else {
      list.splice(index, 1, img);
    }
    if (index === list.length - 1 && list.length < 4) {
      list.push('');
    }
    setimgList(list);
  }

  function deleteImg(index) {
    const list = [...imgList];
    if (!list[index]) {
      return null;
    } else {
      return () => changeImg('', index);
    }
  }

  const onSubmit = () => {
    cancelOrder(orderId, chooseReason, content, imgList.join(',')).then(() => {
      navigation.goBack();
    });
  };

  return (
    <>
      <Header title={t('shen-qing-qu-xiao-ding-dan')} />
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#eee',
        }}
      >
        <Div p={15} bg="white">
          <Text fontSize="xs" color="gray500">
            {t('tips1')}
          </Text>

          <Button
            fontSize="xs"
            bg="white"
            borderWidth={1}
            borderColor="brand500"
            color="black"
            mt={13}
          >
            {t('lian-xi-shang-jia')}
          </Button>
        </Div>
        <Div bg="white" mt={2} p={15}>
          <Text color="gray500" fontSize="xs">
            {t('nin-ru-guo-que-ding-qu-xiao')}，
            <Text color="red500" fontSize="xs">
              {t('qing-wu-bi-tian-xie-zhen-shi-yuan-yin')}
            </Text>
            ，{t('yi-shi-wo-men-ke-yi-geng-hao-di-bang-nin-jie-jue-wen-ti')}。
          </Text>

          <Button
            block
            bg="white"
            px={0}
            my={5}
            onPress={() => {
              if (Platform.OS !== 'web') {
                const list = [...reasonMap.keys()];
                PullPicker.show(
                  t('qu-xiao-yuan-yin'),
                  list,
                  chooseReason ? list.indexOf(chooseReason) : '',
                  (item) => {
                    setchooseReason(item);
                  },
                  {
                    getItemText: (item) => {
                      return reasonMap.get(item).name;
                    },
                  }
                );
              }
            }}
          >
            <Div flex={1} row>
              <Text color="gray500" fontSize="xs">
                {t('qu-xiao-yuan-yin')}
              </Text>
              <Text flex={1} textAlign="right" fontSize="xs" mx={10}>
                {chooseReason ? reasonMap.get(chooseReason).name : ''}
              </Text>
              <Icon name="right" />
            </Div>
          </Button>

          <Div borderWidth={1} borderColor="gray200" rounded="xs">
            <TextareaItem
              last
              rows={4}
              placeholder={t('tips2')}
              count={50}
              style={{
                backgroundColor: '#fff',
                paddingVertical: 10,
                fontSize: 10,
                borderBottomWidth: 0,
              }}
              onChange={setcontent}
            />
          </Div>

          <Div row py={10}>
            {imgList.map((item, index) => {
              return (
                <ImagePicker
                  key={index}
                  img={item}
                  setImg={(img) => changeImg(img, index)}
                  cancelEvent={deleteImg(index)}
                />
              );
            })}
          </Div>

          <Button
            w={160}
            color="black"
            fontSize="xs"
            borderWidth={1}
            borderColor="brand500"
            bg="white"
            alignSelf="center"
            disabled={!canSubmit}
            onPress={onSubmit}
          >
            {t('shen-qing-qu-xiao')}
          </Button>
        </Div>
      </ScrollView>
    </>
  );
}