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 T26C extends Component {

    name = '26C'
    desp = "Identification of the Commodity"

    pattern = "[3!a]/15x/5!a4!a[4x][//8x]"
    tno = -1


    keys = [1, 2, 3, 4, 5, 6]
    onChange = (index, value) => {
        let obj = {};
        if (!value)
            value = ""

        let objtemp = this.props.value

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

        objtemp["s" + index] = value;
        let mval = ''
        this.keys.forEach(i => {
            obj['s' + i] = objtemp['s' + i]
        });

        mval = `${obj.s1 || ''}${obj.s2 ? `/${obj.s2}` : ''}${obj.s3 ? `/${obj.s3}` : ''}${obj.s4 || ''}${obj.s5 || ''}${obj.s6 ? `//${obj.s6}` : ''}`
        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="Delivery Details"
                            help={errmsg.s1}
                            validateStatus={errmsg.s1 ? 'error' : null}
                        >
                            <Select allowClear={true} value={value.s1} style={{ width: "100%" }} placeholder="Delivery Details" onChange={(val) => this.onChange(1, val)}>
                                <Option value="CFR">CFR</Option>
                                <Option value="CIF">CIF</Option>
                                <Option value="CIP">CIP</Option>
                                <Option value="CPT">CPT</Option>
                                <Option value="DAF">DAF</Option>
                                <Option value="DDP">DDP</Option>
                                <Option value="DDU">DDU</Option>
                                <Option value="DEQ">DEQ</Option>
                                <Option value="DES">DES</Option>
                                <Option value="DTD">DTD</Option>
                                <Option value="EXW">EXW</Option>
                                <Option value="FAS">FAS</Option>
                                <Option value="FCA">FCA</Option>
                                <Option value="FOB">FOB</Option>
                                <Option value="LOC">LOC</Option>
                                <Option value="OTH">OTH</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col style={{ "minWidth": '100px' }} span={7}>
                        <FormItem
                            label="Delivery Location"

                            help={errmsg.s2}
                            required={this.props.status == 'M' || mval ? 'required' : null}
                            validateStatus={errmsg.s2 ? 'error' : null}
                        >
                            <Input addonBefore="/" maxLength={15} style={{ imeMode: 'disabled' }} placeholder="Delivery Location" value={value.s2} onChange={(e) => this.onChange(2, e.target.value)} />
                        </FormItem>
                    </Col>
                    <Col style={{ "minWidth": '100px' }} span={3}>
                        <FormItem
                            label="Allocation"
                            required={this.props.status == 'M' || mval ? 'required' : null}
                            help={errmsg.s3}
                            validateStatus={errmsg.s3 ? 'error' : null}
                        >
                            <Select allowClear={true} value={value.s3} style={{ width: "100%" }} placeholder="" onChange={(val) => this.onChange(3, val)}>
                                <Option value="ALLOC">ALLOC</Option>
                                <Option value="UNALL">UNALL</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    </Row>
                    <Row>
                    <Col style={{ "minWidth": '100px' }} span={4}>
                        <FormItem
                            label="Type"
                            required={this.props.status == 'M' || mval ? 'required' : null}
                            help={errmsg.s4}
                            validateStatus={errmsg.s4 ? 'error' : null}
                        >
                            <Select allowClear={true} value={value.s4} style={{ width: "100%" }} placeholder="" onChange={(val) => this.onChange(4, val)}>
                                <Option value="AMEG">AMEG</Option>
                                <Option value="ANUG">ANUG</Option>
                                <Option value="BRIT">BRIT</Option>
                                <Option value="COIN">COIN</Option>
                                <Option value="CORO">CORO</Option>
                                <Option value="DUCA">DUCA</Option>
                                <Option value="FRFR">FRFR</Option>
                                <Option value="GECU">GECU</Option>
                                <Option value="KRUG">KRUG</Option>
                                <Option value="LBTY">LBTY</Option>
                                <Option value="MAPL">MAPL</Option>
                                <Option value="MEXP">MEXP</Option>
                                <Option value="NBUF">NBUF</Option>
                                <Option value="NOBL">NOBL</Option>
                                <Option value="NSOV">NSOV</Option>
                                <Option value="OSOV">OSOV</Option>
                                <Option value="SAEG">SAEG</Option>
                                <Option value="SECU">SECU</Option>
                                <Option value="STAT">STAT</Option>
                                <Option value="VREN">VREN</Option>
                                <Option value="ALUM">ALUM</Option>
                                <Option value="COPP">COPP</Option>
                                <Option value="GOLD">GOLD</Option>
                                <Option value="IRID">IRID</Option>
                                <Option value="LEAD">LEAD</Option>
                                <Option value="NICK">NICK</Option>
                                <Option value="OSMI">OSMI</Option>
                                <Option value="OTHR">OTHR</Option>
                                <Option value="PALL">PALL</Option>
                                <Option value="PLAT">PLAT</Option>
                                <Option value="POIL">POIL</Option>
                                <Option value="RHOD">RHOD</Option>
                                <Option value="RUTH">RUTH</Option>
                                <Option value="SILV">SILV</Option>
                                <Option value="STEE">STEE</Option>
                                <Option value="TINA">TINA</Option>
                                <Option value="TITA">TITA</Option>
                                <Option value="ZINC">ZINC</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span={3}>
                        <FormItem
                            label="Denomination"
                            help={errmsg.s5}
                            validateStatus={errmsg.s5 ? 'error' : null}
                        >

                            <Input value={value.s5} onChange={e => this.onChange(5, e.target.value)} maxLength={4} style={{ imeMode: 'disabled' }} placeholder="Denomination" />
                        </FormItem>
                    </Col>
                    <Col style={{ "minWidth": '100px' }} span={6}>
                        <FormItem
                            label="Form"
                            help={errmsg.s6}
                            validateStatus={errmsg.s6 ? 'error' : null}
                        >
                            <Input value={value.s6} onChange={e => this.onChange(6, e.target.value)} maxLength={8} style={{ imeMode: 'disabled' }} placeholder="Form" />

                        </FormItem>
                    </Col>

                </Row>
            </div>
        )
    }
}