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 } from '@ant-design/react-native';
import { useRequest, useCreation } from '@umijs/hooks';
import useModel from 'flooks';
import { useTranslation } from 'react-i18next';
import User from '../../flooks/User'; // detail模块通用方法
import Toast from '../../flooks/Toast'; // detail模块通用方法

import Header from '../../components/Header';
import request from '../../Utils/RequestUtils';

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

export default function RiderApplyScreen({ 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 [address, setaddress] = React.useState('');

  const allpyRequest = useRequest((data) => saveRequest(data), {
    manual: true,
    onError: (e) => {
      warnning(e.error);
    },
    onSuccess: () => {
      success(t('shen-qing-ti-jiao-cheng-gong'));
      navigation.goBack();
    },
  });

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

  return (
    <>
      <Header title={t('qi-shou-shen-qing')} />
      <ScrollView
        contentContainerStyle={{
          backgroundColor: '#fff',
          flexGrow: 1,
        }}
      >
        <Div bg="white">
          <InputItem
            clear
            type="phone"
            value={name}
            onChange={setname}
            placeholder={t('shu-ru-lian-xi-ren')}
            style={{ fontSize: 14 }}
            labelNumber={7}
          >
            <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 }}
            labelNumber={7}
          >
            <Text fontSize="sm">{t('lian-xi-dian-hua')}</Text>
          </InputItem>

          <InputItem
            clear
            value={address}
            onChange={setaddress}
            placeholder={t('address')}
            style={{ fontSize: 14 }}
            labelNumber={7}
          >
            <Text fontSize="sm">{t('addrss2')}</Text>
          </InputItem>
        </Div>

        <Button
          my={30}
          mx={130}
          fontSize="sm"
          block
          bg="brand500"
          disabled={!canSubmit}
          onPress={() => {
            allpyRequest.run({
              name,
              phone,
              address,
              userId: userInfo.id,
            });
          }}
        >
          {t('ti-jiao')}
        </Button>
      </ScrollView>
    </>
  );
}