import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { InputItem, TextareaItem } from '@ant-design/react-native';
import { useRequest, useCreation } from '@umijs/hooks';
import { useTranslation } from 'react-i18next';
import useModel from 'flooks';
import User from '../../flooks/User'; // detail模块通用方法
import Toast from '../../flooks/Toast'; // detail模块通用方法

import ImagePicker from '../../components/ImagePicker';
import Header from '../../components/Header';
import request from '../../Utils/RequestUtils';
import { alertWithoutCancel } from '../../Utils/TotastUtils';

function saveRequest(data) {
  return request.post('/feedback/save', {
    data,
  });
}

export default function FeedBackScreen({ navigation }) {
  const { t } = useTranslation();
  const { userInfo } = useModel(User, ['id']);
  const { warnning, success } = useModel(Toast, []);

  const [name, setname] = React.useState('');
  const [phone, setphone] = React.useState('');
  const [content, setcontent] = React.useState('');
  const [imgList, setimgList] = 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);
    }
  }

  const allpyRequest = useRequest((data) => saveRequest(data), {
    manual: true,
    onError: (e) => {
      warnning(e.error);
    },
    onSuccess: () => {
      alertWithoutCancel('', t('fankui1'), false, () => {
        navigation.goBack();
      });
    },
  });

  const img = useCreation(() => {
    const list = imgList.filter((item) => {
      return !!item;
    });
    return list.join(',');
  }, [imgList]);

  const canSubmit = useCreation(() => {
    if (content) {
      return true;
    } else {
      return false;
    }
  }, [name, phone, content, img]);

  return (
    <>
      <Header title="意见反馈" />
      <ScrollView
        contentContainerStyle={{
          backgroundColor: '#fff',
          flexGrow: 1,
        }}
      >
        <Text px={15} py={10} fontSize="sm" color="gray500">
          {t('fankui2')}
        </Text>
        <Div px={15}>
          <TextareaItem
            rows={4}
            placeholder={t('zui-duo-500-zi')}
            count={500}
            style={{
              backgroundColor: '#eee',
              fontSize: 14,
              paddingTop: 10,
              borderRadius: 3,
            }}
            onChange={(text) => setcontent(text)}
          />
        </Div>
        <Div row py={10} px={15}>
          {imgList.map((item, index) => {
            return (
              <ImagePicker
                key={index}
                img={item}
                setImg={(img1) => changeImg(img1, index)}
                cancelEvent={deleteImg(index)}
              />
            );
          })}
        </Div>
        <Text px={15} pt={10} fontSize="sm">
          {t('qing-shu-ru-lian-xi-xin-xi-xuan-tian')}
        </Text>
        <InputItem
          clear
          type="phone"
          value={name}
          onChange={setname}
          placeholder={t('shu-ru-lian-xi-ren')}
          style={{
            fontSize: 14,
            backgroundColor: '#eee',
            paddingLeft: 10,
            borderRadius: 3,
          }}
          last
        >
          <Text fontSize="sm">{t('xing-ming')}</Text>
        </InputItem>

        <InputItem
          clear
          type="phone"
          value={phone}
          onChange={setphone}
          placeholder={t('shu-ru-lian-xi-dian-hua')}
          style={{
            fontSize: 14,
            backgroundColor: '#eee',
            paddingLeft: 10,
            borderRadius: 3,
          }}
          last
        >
          <Text fontSize="sm">{t('lian-xi-dian-hua')}</Text>
        </InputItem>

        <Text fontSize="xs" color="gray500" pl={85}>
          {t('tips8')}
        </Text>
        <Button
          my={30}
          mx={130}
          fontSize="sm"
          block
          bg="brand500"
          disabled={!canSubmit}
          onPress={() => {
            allpyRequest.run({
              name,
              phone,
              content,
              img,
              userId: userInfo.id,
            });
          }}
        >
          {t('ti-jiao-fan-kui')}
        </Button>
      </ScrollView>
    </>
  );
}