import React, { useState, useEffect, useRef } from 'react';
import { Input, Spin, Button, Form, message } from 'antd';

import { connect } from 'umi';
import styles from './UsersAdd.less';

import Line from '../../../components/Line/Line';
import TitleBack from '../../../components/TitleBack/TitleBack';
import SearchOptionsCommnity from '../../../components/SearchOptions/SearchOptionsCommnity';
import { checkParam, RA, Clear } from '../../../utils/method';
import { validateMessages } from '@/utils/params';

const module = 'User';
const UsersAdd = (props: any) => {
  const { dispatch, communityInfo, Data4Error } = props;

  const [postman, setPostman] = useState({ extend: null });
  const formRef = useRef(null as any);

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (Data4Error) {
      if (Data4Error.msg) {
        setLoading(false);
        message.error(Data4Error.msg, 3);
        Clear(module + '/Data4ErrorClear', dispatch);
      }
    }
  }, [Data4Error]);

  const onFinish = (values: any) => {
    if (postman.extend != null) {
      values.communityName = postman.extend;
    } else {
      values.communityName = null;
    }
    if (checkParam(values)) {
      values.owerPhone = null;
      values.owerEmail = null;
      values.buildingNumber = 'BLK ' + values.buildingNumber;
      RA(14, values, module, dispatch);
      setLoading(true);
    } else {
      setLoading(false);
      message.error('Error,Please finish it,not empty!', 3);
    }
  };

  const extendName = (values: any) => {
    var tmp = postman;
    tmp.extend = values;
    RA(32, { communityName: values }, module, dispatch);
    setPostman(tmp);
  };

  useEffect(() => {
    if (communityInfo != null) {
      if (postman.extend != null) {
        formRef.current.setFieldsValue({
          addressAndpostalCode:
            communityInfo.data.rows.residentialAddress +
            ' ' +
            communityInfo.data.rows.residentialZipCode,
        });
      }
    }
  }, [communityInfo]);

  const checkData = (rule: any, value: any, callback: any) => {
    if (value) {
      if (/^[a-zA-Z0-9]+$/g.test(value)) {
        callback();
      } else {
        callback(new Error('Only numbers and letters can be entered!'));
      }
    }
    callback();
  };

  const checkData1 = (rule: any, value: any, callback: any) => {
    if (value) {
      if (/^[0-9]+$/g.test(value)) {
        callback();
      } else {
        callback(new Error('Only numbers!'));
      }
    }
    callback();
  };

  return (
    <div className={styles.base}>
      {/* 头部组件 */}
      <TitleBack title={'Create New Owner'} />
      <Spin spinning={loading}>
        <Form ref={formRef} name="basic" onFinish={onFinish} validateMessages={validateMessages}>
          <div className={styles.box1}>
            <div className={styles.box1item1}>Owner's Name</div>
            <div className={styles.box1item2}>
              <Form.Item name="owerName" rules={[{ required: true, min: 2, max: 30 }]}>
                <Input placeholder="Ower Name" />
              </Form.Item>
            </div>
          </div>

          {/* <div className={styles.box4}>
            <div className={styles.box4item0}>Contact Details</div>
            <div className={styles.box4item1}><Form.Item name="owerPhone" ><Input placeholder="Phone Number" /></Form.Item></div>
            <div className={styles.box4item2}><Form.Item name="owerEmail" ><Input placeholder="Email" /></Form.Item></div>
          </div> */}

          <div className={styles.box2}>
            <div className={styles.box2item1}>Contact Details</div>
            <div className={styles.box2item2}>
              <SearchOptionsCommnity alone={true} opname={extendName} />
            </div>
            <div className={styles.box5}>
              <Form.Item>
                <Input.Group>
                  <div className={styles.box2item3}>
                    <Form.Item name="buildingNumber" rules={[{ validator: checkData1 }]}>
                      <Input placeholder="BLK" style={{ width: 94 }} />
                    </Form.Item>
                  </div>
                  <div className={styles.box2item4}>#</div>
                  <div className={styles.box2item5}>
                    <Form.Item name="floorNumber" rules={[{ validator: checkData1 }]}>
                      <Input placeholder="Floor" style={{ width: 80 }} />
                    </Form.Item>
                  </div>
                  <div className={styles.box2item6}>——</div>
                  <div className={styles.box2item7}>
                    <Form.Item
                      name="roomNumber"
                      rules={[{ validator: checkData }]}
                      style={{ width: 260 }}
                    >
                      <Input placeholder="Room" style={{ width: 112 }} />
                    </Form.Item>
                  </div>
                </Input.Group>
              </Form.Item>
            </div>
          </div>

          <div className={styles.box3}>
            <div className={styles.box3item1}>
              <Form.Item name="addressAndpostalCode">
                <Input
                  style={{ width: 680 }}
                  disabled
                  placeholder="Display the address and postcode automatically according to the"
                />
              </Form.Item>
            </div>
          </div>
          <Line />
          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Spin>
    </div>
  );
};

function mapStateToProps(state: any) {
  const { DataSave, communityInfo, Data4Error } = state.User;

  return {
    DataSave,
    communityInfo,
    Data4Error,
  };
}
export default connect(mapStateToProps)(UsersAdd);
