text: import React, { Component } from 'react';
  import { Col, Row, FormGroup} from 'reactstrap';
  import { Translation } from 'react-i18next';
  import Input from '../../Base/FormControl/Input';
  import Button from '../../Base/FormControl/Button';
  import Select from '../../Base/FormControl/Select';
  import CitySitePremise from '../../Common/CitySitePremise/CitySitePremise'
  export  class EditDevice extends Component {
      constructor(props) {
          super(props);
          this.state = {
              subTitle:this.props.subTitle,
              addCpeDeviceFlag: this.props.cpeDeviceFlag,
              editDevice: {
                  imsPOP: '',
                  name: '',
                  vender: '',
                  address: '',
                  snmpro: '',    
                  country: '',
                  city: '',
                  site: '',
                  premise: '',
                  cityName: '',
                  cityCode: '',
                  siteName: '',
                  siteCode: '',
                  premiseName: '',
                  premiseCode: ''
              },
              addDeviceFlag: true,
              imsPOPLocations: [
                  { "name": "All", "code": "AL" },
                  { "name": "Colt", "code": "CO" },
                  { "name": "OLO", "code": "OL" }],
              countries: [
                  { "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" }
              ],
              cities: [
                  { "name": "BIR (Birmingham)", "code": "BIR" },
                  { "name": "FRA (Frankfurt)", "code": "FRA" }
              ],
              sites: [
                  { "name": "Site 1", "code": "1" },
                  { "name": "Site 2", "code": "2" },
                  { "name": "Site 3", "code": "3" }
              ],
              premises: [
                  { "name": "Premise I", "code": "1" },
                  { "name": "Premise II", "code": "2" },
                  { "name": "Premise III", "code": "3" }
              ],
          }
          this.handleInput=this.handleInput.bind(this);
      }
  handleInput(e) {
      let value = e.target.value;
      let name = e.target.name;
      this.setState(prevState => ({
          editDevice:
          {
          ...prevState.editDevice, [name]: value
          }
      }), () => console.log(this.state.editDevice))
  }    
      render() {
          const showCpeDevice = {
              display: this.state.addCpeDeviceFlag ? "inline" : "none"
          };
          const hideCpeDevice = {
              display: !this.state.addCpeDeviceFlag ? "inline" : "none"
          };
          return (
                  <>
                      <Row className="heading-green-row">
                          <Col className="heading-green" xs="12" sm="12" md="12">
                              <Translation>
                                  {t => <>{t(this.state.subTitle)}</>}
                              </Translation>
                          </Col>
                       </Row>
                       <div style={hideCpeDevice}>
                          <Row className="div-margin">
                              <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Input inputtype={"text"} title="order.addEthernetPeDevice.name" name={"name"} value={this.state.editDevice.name || ''}
                                          placeholder={"Enter Name"} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Input inputtype={"text"} title="order.addEthernetPeDevice.venderModel" name={"vender"} value={this.state.editDevice.vender || ''}
                                          placeholder={"Enter Vender/Model"} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Input inputtype={"text"} title="order.addEthernetPeDevice.managementAddress" name={"address"} value={this.state.editDevice.address || ''}
                                          placeholder={"Enter Management Address"} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Input inputtype={"text"} title="Connectivity Protocal" name={"name"} value={this.state.editDevice.name || ''}
                                          placeholder={"Enter Connectivity Protocal"} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              
                          </Row>
                          <Row className="div-margin">
                             
                              <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Input inputtype={"text"} title="SNMP Version" name={"vender"} value={this.state.editDevice.vender || ''}
                                          placeholder={"Enter SNMP Version"} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Input inputtype={"text"} title="Snmprw" name={"address"} value={this.state.editDevice.address || ''}
                                          placeholder={"Enter Snmp RW"} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Input inputtype={"text"} title="order.addEthernetPeDevice.snmpro" name={"snmpro"} value={this.state.editDevice.snmpro || ''}
                                          placeholder={"Enter Snmpro"} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              {/* <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Input inputtype={"text"} title="order.addEthernetPeDevice.snmpro" name={"snmpro"} value={this.state.editDevice.snmpro || ''}
                                          placeholder={"Enter Snmpro"} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col> */}
                          </Row>
                          <Row>
                              <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Select title="order.addEthernetPeDevice.country" name={"country"} multiple={false} options={this.state.countries} onChange={this.handleInput}
                                          value={this.state.editDevice.country} placeholder={"Select Country"} handleChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                          </Row>
                      </div>
                      <div style={showCpeDevice}>
                          <Row className="div-margin">
                              <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Input inputtype={"text"} title="order.addEthernetPeDevice.name" name={"name"} value={this.state.editDevice.name || ''}
                                          placeholder={"Enter Name"} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Input inputtype={"text"} title="order.addEthernetPeDevice.venderModel" name={"vender"} value={this.state.editDevice.vender || ''}
                                          placeholder={"Enter Vender/Model"} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                               <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Input inputtype={"text"} title="order.addEthernetPeDevice.snmpro" name={"snmpro"} value={this.state.editDevice.snmpro || ''}
                                          placeholder={"Enter Snmpro"} onChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                              <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Select title="order.addEthernetPeDevice.country" name={"country"} multiple={false} options={this.state.countries} onChange={this.handleInput}
                                          value={this.state.editDevice.country} placeholder={"Select Country"} handleChange={this.handleInput} />
                                  </FormGroup>
                              </Col>
                          </Row>
                          <Row>
                          <Col xs="12" sm="12" md="3">
                                  <FormGroup>
                                      <Input inputtype={"text"} title="order.addEthernetPeDevice.managementAddress" name={"address"} value={this.state.editDevice.address || ''}
                                          placeholder={"Enter Management Address"} onChange={this.handleInput} />
                                  </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <Button  className="generateBtnWidth" type={"secondary"} align={'right'} submit={false} title="order.addEthernetPeDevice.getAddress"/>
                              </FormGroup>
                          </Col>
                          </Row>
                      </div>
                      <CitySitePremise />
              </>
          );
      }
  }
  export default EditDevice