import React, { useState, useEffect, useRef } from 'react';
import { Input, Tabs, Table, Space, Button, Form, Row, Col, Layout, message, Spin } from 'antd';
const { TabPane } = Tabs;

import { connect, history } from 'umi';

import { RA, ResultClear } from '@/utils/method';
import TitleBack from '@/components/TitleBack/TitleBack';
import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
import Line from '@/components/Line/Line';
import TextArea from 'antd/lib/input/TextArea';
import Relationship from '@/components/Relationship/Relationship';
import { useForm } from 'antd/es/form/util';
const module = 'CommunityService';
const CardAdd = (props: any) => {
  const { dispatch, Result, communityInfo } = props;

  // const formRef = useRef(null)
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (Result != null) {
      if ((Result.error_code = '0000')) {
        message.success('Operation Success!');
        setLoading(false);
        ResultClear(module, dispatch);
        history.go(-1);
      } else {
        message.error('Operation Fail!');
        setLoading(false);
        ResultClear(module, dispatch);
      }
    }
  }, [Result]);

  const onFinish = (values: any) => {
    setLoading(true);
    RA(35, values, module, dispatch);
  };

  const extendName = (values: any) => {
    RA(32, { communityName: values }, 'User', dispatch);
  };

  useEffect(() => {
    if (communityInfo != null) {
      form.setFieldsValue({
        zipCode:
          communityInfo.data.rows[0].residentialAddress +
          ' SINGAPORE' +
          communityInfo.data.rows[0].residentialZipCode,
      });
    }
  }, [communityInfo]);

  return (
    <div style={{ width: '100%', minWidth: 1020, padding: 34, backgroundColor: '#ffffff' }}>
      <TitleBack title={'Apply Card'}></TitleBack>

      <Form form={form} name="basic" onFinish={onFinish}>
        <Spin spinning={loading}>
          <Form.Item labelCol={{ span: 3 }} label="Community" style={{ marginBottom: 0 }}>
            <Input.Group compact>
              <Form.Item name="communityName" style={{ marginRight: 20 }}>
                <SearchOptionsCommnity opname={extendName} />
              </Form.Item>
              <Form.Item
                name="buildNumber"
                style={{ marginRight: 16 }}
                rules={[{ required: true }]}
              >
                <Input style={{ width: 80 }} placeholder={'Building'} />
              </Form.Item>
              <div style={{ lineHeight: 2, marginRight: 16 }}>#</div>
              <Form.Item
                name="floorNumber"
                style={{ marginRight: 16 }}
                rules={[{ required: true }]}
              >
                <Input style={{ width: 80 }} placeholder={'Floor'} />
              </Form.Item>
              <div style={{ lineHeight: 2, marginRight: 16 }}>-</div>
              <Form.Item name="roomNumber" rules={[{ required: true }]}>
                <Input style={{ width: 120 }} placeholder={'Room'} />
              </Form.Item>
            </Input.Group>
          </Form.Item>

          <Form.Item name="zipCode" wrapperCol={{ ...Layout.wrapperCol, offset: 3 }}>
            <Input
              style={{ width: 580 }}
              placeholder={'Display the address and postcode automatically according to the'}
              disabled
            ></Input>
          </Form.Item>

          <Form.Item
            labelCol={{ span: 3 }}
            label="Owner Name"
            style={{ marginBottom: -40 }}
            rules={[{ required: true }]}
          >
            <Input.Group compact>
              <Form.Item
                name="communityOwner"
                style={{ marginRight: 20 }}
                rules={[{ required: true }]}
              >
                <Input placeholder={'Name'} />
              </Form.Item>
              <Form.Item
                style={{ marginRight: 20 }}
                label={'Contact Information'}
                rules={[{ required: true }]}
              >
                <Input hidden={true} />
              </Form.Item>
              <Form.Item
                name="communityOwnerPhone"
                style={{ marginRight: 20 }}
                rules={[{ required: true }]}
              >
                <Input placeholder={'Phone number'} />
              </Form.Item>
              <Form.Item name="communityOwnerEmail" rules={[{ required: true }]}>
                <Input placeholder={'Email'} />
              </Form.Item>
            </Input.Group>
          </Form.Item>

          <Line></Line>

          <Form.Item labelCol={{ span: 3 }} label="Applicant" style={{ marginBottom: -40 }}>
            <Input.Group compact>
              <Form.Item name="applyName" style={{ marginRight: 20 }} rules={[{ required: true }]}>
                <Input placeholder={'Name'} />
              </Form.Item>
              <Form.Item
                style={{ marginRight: 20 }}
                label={'Contact Information'}
                rules={[{ required: true }]}
              >
                <Input placeholder={'Phone number'} hidden={true} />
              </Form.Item>
              <Form.Item
                name="applyNamePhone"
                style={{ marginRight: 20 }}
                rules={[{ required: true }]}
              >
                <Input placeholder={'Phone number'} />
              </Form.Item>
              <Form.Item name="applyNameEmail" rules={[{ required: true }]}>
                <Input placeholder={'Email'} />
              </Form.Item>
            </Input.Group>
          </Form.Item>

          {/* label={"Contact Information"} */}
          <Form.Item labelCol={{ span: 3 }} name="applyRelationOwner" label={'Relationship'}>
            <Relationship />
          </Form.Item>
          <Form.Item labelCol={{ span: 3 }} name="applyReasonContent" label={'Reason'}>
            <TextArea style={{ width: 400 }}></TextArea>
          </Form.Item>
          <Line></Line>
          <Form.Item wrapperCol={{ ...Layout.wrapperCol, offset: 3 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Spin>
      </Form>
    </div>
  );
};

function map(state: any) {
  const { Result } = state[module];
  const { communityInfo } = state.User;
  return { Result, communityInfo };
}
export default connect(map)(CardAdd);
