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

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

import useModel from 'flooks';
import Order from './model'; // Order模块通用方法

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

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

const Name = new Map([
  ['MERCHANT', '商家'],
  ['RIDER', '骑手'],
]);

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

  const route = useRoute();
  const { params } = route;
  const { orderId, type, target } = params || {};

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

  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);
    }
  }

  function submit() {
    const img = [...imgList].filter((item) => {
      return item;
    });
    complaintSave(orderId, target, type, content, img.join(',')).then(() => {
      navigation.goBack();
    });
  }

  const canSubmit = useCreation(() => {
    if (orderId && target && type && content) {
      return true;
    } else {
      return false;
    }
  }, [orderId, target, type, content, imgList]);

  return (
    <>
      <Header title={t('ding-dan-tou-su')} />
      <ScrollView contentContainerStyle={styles.scroll}>
        <View style={styles.card}>
          <Flex>
            <Flex.Item>
              <Text size="c2" type="info">
                {t('tou-su')}
                {Name.get(target)}
              </Text>
            </Flex.Item>
            <Text size="c2">{type || ''}</Text>
          </Flex>
          <View style={styles.textarea}>
            <TextareaItem
              rows={4}
              placeholder={t('content1')}
              style={styles.text}
              count={100}
              onChange={setcontent}
            />
          </View>
          <Div row>
            {imgList.map((item, index) => {
              return (
                <ImagePicker
                  key={index}
                  img={item}
                  setImg={(img) => changeImg(img, index)}
                  cancelEvent={deleteImg(index)}
                />
              );
            })}
          </Div>
        </View>

        <Button
          block
          bg="brand500"
          color="white"
          my={10}
          mx={20}
          onPress={submit}
          disabled={!canSubmit}
        >
          {t('ti-jiao')}
        </Button>
      </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,
  },
  textarea: {
    marginVertical: 10,
  },
  text: {
    backgroundColor: '#eeeeee',
    paddingVertical: 10,
    fontSize: 10,
    borderBottomWidth: 0,
  },
});