import React, { useState, useEffect,useRef } from 'react';
import styles from './css/index.less';
import { Input ,Menu,Table,Space,Form,Radio, Modal,Row,Col, Button, message } from 'antd';

import { Link, useIntl, connect, Dispatch } from 'umi';


import TitleBack from '../../../components/TitleBack/TitleBack';
import Line from '../../../components/Line/Line';
import { timestampToTime3 } from '../../../utils/time';
import TextArea from 'antd/lib/input/TextArea';


import {getUrlLast} from '../../../utils/string';
const BookingDetail = (props:any) => {

  const { dispatch,location, DataSave,DataSaveDetail,token} = props;
  const RA = (index:any,values: any) => { dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } }) };
  
  useEffect(() => {
    console.log(DataSave.id)
    RA(2,{ accountCategoriesId: DataSave.id })
  }, []); 


  // const statusDes = ["全部", "已申请", "已预订", "已使用", "已取消", "已完成"]
  const statusDes = ["All", "Applied", "Reserved", "Used", "Cancelled", "Completed"]

  const [modalVisible,setModalVisible]=useState(false)
  const [modalItem,setModalIteme]=useState({title:"",tab:1})
  const [backFeeFlag, setBackFeeFlag] = useState(false)
  const [curbackFee, setCurBackFee] = useState(0)
  useEffect(() => {
    if (DataSaveDetail != null) {
      setCurBackFee(DataSaveDetail.marginFee)
    }
  }, [DataSaveDetail])
  
  const radioStyle = {display: 'block',height: '30px',lineHeight: '30px'}
        
  const formRef = useRef(null);
  const backFee = (e:any) => {      
    if (e.target.value== 1) {
      setBackFeeFlag(false)
      setCurBackFee(DataSaveDetail.marginFee)
    } else {
      setBackFeeFlag(true)
    }
  } 

  const onFinish = (values: any) => {
    var val = values
    if (val.backMarginFeeReason== null) {
      message.error("Back marginFee reason is empty!",3)
    } else {
      var RAVAL = {
        accountCategoriesId: DataSave.id,
        backMarginFee: curbackFee.toString(),
        backMarginFeeReason: val.backMarginFeeReason,
        accountName: DataSave.accountName,
        backFeeStatus: curbackFee == DataSaveDetail.marginFee ? "0" : "1",
        marginFee: (DataSaveDetail.marginFee).toString()
      }
    
      console.log(RAVAL)
      RA(3, RAVAL)
    }
  };
  const onFinishFailed = (errorInfo: any) => { console.log('Failed:', errorInfo) };
  
  const getBackMarginFee = (e:any) => {
    setCurBackFee(e.target.value)
  }
  const makeFee = () => {
    setModalIteme({title:"Deposit And Fee",tab:2})
    setModalVisible(true)   
  }
  const showModal = () => {
    setModalIteme({title:"Cancel Reservation",tab:1})
    setModalVisible(true)    
  };
  const handleOk = (e:any) => {
    setModalVisible(false)
    if (modalItem.tab == 1) {
      var RAVAL = {
        accountCategoriesId: DataSave.id,
        userToken: token,
      }
      RA(5, RAVAL)
    } else {
      var RAVAL2 = {
        accountCategoriesId: DataSave.id,
        accountName: DataSave.accountName,
        managerFee:(DataSaveDetail.managerFee).toString(),
        marginFee:(DataSaveDetail.marginFee).toString()
      }
      RA(4,RAVAL2)
    }
  };
  const handleCancel = (e:any) => {
    setModalVisible(false)
  }
  return (
    <div className={styles.base}>
      
      <TitleBack title={"View Facility Bookings"} url={getUrlLast(location.pathname)+'?Facility=false'}/>

      <Row gutter={8}>
        <Col>Booking Status</Col><Col span={2}>{statusDes[DataSave.status]}</Col>
        <Col>Order Time</Col><Col span={2}>{timestampToTime3(DataSave.createTime.time)}</Col>
      </Row>
      <Line />
      <Row gutter={8}>
        <Col>Service Community</Col><Col span={3}>{DataSave.communityName}</Col>
        <Col>Booking Facilities</Col><Col span={3}>{DataSave.facilityTitle}</Col>
        <Col>Booking Time</Col><Col span={3}>{DataSave.subscribeDate}</Col>
        <Col span={3}>{DataSave.subscribeTime}</Col>
      </Row>
        
      <Row gutter={8} style={{marginTop:16}}>
        <Col>User Name</Col><Col span={3}>{DataSave.accountName}</Col>
        <Col>Contact Number</Col><Col span={3}>{DataSave.accountPhone}</Col>
        <Col>Unit</Col>
        <Col span={3}>{DataSave.buildNumber}# {DataSave.floorNumber}-{DataSave.roomNumber}</Col>
      </Row>
      <Line />
      {
        (DataSaveDetail != null && DataSave.status==1 &&DataSaveDetail.managerFee>0)?
        <>
        <Row gutter={8} style={{ marginTop: 16 }}>
          <Col>Management Fee Required</Col><Col span={2}>{DataSaveDetail.managerFee}</Col>
        </Row>
        <Row gutter={8} style={{ marginTop: 16 }}>
          <Col>Deposit Required</Col><Col span={2}>{DataSaveDetail.marginFee}</Col>
        </Row>
      <div  style={{marginTop:16}}>
      <Button type="primary" onClick={makeFee}>Pay</Button>
      </div>
        <Line />
        </>:null          
      }

      {
        (DataSaveDetail != null&&DataSave.marginFeeStatus == 1&&DataSaveDetail.managerFee>0) ?
          <>
            <Form ref={formRef} name="basic2" onFinish={onFinish} onFinishFailed={onFinishFailed} >             
          <Row gutter={8} style={{ marginTop: 16 }}>
              <Col>已交管理费</Col><Col span={2}>{DataSaveDetail.managerFee}</Col>
              <Col>已交押金</Col><Col span={2}>{DataSaveDetail.marginFee}</Col>
            </Row>

              <div style={{ marginTop: 16 }}>             
                    <Radio.Group onChange={backFee} defaultValue={1}>
                      <Radio value={1} style={radioStyle}>全额退还</Radio>                                                           
                      <Radio value={2} style={radioStyle}>部分退还 {backFeeFlag ?<><Input onChange={getBackMarginFee} style={{ width: 80 }} /> $</>:null}</Radio>                                                                       
                </Radio.Group>                  
            </div>

            {
              backFeeFlag ?
              <div style={{ marginTop: 16 }}> 
                <Form.Item name="backMarginFeeReason"><TextArea autoSize={false} style={{ padding: 8, width: 400, height: 80 }} placeholder="Reasons for partial refund of deposit..."></TextArea></Form.Item>
               </div>
              :null
            }
          <div style={{marginTop:16}}>
            <Form.Item><Button type="primary" htmlType="submit">退还押金</Button></Form.Item>
          </div>
          <Line />
          </Form>
          </>:null
      }
      
      {
        (DataSave.status == 1 || DataSave.status == 2) ?
          <Button onClick={showModal}>取消预约</Button>
          : null
      }
      
      <Modal okText="Yes" cancelText="No" title={modalItem.title} visible={modalVisible} onOk={handleOk} onCancel={handleCancel}>  
        {
          modalItem.tab == 1 ?<p>Are you sure you want to cancel the booking {DataSave.subscribeDate} ,{DataSave.subscribeTime}, {DataSave.facilityTitle}</p>
          :<p>Are you sure you confirm the payment of {DataSave.subscribeDate} {DataSave.subscribeTime} {DataSave.facilityTitle}</p>
        }  
 
      </Modal>

      
    </div>
  );
};

function mapStateToProps(state:any) {
  const { DataSave,DataSaveDetail } = state.FacilityBookings;  
  const { token } = state.login;  
  return {
    DataSave,
    DataSaveDetail,
    token
  };
}

export default connect(mapStateToProps)(BookingDetail);


// accountId: ""
// accountName: "小文"
// accountPhone: "15917568033"
// baseQuery: null
// categoriesId: "868871abe5294075863a572d9ed4d533"
// categoriesImageUrl: ""
// categoriesName: ""
// communityId: "2df3a85e28b942edaf03f0ed765ff897"
// communityName: "A7"
// count: 0
// createTime: {date: 20, day: 4, hours: 17, minutes: 20, month: 7, …}
// deleted: 0
// description: ""
// extend: ""
// facilitiesId: "868871abe5294075863a572d9ed4d511"
// facilityTitle: ""
// id: "7b664a44a2a34add819f391dcb23675b"
// managerFeeStatus: 1
// marginFeeStatus: 1
// pageNum: 0
// status: 4
// subscribeDate: "2020-09-12"
// subscribeTime: "09:00,10:00"

// 预订状态
// 下单时间
// 服务小区
// 预订设施
// 预订时间
// 用户姓名
// 联系电话
// 单元
