import React, { useState, useEffect,useRef } from 'react';
import styles from './css/Bookings.less';
import { Spin,Input ,DatePicker,Button,Form, Radio,TimePicker,Row, Col,message, Result} from 'antd';
const { RangePicker } = TimePicker;

import {connect } from 'umi';



import TitleBack from '../../../components/TitleBack/TitleBack';
import SearchOptionsCommnity from '../../../components/SearchOptions/SearchOptionsCommnity';

import { numberToString } from '../../../utils/string';
import { checkData, checkInput } from '@/utils/method';
import { validateMessages } from '@/utils/params';
const Bookings = (props:any) => {

  const { dispatch, Data3,Result,DataSave,token} = props;
  const RA = (index:any,values: any) => { dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } }) };
  const IA = () => { dispatch({ type: 'FacilityBookings/IA' }) };
  const SAClear = () => { dispatch({ type: 'FacilityBookings/SA',playload:null }) };
  const ResultClear = () => { dispatch({ type: 'FacilityBookings/ResultClear' }) };
  
  const [comminityValues, setComminityValues] = useState(null);
  const [curString,setCurString]=useState({communityManagerFee:null,communityMargin:null})
  const [loading, setLoading] = useState(false);
  const formRef = useRef(null);

  useEffect(() => {
    if (DataSave != null) {      
      console.log("页面进入参数")
      console.log(DataSave)
      setComminityValues(DataSave.communityName)
      RA(1, { userToken: token, communityName: DataSave.communityName ,facilitieId:DataSave.id})
    }
  }, [DataSave]); 

  useEffect(() => {
    IA()
  }, []); 
  
  useEffect(() => {
    if (Result != null) {
      console.log(Result)
      message.error(Result.msg);
      if (Result.index == 1) {
        IA()
      }
      setLoading(false)
      ResultClear()
    }
  }, [Result]); 
  
  useEffect(() => {    
    setLoading(false)
    if (Data3!=null) {
      console.log(Data3)
    }
  }, [Data3]); 


  const getFacility = (values: any) => {
    SAClear()
    setComminityValues(values)
    console.log(values)
    RA(1, { userToken: token, communityName: values })
    setLoading(true)
  }
  const format = "HH:mm"
  
  const checkParam = (values: any) => {
    var flag = true

    for (var i in values) {
      // console.log(values[i]);
      if (values[i] == null) {
        flag=false
      } else {
        if(values[i].length == 0){ flag=false}
      }      
    }
    return flag
  }

  const onFinish = (value:any) => {
    console.log("Success:")
    var tmp = value
    console.log(value)
    // tmp.categoriesId = null
    // tmp.facilitiesId = null
    // tmp.communityName = null
    // tmp.communityManagerFee = null
    // tmp.communityMargin=null
    if (value.categoriesName != null) {
      tmp.categoriesId = value.categoriesName.categoriesId
      tmp.facilitiesId=value.categoriesName.facilitiesId
      tmp.categoriesName = value.categoriesName.categoriesName     
    }
    if (value.subscribeDate!= null) {
      tmp.subscribeDate=value.subscribeDate.format('YYYY-M-D')
    }
    if (value.reservedTimeList != null) {
      tmp.reservedTimeList = [value.reservedTimeList[0].format('HH:mm'), value.reservedTimeList[1].format('HH:mm')]
    }
    if (comminityValues!=null) {
      tmp.communityName=comminityValues
    }
    if (curString != null) {
    
      tmp.communityManagerFee = numberToString(curString.communityManagerFee)
      tmp.communityMargin= numberToString(curString.communityMargin)
    }
    if (tmp.accountName.length<2) {
      message.error("User Name Should be limit 2~30!", 3)
    } else {
      //还差检测
      if (checkParam(tmp)) {
        console.log(tmp)
        RA(11, tmp)
      } else {
        message.error("Error,Please finish it,not empty!", 3)
      }
    }
    // console.log(checkParam(tmp))     
    // console.log(comminityValues)
    // console.log(tmp)
  }
  const RadioChoose = (e:any) => {
    Data3.map((item: any, index: any) => {
      item.categorieList.map((thing:any, i:any) => {
        if (thing.categoriesId == (e.target.value).categoriesId) {
          setCurString({
            communityManagerFee: item.communityManagerFee,
            communityMargin:item.communityMargin
          })
          // console.log(item.communityManagerFee)
          // console.log(item.communityMargin)
        }
      })
    })
  }
  return (
    <div className={styles.base}>

      {/* 头部组件v1.2 */}
      <TitleBack title="Facility Bookings" />
      
      <div className={styles.box1}>
        <div className={styles.box1item1}>Project</div>
        <div className={styles.box1item2}>
        <Spin spinning={loading} tip="Finding...">
            <SearchOptionsCommnity alone={true} placeholder={"Community Name"} defaultValue={DataSave != null ? DataSave.communityName : null} onSubmit={getFacility} />  
          </Spin>
          {/* <Input.Search style={{ width: 200, height: 32 }} onSearch={getFacility} loading={loading} defaultValue={}/> */}
        </div>
      </div>
      {Data3 != null ?
        <>
          <Form ref={formRef}  name="basic" onFinish={onFinish} validateMessages={validateMessages}  >
          <div className={styles.box2}>
            <div className={styles.box2item1}>Facility Bookings</div>
              <div className={styles.box2item2}>
              <Form.Item name="categoriesName" >
              <Radio.Group defaultValue={1} onChange={RadioChoose}>
                {
                  Data3.map((item: any, index: any) => {                                                                                     
                    var tmp=new Array()
                    item.categorieList.map((thing: any, i: any) => {
                        tmp.push(<Radio key={thing.categoriesId} value={thing}>{thing.categoriesName}</Radio>)
                    })
                    return (
                      tmp
                    )                                   
                  })
                }
                  </Radio.Group>
                  </Form.Item>
            </div>
          </div>
          <div className={styles.line}></div>
      
          <div className={styles.box3}>
            <div className={styles.box3item1}>User Name</div>
            <div className={styles.box3item2}><Form.Item name="accountName"  rules={[{required:true,min:2,max:30}]} ><Input style={{ width: 200 }} /></Form.Item></div>
            <div className={styles.box3item3}>Contact Details</div>
            <div className={styles.box3item4}><Form.Item name="accountPhone"  rules={[{required:true},{validator: checkData, trigger: 'blur'}]} ><Input style={{ width: 200 }}/></Form.Item></div>
          </div>
      
          <div className={styles.box4}>
            <div className={styles.box4item1}>Unit</div>
            <div className={styles.box4item2}><Form.Item name="buildNumber" rules={[{required:true},{validator: checkData, trigger: 'blur'}]}><Input placeholder="building" style={{ width: 80 }} /></Form.Item></div>
            <div className={styles.box4item3}>#</div>
            <div className={styles.box4item4}><Form.Item name="floorNumber" rules={[{required:true},{validator: checkData, trigger: 'blur'}]}><Input placeholder="floor" style={{ width: 80 }} /></Form.Item></div>
            <div className={styles.box4item5}>——</div>
            <div className={styles.box4item6}><Form.Item name="roomNumber" rules={[{required:true},{validator: checkData, trigger: 'blur'}]}><Input placeholder="room" style={{ width: 80 }} /></Form.Item></div>
          </div>

          <div className={styles.line}></div>
      
          <div className={styles.box5}>
            <div className={styles.box5item1}>Booking Schedule</div>
            <div className={styles.box5item2}>
              <Row gutter={8}>
                <Col><Form.Item name="subscribeDate" rules={[{required:true}]}><DatePicker /></Form.Item></Col>
                <Col><Form.Item name="reservedTimeList" rules={[{required:true}]}><RangePicker format={format}/></Form.Item></Col>
              </Row>                  
            </div>
            </div>
            {
              curString.communityManagerFee!=null?
              <>
              <div className={styles.box6}>
                <div className={styles.box6item1}>Management fee required</div>
                <div className={styles.box6item2}>${curString.communityManagerFee}</div>
              </div>

              <div className={styles.box6}>
                <div className={styles.box6item1}>Deposit is required</div>
                <div className={styles.box6item2}>${curString.communityMargin}</div>
              </div> 
              </>:null
            }

            
            <div className={styles.line}></div><Button htmlType="submit" type="primary" style={{ width: 80, height: 32 }}>Submit</Button>
          </Form>
        </> : null
      }
    </div>
  );
};

function mapStateToProps(state:any) {
  const { Data3,Result,DataSave } = state.FacilityBookings;  
  const { token } = state.login;  
  return {
    Data3,
    Result,
    DataSave,
    token,
  };
}
export default connect(mapStateToProps)(Bookings);
