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 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 MerchatApplyScreen({ navigation }) {
  const { userInfo } = useModel(User, ['id']);
  const { warnning, success } = useModel(Toast, []);

  const [name, setname] = React.useState('');
  const [phone, setphone] = React.useState('');
  const [merName, setmerName] = React.useState('');
  const [category, setcategory] = React.useState('');
  const [address, setaddress] = React.useState('');

  const allpyRequest = useRequest((data) => saveRequest(data), {
    manual: true,
    onError: (e) => {
      warnning(e.error);
    },
    onSuccess: () => {
      success('申请提交成功');
      navigation.goBack();
    },
  });

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

  return (
    <>
      <Header title="开店申请" />
      <ScrollView
        contentContainerStyle={{
          backgroundColor: '#fff',
          flexGrow: 1,
        }}
      >
        <Div bg="white">
          <InputItem
            clear
            type="phone"
            value={name}
            onChange={setname}
            placeholder="输入联系人"
            style={{ fontSize: 14 }}
          >
            <Text fontSize="sm">联系人</Text>
          </InputItem>

          <InputItem
            clear
            type="phone"
            value={phone}
            onChange={setphone}
            placeholder="输入联系电话"
            style={{ fontSize: 14 }}
          >
            <Text fontSize="sm">联系电话</Text>
          </InputItem>

          <InputItem
            clear
            value={merName}
            onChange={setmerName}
            placeholder="输入店铺名称"
            style={{ fontSize: 14 }}
          >
            <Text fontSize="sm">店铺名称</Text>
          </InputItem>

          <InputItem
            clear
            value={category}
            onChange={setcategory}
            placeholder="输入经营类型"
            style={{ fontSize: 14 }}
          >
            <Text fontSize="sm">经营类型</Text>
          </InputItem>
          <InputItem
            clear
            value={address}
            onChange={setaddress}
            placeholder="请输入店铺地址"
            style={{ fontSize: 14 }}
          >
            <Text fontSize="sm">店铺地址</Text>
          </InputItem>
        </Div>

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