import React,{Component} from 'react'

import { Form, Input, DatePicker,Row, Col,Button,Icon ,Select} from 'antd';
import {InputSize,Currency,FormatAmount} from "./Utils"

const FormItem = Form.Item;
const Option = Select.Option

export default class T61 extends Component
{

    name='61'
    desp = "Value Date/Currency/Interbank Settled Amount"
    
    pattern = "6!n3!a15d"
    tno = -1


    keys=[1,2,3,4,5,6,7,8,9,10]
    onChange=(index,value)=>
    {
        let obj = {};
        if(!value)
            value = ""
        
        let objtemp =this.props.value
        
        objtemp = objtemp && objtemp.length? objtemp[0] : {}

        objtemp["s"+index] = value;

        this.keys.forEach(i=>{
            obj['s'+i] = objtemp['s'+i]
        });
        let temp = FormatAmount(obj.s5);
        
        let mval = `${obj.s1||''}${obj.s2||''}${obj.s3||''}${temp||''}${obj.s6||''}${obj.s7||''}${obj.s8||''}${obj.s9?`//${obj.s9}`:''}${obj.s10?`\r\n${obj.s10}`:''}`
        this.props.onValue([obj,mval])
    }

    render()
    {
        let value =this.props.value

        let mval = value && value.length? value[1] : ''
        let errmsg = value && value.length==3?value[2]:{}

        value = value && value.length? value[0] : {}

        let CD = ['C','D','RC','RD']
        if(this.props.mty == 'mt608')
            CD = ['C','D']

        return (
            <div>
            <Row>
            <Col style={{"minWidth":'100px'}} span={3}>
                <FormItem                 
                     label="Value Date"  
                        required={this.props.status=='M' || mval?'required':null}
                  help={errmsg.s1}
                 
                    validateStatus={errmsg.s1?'error':null}
                >
                            <DatePicker    defaultValue="" format="yyMMdd" value={value.s1} onChange={(date, dateString)=>this.onChange(1,dateString)} />
                </FormItem>
            </Col>
            <Col style={{"minWidth":'100px'}} span={3}>
                <FormItem                 
                     label="Entry Date"  
                       
                  help={errmsg.s2}
                 
                    validateStatus={errmsg.s2?'error':null}
                >
                            <DatePicker    defaultValue="" format="MMdd" value={value.s2} onChange={(date, dateString)=>this.onChange(2,dateString)} />
                </FormItem>
            </Col>
            <Col style={{"minWidth":'100px'}} span={3}>
                <FormItem
                    label="D/C Mark"
                       required={this.props.status=='M' || mval?'required':null}
                  help={errmsg.s3}
                    validateStatus={errmsg.s3?'error':null}
                >
                           <Select  
                           
                           placeholder="D/C Mark"
                           showSearch
                           
                           allowClear={true}
                            optionFilterProp="children"
                            notFoundContent="Wrong Code"
                            style={{ width: "100%" }} value={value.s3} onChange={val=>this.onChange(3,val)} >
                                
                                   {/*<Option  value="C">C</Option>
                                    <Option  value="D">D</Option>
                                    <Option  value="RC">RC</Option>
                                    <Option  value="RD">RD</Option>*/}
                                    {
                                        CD.map(function (item) {
                                            return <Option  value={item} key={item}>{item}</Option>
                                        })
                                    }
                            </Select>
                </FormItem>
            </Col>
            <Col span={12}>
                <FormItem
                 label="Amount"  
                    required={this.props.status=='M' || mval?'required':null}
                  help={errmsg.s5}
                    validateStatus={errmsg.s5?'error':null}
                >
                        
                        <Input  value={value.s5} onChange={e=>this.onChange(5,e.target.value)}  maxLength={16} style={{imeMode:'disabled'}} placeholder="Amount"/>
                </FormItem>
            </Col>
            </Row>
            <Row>
            
            <Col style={{"minWidth":'100px'}} span={4}>
                <FormItem
                    label="Transaction Type"
                       required={this.props.status=='M' || mval?'required':null}
                  help={errmsg.s6}
                    validateStatus={errmsg.s6?'error':null}
                >
                           <Select  
                           
                           placeholder="Transaction Type"
                           showSearch
                           
                           allowClear={true}
                            optionFilterProp="children"
                            notFoundContent="Wrong Code"
                            style={{ width: "100%" }} value={value.s6} onChange={val=>this.onChange(6,val)} >
                               
                                    <Option  value="S">S--transfer</Option>
                                    <Option  value="N">N--Non-transfer</Option>
                                    <Option  value="F">F--First advice</Option>
                            </Select>
                </FormItem>
            </Col>
            
            <Col style={{"minWidth":'100px'}} span={8}>
                <FormItem
                    label="Identification Code"
                       required={this.props.status=='M' || mval?'required':null}
                  help={errmsg.s7}
                    validateStatus={errmsg.s7?'error':null}
                >
                           <Select  
                           
                           placeholder="Identification Code"
                           showSearch
                           
                           allowClear={true}
                            optionFilterProp="children"
                            notFoundContent="Wrong Code"
                            style={{ width: "100%" }} value={value.s7} onChange={val=>this.onChange(7,val)} >
                               
                                    <Option  value="BNK">BNK-Securities Related Item - Bank Fees</Option>
                                    <Option  value="BOE">BOE-Bill of Exchange</Option>
                                    <Option  value="BRF">BRF-Brokerage Fee</Option>
                                    <Option  value="CAR">CAR-Corporate Actions Related</Option>
                                    <Option  value="CAS">CAS-Securities Related Item - Cash in Lieu</Option>
                                    <Option  value="CHG">CHG-Charges and Other Expenses</Option>
                                    <Option  value="CHK">CHK-Cheques</Option>
                                    <Option  value="CLR">CLR-Cash Letters/Cheques Remittance</Option>
                                    <Option  value="CMI">CMI-ash Management Item - No Detail</Option>
                                    <Option  value="CMN">CMN-Cash Management Item - Notional Pooling</Option>
                                    <Option  value="CMP">CMP-Compensation Claims</Option>
                                    <Option  value="CMS">CMS-Cash Management Item - Sweeping</Option>
                                    <Option  value="CMT">CMT-Cash Management Item - Topping</Option>
                                    <Option  value="CMZ">CMZ-Cash Management Item - Zero Balancing</Option>
                                    <Option  value="COL">COL-Collections</Option>
                                    <Option  value="COM">COM-Commission</Option>
                                    <Option  value="CPN">CPN-Coupon Payments</Option>
                                    <Option  value="DCR">DCR-Documentary Credit</Option>
                                    <Option  value="DDT">DDT-Direct Debit Item</Option>
                                    <Option  value="DIS">DIS-Gains Disbursement</Option>
                                    <Option  value="DIV">DIV-Dividends</Option>
                                    <Option  value="EQA">EQA-Equivalent Amount</Option>
                                    <Option  value="EXT">EXT- External Transfer for Own Account</Option>
                                    <Option  value="FEX">FEX-Foreign Exchange</Option>
                                    <Option  value="INT">INT-Interest Related Amount</Option>
                                    <Option  value="LBX">LBX-Lock Box</Option>
                                    <Option  value="LDP">LDP-Loan Deposit</Option>
                                    <Option  value="MAR">MAR-Margin Payments/Receipts</Option>
                                    <Option  value="MAT">MAT-Maturity</Option>
                                    <Option  value="MGT">MGT-Management Fees</Option>
                                    <Option  value="MSC">MSC-Miscellaneous</Option>
                                    <Option  value="NWI">NWI-New Issues Distribution</Option>
                                    <Option  value="ODC">ODC-Overdraft Charge</Option>
                                    <Option  value="OPT">OPT-Options</Option>
                                    <Option  value="PCH">PCH-Purchase</Option>
                                    <Option  value="POP">POP-Pair-off Proceeds</Option>
                                    <Option  value="PRN">PRN-Principal Pay-down/Pay-up</Option>
                                    <Option  value="REC">REC-Tax Reclaim</Option>
                                    <Option  value="RED">RED-Redemption/Withdrawal</Option>
                                    <Option  value="RIG">RIG-Rights</Option>
                                    <Option  value="RTI">RTI-Returned Item</Option>
                                    <Option  value="SAL">SAL-Sale</Option>
                                    <Option  value="SEC">SEC-Securities</Option>
                                    <Option  value="SLE">SLE-Securities Lending Related</Option>
                                    <Option  value="STO">STO-Standing Order</Option>
                                    <Option  value="STP">STP-Stamp Duty</Option>
                                    <Option  value="SUB">SUB-Subscription</Option>
                                    <Option  value="SWP">SWP-SWAP Payment</Option>
                                    <Option  value="TAX">TAX-Withholding Tax Payment</Option>
                                    <Option  value="TCK">TCK-Travellers Cheques</Option>
                                    <Option  value="TCM">TCM- Tripartite Collateral Management</Option>
                                    <Option  value="TRA">TRA- Internal Transfer for Own Account</Option>
                                    <Option  value="TRF">TRF-Transfer</Option>
                                    <Option  value="TRN">TRN- Transaction Fee</Option>
                                    <Option  value="UWC">UWC-Underwriting Commission</Option>
                                    <Option  value="VDA">VDA-Value Date Adjustment </Option>
                                    <Option  value="WAR">WAR-Warrant</Option>
                            </Select>
                </FormItem>
            </Col>
            <Col span={12}> 
                <FormItem
                help={errmsg.s8}
                 validateStatus={errmsg.s8?'error':null}
                 required={this.props.status=='M' || mval?'required':null}
                label="Reference for the Account Owner"
                >
                        <Input maxLength={16} value={value.s8} placeholder="Reference for the Account Owner" style={{'imeMode':'disabled'}} onChange={e=>this.onChange(8,e.target.value)}/>
                </FormItem>
            </Col>
            </Row>
            <Row>
            
            <Col span={12}> 
                <FormItem
                help={errmsg.s9}
                
                 validateStatus={errmsg.s9?'error':null}
                label="Reference of the Account Servicing Institution"
                >
                        <Input addonBefore="//" maxLength={16} value={value.s9} placeholder="Reference of the Account Servicing Institution" style={{'imeMode':'disabled'}} onChange={e=>this.onChange(9,e.target.value)}/>
                </FormItem>
            </Col>
            <Col span={12}> 
                <FormItem
                help={errmsg.s10}
                 validateStatus={errmsg.s10?'error':null}
                label="Supplementary Details"
                >
                        <Input maxLength={34} value={value.s10} placeholder="Supplementary Details" style={{'imeMode':'disabled'}} onChange={e=>this.onChange(10,e.target.value)}/>
                </FormItem>
            </Col>
        </Row>
        </div>
        )
    }
}