import React,{Component} from 'react'

import { Form, Input, DatePicker,Row, Col,Button,Icon ,Select,Switch} from 'antd';

import {InputSize,Currency} from "./Utils"

import TextArea from './ZTextArea'


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


export default class T75 extends Component
{
    name='75'
    desp = "Narrative"
    
    pattern = ""



    onChange=(val)=>{
        this.props.onValue([{s1:val},val])
    }

    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] : {}
        return (<Row>
            <Col span={24}>
            <FormItem
                  help={errmsg.s1}
                 validateStatus={errmsg.s1?'error':null}
                >
                        
                        <TextArea type= "textarea" maxLength={6*35} cols={35} rows={6} style={{imeMode:'disabled'}} placeholder="Narrative" value={value.s1} onChange={(e)=>this.onChange(e.target.value)}/>
                </FormItem>
            
            </Col>
        </Row>)
    }

}



function getCode(mty)
{
    if(mty == 'mt195')
    {
        return [
            23	,
            24	,
            25	,
            26	,
            27	,
            28	,
            29	,
        ]

    }
    else if(mty=='295')
    {
        return [
            30	,
            31	,
            32	,
            34	,
            35	,
            28	,
            29	,

        ]
    }
    else 
        return [
            1	,
            2	,
            3	,
            4	,
            5	,
            6	,
            7	,
            8	,
            9	,
            10	,
            11	,
            12	,
            13	,
            14	,
            15	,
            16	,
            17	,
            18	,
            19	,
            20	,
            21	,
            22	,
            33	,
            36	,
            37	,
            38	,
            39	,
            40	,
            41	,
            42	,
            43	,
            44	,
            45	,
            46	,
            47	,
            48	,
            49	,
            50	,
            51	,
            52	,
        ]
}

export  class T75BAK extends Component
{

    name='75'
    desp = "Queries"
    
    pattern = ""
    tno = -1

    keys=[1,2,3]

    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 mval = ""

        if(obj.s1)
            mval =  `/${obj.s1}/` 
        if(obj.s2)
            mval =  mval  + obj.s2 
        if(obj.s3 && obj.s3[1])
            mval = `${mval}\r\n${obj.s3[1]}`
        this.props.onValue([obj,mval])
    }

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

        value = value && value.length? value[0] : {}
        return (
        <div>
        <Row>
            <Col style={{"minWidth":'100px'}} span={10}>
                <FormItem
                    label="Code"
                    required
                >
                           <Select size={InputSize}  allowClear={true} style={{ width: "100%" }} placeholder="Code" value={value.s1} onChange={(val)=>this.onChange(1,val)}>
                                
                                {
                                    getCode(this.props.mty).map(item=><Option key={item} value={""+item}>{item+""}</Option>)
                                }
                            </Select>
                </FormItem>
            </Col>
            <Col span={14}>
                <FormItem
                 label="Narrative"  
                 
                >
                        
                        <Input type="text" maxLength={16} style={{imeMode:'disabled'}} placeholder="Narrative" value={value.s2} onChange={(e)=>this.onChange(2,e.target.value)}/>
                </FormItem>
            </Col>
        </Row>
        
        <SubItem mty={this.props.mty} onValue = {val=>this.onChange(3,val)} value={value.s3}/>
        </div>
        )
    }
}


class SubItem extends Component
{

    constructor(props)
    {
        super(props)
        //this.state={items:[{val1:"",val2:"",type:0},{val1:"",val2:"",type:0},{val1:"",val2:"",type:0},{val1:"",val2:"",type:0},{val1:"",val2:"",type:0}]}
    }

    componentDidMount()
    {
        // if(this.props.value && this.props.value.length) 
        // {
        //     let obj = this.props.value[0]
        //     obj.forEach((item,index)=>{

        //     })
        // }
    }
    combineValue(items)
    {
        let mval = ""
        for(let item of items)
        {
            let imval = ""
            if(item.type)
            {
                imval = imval + `/${item.val1}/`
                if(item.val2)
                {
                    imval=imval+item.val2
                }
            }else if(item.val2)
            {
                imval = "//" + item.val2
            }
            if(imval)
                mval = mval + imval+'\r\n'
        }
        if(mval)
            mval = mval.substring(0,mval.length - 2)
        return mval
    }
    render()
    {
        let value = this.props.value
        value = value && value.length?value[0]:[{val1:"",val2:"",type:0},{val1:"",val2:"",type:0},{val1:"",val2:"",type:0},{val1:"",val2:"",type:0},{val1:"",val2:"",type:0}]
        return (<div>

            {
            value.map((item,index)=>{
                return <div key={index}>
                        {
                        item.type==1?
                        (<Row>
                        <Col span={2}>
                          <Switch size="small" value={item.type?true:false} onChange={(bol)=>{item.type=bol?1:0;this.props.onValue([value,this.combineValue(value)])}} />
                        </Col>
                        <Col style={{"minWidth":'100px'}} span={8}>
                            <FormItem
                                label="Code"
                                required
                            >
                                    <Select size={InputSize}  allowClear={true} style={{ width: "100%" }} placeholder="Code" value={item.val1} onChange={(val)=>{item.val1=val;this.props.onValue([value,this.combineValue(value)])}}>
                                            {
                                                getCode(this.props.mty).map(item=><Option key={item} value={""+item}>{item+""}</Option>)
                                            }
                                        </Select>
                            </FormItem>
                        </Col>
                        <Col span={14}>
                            <FormItem
                            label="Narrative"  
                            
                            >
                                    
                                    <Input type="text" maxLength={31} style={{imeMode:'disabled'}} placeholder="Narrative"  value={item.val2} onChange={(e)=>{item.val2=e.target.value;this.props.onValue([value,this.combineValue(value)])}} />
                            </FormItem>
                        </Col>
                    </Row>)
                    :
                    (<Row>
                        <Col span={2}>
                          <Switch  size="small" value={item.type?true:false} onChange={(bol)=>{item.type=bol?1:0;this.props.onValue([value,this.combineValue(value)])}} />
                        </Col>
                        <Col span={22}>
                            <FormItem
                            
                            
                            >
                                    
                                    <Input addonBefore="//" type="text" maxLength={33} style={{imeMode:'disabled'}} placeholder="Narrative"  value={item.val2} onChange={(e)=>{item.val2=e.target.value;this.props.onValue([value,this.combineValue(value)])}}/>
                            </FormItem>
                        </Col>
                    </Row>)
                        }
                    </div>
                })
            }
        </div>)
    }
    
}