import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Text } 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 Header from '../../components/Header';
import request from '../../Utils/RequestUtils';

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

export default function CompanyApplyScreen({ 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 [remark, setremark] = 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 && remark) {
      return true;
    } else {
      return false;
    }
  }, [name, phone, remark]);

  return (
    <>
      <Header title={t('shang-wu-he-zuo-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 }}
          >
            <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 }}
          >
            <Text fontSize="sm">{t('lian-xi-dian-hua')}</Text>
          </InputItem>
          <Text px={15} py={10} fontSize="sm">
            {t('qi-wang-he-zuo-de-nei-rong')}
          </Text>
          <Div px={15}>
            <TextareaItem
              rows={4}
              placeholder={t('tian-jia-shang-pin-jian-jie-bu-chao-guo-50-zi')}
              style={{ backgroundColor: '#eee', fontSize: 14, paddingTop: 10 }}
              onChange={(text) => setremark(text)}
            />
          </Div>
        </Div>
        <Button
          my={30}
          mx={130}
          fontSize="sm"
          block
          bg="brand500"
          disabled={!canSubmit}
          onPress={() => {
            allpyRequest.run({
              name,
              phone,
              remark,
              userId: userInfo.id,
            });
          }}
        >
          {t('ti-jiao')}
        </Button>
      </ScrollView>
    </>
  );
}