text: import React, { Component } from 'react';
  import CheckBox from '../../../Base/FormControl/CheckBox';
  import Button from '../../../Base/FormControl/Button';
  import Input from '../../../Base/FormControl/Input';
  import Select from '../../../Base/FormControl/Select';
  import { Col, Row, Container, Form, FormGroup } from 'reactstrap';
  import * as Constant from '../../../Base/Constant'
  
  export default class NGINSan extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        actionCondition: props.location.aboutProps !== undefined ? props.location.aboutProps.name : 'CREATE',
        errors: {
          customer: '',
          frcNumber: '',
          serviceProfile: '',
          iocForbidden: '',
        },
        formErrors: {
          customer: '',
          frcNumber: '',
          serviceProfile: '',
          iocForbidden: '',
        },
        hidePortal: '',
        nginSan: {  
          customer: '',
          frcNumber: '',
          serviceProfile: '',
          iocForbidden: '',
          iicBarring: '',
          mcAllowed: '',
          nrtv: '',
          mcd: '',
          cbn: '',
          ppbe:'',
          webAccessBlocked:'',
          sanBlock:'',
          focEnabled:'',
          pdNumber:'',
          cpsFreeFormat:'',
          cpsProductCode:'',
          cpsResellerId:'',
          cpsSanEncoded:'',
          id:'',
          enablePriceAnnouncment:''
          
        },
        country: [
          { "name": "AT (Austria)", "code": "AT" },
          { "name": "BE (Belgium)", "code": "BE" },
          { "name": "CH (Switzerland)", "code": "CH" },
          { "name": "DE (Germany)", "code": "DE" },
          { "name": "DK (Denmark)", "code": "DK" },
          { "name": "ES (Spain)", "code": "ES" },
          { "name": "FR (France)", "code": "FR" },
          { "name": "IE (Ireland)", "code": "IE" },
          { "name": "INT (International)", "code": "INT" },
          { "name": "IS (Iceland)", "code": "IS" },
          { "name": "IT (Italy)", "code": "IT" },
          { "name": "LU (Luxembourg)", "code": "LU" },
          { "name": "NL (Netherlands)", "code": "NL" },
          { "name": "PT (Portugal)", "code": "PT" },
          { "name": "SE (Sweden)", "code": "SE" },
          { "name": "UK (United Kingdom)", "code": "UK" },
          { "name": "US (United States)", "code": "US" }
        ],
        customer: [
          { "name": "Colt Telecom - internal", "code": "AT" },
          { "name": "End Corporate Customer", "code": "BE" },
          { "name": "Partner", "code": "CH" },
          { "name": "SME", "code": "DE" },
          { "name": "Supplier", "code": "DK" },
          { "name": "Wholesale Customer", "code": "ES" }
        ],
        serviceProfile: [
          { "name": "Colt Telecom - internal", "code": "AT" },
          { "name": "End Corporate Customer", "code": "BE" },
          { "name": "Partner", "code": "CH" },
          { "name": "SME", "code": "DE" },
          { "name": "Supplier", "code": "DK" },
          { "name": "Wholesale Customer", "code": "ES" }
        ],
        superVisionMode: [
          { "name": "Colt Telecom - internal", "code": "AT" },
          { "name": "End Corporate Customer", "code": "BE" },
          { "name": "Partner", "code": "CH" },
          { "name": "SME", "code": "DE" },
          { "name": "Supplier", "code": "DK" },
          { "name": "Wholesale Customer", "code": "ES" }
        ],
        cbn: [
          { "name": "Colt Telecom - internal", "code": "AT" },
          { "name": "End Corporate Customer", "code": "BE" },
          { "name": "Partner", "code": "CH" },
          { "name": "SME", "code": "DE" },
          { "name": "Supplier", "code": "DK" },
          { "name": "Wholesale Customer", "code": "ES" }
        ],     
        hideCustomerFlag:false,
        isCustomer:true,
        isFrcNumber:true,
        isServiceProfile:true
      }
      this.handleFormSubmit = this.handleFormSubmit.bind(this);
      this.handleClearForm = this.handleClearForm.bind(this);
      this.handleCheckBox = this.handleCheckBox.bind(this);
      this.handleInput = this.handleInput.bind(this);
    }
  
    handleInput(e) {
  
      let value = e.target.value;
      let name = e.target.name;
  
      this.setState(prevState => ({
        nginSan:
        {
          ...prevState.nginSan, [name]: value
        }
      }), () => console.log(this.state.nginSan))
    
      
      //let formErrors = { ...this.state.formErrors };
      
      
      
  
      
      
      
      
      if(name==="customer")
      {
        if(value.length < 1)
        {
          
        this.setState({isCustomer: true});
       // this.setState({ formErrors, [name]: value }, () => console.log(this.state));
        }
        else
        {
        this.setState({isCustomer: false});
       // formErrors.streetName = value.length < 3 ? "minimum 3 characaters required" : "";
        }
      }
      if(name==="frcNumber")
      {
        if(value.length < 1)
        {
          
        this.setState({isFrcNumber: true});
       // this.setState({ formErrors, [name]: value }, () => console.log(this.state));
        }
        else
        {
        this.setState({isFrcNumber: false});
       // formErrors.streetName = value.length < 3 ? "minimum 3 characaters required" : "";
        }
      }
      if(name==="serviceProfile")
      {
        if(value.length < 1)
        {
          
        this.setState({isServiceProfile: true});
       // this.setState({ formErrors, [name]: value }, () => console.log(this.state));
        }
        else
        {
        this.setState({isServiceProfile: false});
       // formErrors.streetName = value.length < 3 ? "minimum 3 characaters required" : "";
        }
      }
     //this.setState({ formErrors, [name]: value }, () => console.log(this.state));
     this.setState(prevState => ({
      formErrors:
      {
        ...prevState.formErrors, [name]: value
      }
    }), () => console.log(this.state.formErrors))
  
     
    }
  
    handleCheckBox(e) {
      let value = e.target.value;
      let name = e.target.name;
      if (this.state.hidePortal === 'none'){
        value ='name'; 
        this.setState({ hidePortal: '' });
      }
      else{
        value ='';
        this.setState({ hidePortal: 'none' });
      }
      this.setState(prevState => ({
        nginSan:
        {
          ...prevState.nginSan, [name]: value
        }
      }));
    }
    validateName(e) {    
      e.preventDefault();    
      let userData = this.state.nginSan;
      if(userData.legalCustomerName.length >1){
        this.setState({isFocused: !this.state.isFocused}); 
      }    
     console.log(this.state.legalCustomerName);
    }
  
    
    handleFormSubmit(e) {
      e.preventDefault();
      debugger
      let userData = this.state.nginSan;
      if (userData.customer.length < 1) {
        this.setState(prevState => ({
          errors:{ ...prevState.errors, customer: "Customer is required" }}));
      } else if (userData.frcNumber.length < 1) {
        this.setState(prevState => ({
          errors:{ ...prevState.errors, frcNumber: "FRC number is required" }}));
      }else if (userData.serviceProfile.length < 1) {
        this.setState(prevState => ({
          errors:{ ...prevState.errors, serviceProfile: "Service Profile is required" }}));
      }        
      else {
       this.props.history.push(Constant.NGIN_VIEW_URL);
      }
      /* fetch('http://example.com', {
        method: "POST",
        body: JSON.stringify(userData),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
      }).then(response => {
        response.json().then(data => {
          console.log("Successful" + data);
        })
      }) */
    }
  
    handleClearForm(e) {
      e.preventDefault();
      this.props.history.push('/customerType');
    }
  
    handleCancel=(e)=> {
      e.preventDefault();
      this.props.history.push(Constant.NGIN_VIEW_URL);
    }
    
    render() {
      const { formErrors } = this.state;
      
    const errorFlagCustomer = {
      display: this.state.isCustomer ? "inline" : "none"
    };
    
    const errorFlagFrcNumber = {
      display: this.state.isFrcNumber ? "inline" : "none"
    };  
    const errorFlagServiceProfiler = {
      display: this.state.isServiceProfile ? "inline" : "none"
    };
     
      return (
        <div className="glb-font">
          <Container className="div-margin">
           
            <Row className="div-margin" style={{marginTop:'10px'}}>
              <Col xs="12" sm="12" md="12">
                <label className="form-label">Fields marked with asterisk (<span style={spanStyle}>*</span>) are required</label>
              </Col>
            </Row>
          </Container>
          <Container className="div-border div-margin">
            <Form method="POST" onSubmit={this.handleFormSubmit}>
              <Row className="heading-green-row">
                <Col className="heading-green" xs="12" sm="12" md="12">
                  {/* <Translation>{(t) => <>{t(header)} {t('customer.customer')}</>}</Translation> */}
                  Add SAN
                </Col>
              </Row>
              
              <Row className="div-margin">
              
              <Col xs="12" sm="12" md="4">
                <FormGroup>
                  <Select title="order-service.country" name={"country"} multiple={false} options={this.state.country}
                      value={this.state.nginSan.country} placeholder={"Select country"} handleChange={this.handleInput} />
                </FormGroup>
              </Col>
  
                     
              <Col xs="12" sm="12" md="4">
                  <FormGroup>
                  <Select title="customer.customerName" name={"customer"} multiple={false} options={this.state.customer} onChange={this.handleInput}
                  value={this.state.nginSan.customer} placeholder={"Select customer"} handleChange={this.handleInput} isrequired={true} />
                  <div style={errorFlagCustomer}> 
                  <span style={spanStyle}>{this.state.errors.customer}</span>
                  
                  </div>
                  </FormGroup>
              </Col> 
              <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <Input  inputtype={"text"} title="order-service.sanFRCNumber" name={"frcNumber"} value={this.state.nginSan.frcNumber || ''}
                      placeholder={"Enter Your SAN(FRC) Number"} onChange={this.handleInput} isrequired={true}  />
                  <div style={errorFlagFrcNumber}> 
                  <span style={spanStyle}>{this.state.errors.frcNumber}</span>
                  {formErrors.frcNumber.length > 0 && (
                  <span className="errorMessage">{formErrors.frcNumber}</span>
                  )}
                  </div>
                  </FormGroup>
                </Col>
                </Row>
              
              <Row className="div-margin">
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                  <Select title="order-service.serviceProfile" name={"serviceProfile"} multiple={false} options={this.state.serviceProfile} onChange={this.handleInput}
                  value={this.state.nginSan.serviceProfile} placeholder={"Select Service Profile"} handleChange={this.handleInput} isrequired={true} />
                 <div style={errorFlagServiceProfiler}> 
                  <span style={spanStyle}>{this.state.errors.serviceProfile}</span>
                  
                  </div>
                  
                  </FormGroup>
              </Col> 
              
              <Col xs="12" sm="12" md="4">
                  <FormGroup>
                  <Select title="order-service.superVisionMode" name={"superVisionMode"} multiple={false} options={this.state.superVisionMode} onChange={this.handleInput}
                  value={this.state.nginSan.superVisionMode} placeholder={"Select Supervision Mode"} handleChange={this.handleInput} isrequired={false} />
                  
                  </FormGroup>
              </Col> 
              <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <CheckBox title="order-service.iocForbidden" name={"iocForbidden"} options={this.state.iocForbidden}
                      checked={this.state.nginSan.iocForbidden} selectedOptions={this.state.nginSan.iocForbidden} handleChange={this.handleCheckBox} />
                  </FormGroup>
                </Col>
                </Row>
              
              <Row className="div-margin">
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <CheckBox title="order-service.iicBarring" name={"iicBarring"} options={this.state.iicBarring}
                      checked={this.state.nginSan.iicBarring} selectedOptions={this.state.nginSan.iicBarring} handleChange={this.handleCheckBox} />
                  </FormGroup>
                </Col>
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <CheckBox title="order-service.mcAllowed" name={"mcAllowed"} options={this.state.mcAllowed}
                      checked={this.state.nginSan.mcAllowed} selectedOptions={this.state.nginSan.mcAllowed} handleChange={this.handleCheckBox} />
                  </FormGroup>
                </Col>
                
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <Input inputtype={"text"} title="order-service.nrtv" name={"nrtv"} value={this.state.nginSan.nrtv || ''}
                      placeholder={"Enter No Reply Timer Value"} onChange={this.handleInput} isrequired={false} onBlur={this.validateOcn}/>
                    
                  </FormGroup>
                </Col>
                </Row>
              
              <Row className="div-margin">
             <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <Input inputtype={"text"} title="order-service.mcd" name={"mcd"} value={this.state.nginSan.mcd || ''}
                      placeholder={"Enter Max Call Duration"} onChange={this.handleInput}  />
                  
                  </FormGroup>
              </Col>
              <Col xs="12" sm="12" md="4">
                  <FormGroup>
                  <Select title="order-service.cbn" name={"cbn"} multiple={false} options={this.state.cbn} onChange={this.handleInput}
                  value={this.state.nginSan.cbn} placeholder={"Select Charge Band Name"} handleChange={this.handleInput} isrequired={false} />
                  
                  </FormGroup>
              </Col>
              <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <CheckBox title="order-service.ppbe" name={"ppbe"} options={this.state.mcAllowed}
                      checked={this.state.nginSan.ppbe} selectedOptions={this.state.nginSan.ppbe} handleChange={this.handleCheckBox} />
                  </FormGroup>
                </Col> 
                </Row>
              
              <Row className="div-margin">
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <CheckBox title="order-service.webAccessBlocked" name={"webAccessBlocked"} options={this.state.webAccessBlocked}
                      checked={this.state.nginSan.webAccessBlocked} selectedOptions={this.state.nginSan.webAccessBlocked} handleChange={this.handleCheckBox} />
                  </FormGroup>
                </Col>
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <CheckBox title="order-service.sanBlock" name={"sanBlock"} options={this.state.sanBlock}
                      checked={this.state.nginSan.sanBlock} selectedOptions={this.state.nginSan.sanBlock} handleChange={this.handleCheckBox} />
                  </FormGroup>
                </Col>
              
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <CheckBox title="order-service.focEnabled" name={"focEnabled"} options={this.state.focEnabled}
                      checked={this.state.nginSan.focEnabled} selectedOptions={this.state.nginSan.focEnabled} handleChange={this.handleCheckBox} />
                  </FormGroup>
                </Col>
                </Row>
              
              <Row className="div-margin">
              
             
              <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <Input  inputtype={"text"} title="order-service.pdNumber" name={"pdNumber"} value={this.state.nginSan.pdNumber || ''}
                      placeholder={"Enter Your Pre Destination Number"} onChange={this.handleInput} isrequired={false}  />
                                 
                  </FormGroup>
                </Col>
               
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <Input inputtype={"text"} title="order-service.cpsFreeFormat" name={"cpsFreeFormat"} value={this.state.nginSan.cpsFreeFormat || ''}
                      placeholder={"Enter CPS (free format)"} onChange={this.handleInput} isrequired={false}/>
                  
                  </FormGroup>
                </Col>
                
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <Input inputtype={"text"} title="order-service.cpsProductCode" name={"cpsProductCode"} value={this.state.nginSan.cpsProductCode || ''}
                      placeholder={"Enter CPS Product Code"} onChange={this.handleInput} isrequired={false}/>
                  
                  </FormGroup>
                </Col>
                </Row>
              
              <Row className="div-margin">
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                  <Input inputtype={"text"} title="order-service.cpsResellerId" name={"cpsResellerId"} value={this.state.nginSan.cpsResellerId || ''}
                      placeholder={"Enter CPS Reseller ID"} onChange={this.handleInput} isrequired={false}/>
                  
                  </FormGroup>
                </Col>
                
              
                <Col xs="12" sm="12" md="4">
                    <FormGroup>
                      <Input inputtype={"text"} title="order-service.cpsSanEncoded" name={"cpsSanEncoded"} value={this.state.nginSan.cpsSanEncoded || ''}
                        placeholder={"Enter CPS SAN encoded in modulo80"} onChange={this.handleInput} />
                    </FormGroup>
                </Col>
                
              <Col xs="12" sm="12" md="4">              
                <label className="form-label">Choose Routing Type</label>
              </Col>
              </Row> 
              
              <Row className="div-margin">    
               <Col xs="12" sm="12" md="4">
                <FormGroup>
                <label className="form-label">Ring On Number</label>
                <input type="radio" value="option1" name="id" className="option-input radio" />
                
                </FormGroup>
              </Col>
              <Col xs="12" sm="12" md="4">
                <FormGroup>
                <label className="form-label">Announcement to play</label>
                <input type="radio" value="option2" name="id" className="option-input radio" />
                
                </FormGroup>
              </Col>
  
              <Col xs="12" sm="12" md="4">
                <FormGroup>
                <label className="form-label">Complex Routing</label>
                <input type="radio" value="option2" name="id" className="option-input radio" />
                
                </FormGroup>
              </Col>  
              </Row> 
              
              <Row className="div-margin">      
              <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <CheckBox title="order-service.enablePriceAnnouncment" name={"enablePriceAnnouncment"} options={this.state.enablePriceAnnouncment}
                      checked={this.state.nginSan.enablePriceAnnouncment} selectedOptions={this.state.nginSan.enablePriceAnnouncment} handleChange={this.handleCheckBox} />
                  </FormGroup>
                </Col>                        
              </Row>           
              <Row >
                <Col>
                <Button click={this.handleCancel} type={"secondary"} align={'right'} title={"common.cancel"} />
                <Button action={this.handleClearForm} type={"secondary"} align={'right'} submit={true} title={"common.ok"} />       
              
                </Col>
              </Row>
            </Form>
          </Container>
        </div>
      );
    }
  }
  const spanStyle = {
    color: 'red'
  }
  
  