text: import React, { Component } from 'react';
  import { Col, Container, FormGroup, Row } from 'react-bootstrap';
  import Dropdown from 'react-bootstrap/Dropdown';
  import DropdownButton from 'react-bootstrap/DropdownButton';
  import { Translation } from 'react-i18next';
  import * as Constant from '../../Base/Constant';
  import AgGrid from '../../Base/FormControl/AgGrid';
  import Button from '../../Base/FormControl/Button';
  import RadioCellRenderer from '../../Base/FormControl/RadioCellRenderer';
  import CountryList from '../../Common/CountryList';
  import ModificationHistory from '../../Common/ModificationHistory/ModificationHistory';
  import SynchonizeStatus from '../../Common/SynchonizeStatus/SynchonizeStatus';
  
  const interfaceColumnDefs = [{
      headerName: "", field: "f0", width: 35,
      cellRendererFramework: RadioCellRenderer
    },
    { headerName: "Interface", field: "f1" },
    { headerName: "IfIn-dex", field: "f2"},
    { headerName: "IV Monitoring", field: "f3"},
    { headerName: "Interface Address", field: "f4" },
    { headerName: "Interface Type", field: "f5" },
    { headerName: "Link / Circuit Id", field: "f6" },
    { headerName: "Link Monitoring", field: "f7" },
    { headerName: "B End Device", field: "f8" },
    { headerName: " B End Interface", field: "f9"}
    
    ];
    
    const interfaceList = [
      { f1: "Ethernet0/0",f2: "16001", f3: "yes", f4: '255.250.240.1', f5: 'Physical', f6: 'Multilink123', f7: 'no', f8: 'IPAccessResilentcinfg.colt.net',f9: 'cpeIPAccessResilentcinfg' },
      { f1: "Ethernet0/0",f2: "16001", f3: "yes", f4: '255.250.240.1', f5: 'Multilink', f6: 'Multilink123', f7: 'no', f8: 'IPAccessResilentcinfg.colt.net',f9: 'cpeIPAccessResilentcinfg' },
      { f1: "Multilink123",f2: "16001", f3: "yes", f4: '255.250.240.1', f5: 'Multilink', f6: 'Multilink123', f7: 'no', f8: 'IPAccessResilentcinfg.colt.net',f9: 'cpeIPAccessResilentcinfg' },
      { f1: "PEIPAaccessColtTotal",f2: "16001", f3: "yes", f4: '255.250.240.1', f5: 'Multilink', f6: 'Multilink123', f7: 'no', f8: 'IPAccessResilentcinfg.colt.net',f9: 'cpeIPAccessResilentcinfg' },
      { f1: "Test121/0",f2: "16001", f3: "yes", f4: '255.250.240.1', f5: 'Multilink', f6: 'Multilink123', f7: 'no', f8: 'IPAccessResilentcinfg.colt.net',f9: 'cpeIPAccessResilentcinfg' },
      { f1: "Ethernet0/0",f2: "16001", f3: "yes", f4: '255.250.240.1', f5: 'Multilink', f6: 'Multilink123', f7: 'no', f8: 'IPAccessResilentcinfg.colt.net',f9: 'cpeIPAccessResilentcinfg' },
      { f1: "Ethernet0/0",f2: "16001", f3: "yes", f4: '255.250.240.1', f5: 'Multilink', f6: 'Multilink123', f7: 'no', f8: 'IPAccessResilentcinfg.colt.net',f9: 'cpeIPAccessResilentcinfg' }
  
      
    ];
  
  
  
  export default class SearchViewDeviceAccessCoreRouter extends Component {
      constructor(props) {
          super(props);
          this.state = {
              subTitle: this.props.subTitle,
              viewDevice: {
                  imsPOP: '',
                  name: 'v1.colt.net',
                  venderModel: 'Cisco 752',
                  interfaceName: '',
                  managementAddress: '10.91.7.15',
                  snmpro: 'Jqrps',
                  snmprw:'',
                  routerId:'10.1.1.15',
                  country: 'India',
                  iosXr:'No',
                  city: 'Gurgaon',
                  devicetype:'Access Router',
                  fullIqnet:'',
                  snmpVersion:'2c',
                  connectivityProtocol:'Telnet',
                  site: 'U.P.',
                  premise: 'Colt',
                  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 => ({
              viewDevice:
              {
                  ...prevState.viewDevice, [name]: value
              }
          }), () => console.log(this.state.viewDevice))
      }
  
      handleCancel = (e) => {
          e.preventDefault();
          this.props.history.push(Constant.IP_TRANSIT_VIEW_URL);
      }
  
      render() {
          return (
              <>
                  <Container className="div-border div-margin">
                      <Row className="heading-green">
                          <Col xs="12" sm="8" md="8">
                              Device
                          <ModificationHistory />
                          </Col>
                          <Col xs="12" sm="4" md="4" align="right" >
                              <DropdownButton id="dropdown-basic-button" title="Action" variant="info" style={{ marginTop: "-1px" }}>
                                  <Dropdown.Item >Edit</Dropdown.Item>
                                  <Dropdown.Item >Synchonize</Dropdown.Item>
                                  <Dropdown.Item >Fetch Device Interfaces</Dropdown.Item>
                                  <Dropdown.Item >Manage</Dropdown.Item>
                              </DropdownButton>
                          </Col>
                      </Row>
                      <Row className="div-margin">
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <div>
                                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('Name')}</>}</Translation></label>
                                  </div>
                                  <div className="customLabelValue form-label">
                                      {this.state.viewDevice.name}
                                  </div>
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <div>
                                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('Device Type')}</>}</Translation></label>
                                  </div>
                                  <div className="customLabelValue form-label">
                                      {this.state.viewDevice.devicetype}
                                  </div>
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <div>
                                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('Vendor/Model')}</>}</Translation></label>
                                  </div>
                                  <div className="customLabelValue form-label">
                                      {this.state.viewDevice.venderModel}
                                  </div>
                              </FormGroup>
                          </Col>
  
                          <Col xs="12" sm="12" md="3">
                              <SynchonizeStatus />
  
                          </Col>
                      </Row>
                      <Row style={{ marginTop: "-109px" }}>
  
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <div>
                                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('Management Address')}</>}</Translation></label>
                                  </div>
                                  <div className="customLabelValue form-label">
                                      {this.state.viewDevice.managementAddress}
                                  </div>
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <div>
                                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('Full IQNET')}</>}</Translation></label>
                                  </div>
                                  <div className="customLabelValue form-label">
                                      {this.state.viewDevice.fullIqnet}
                                  </div>
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <div>
                                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('Connectivity Protocal')}</>}</Translation></label>
                                  </div>
                                  <div className="customLabelValue form-label">
                                      {this.state.viewDevice.connectivityProtocol}
                                  </div>
                              </FormGroup>
                          </Col>
  
                      </Row>
                      <Row>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <div>
                                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('SNMP Version')}</>}</Translation></label>
                                  </div>
                                  <div className="customLabelValue form-label">
                                      {this.state.viewDevice.snmpVersion}
                                  </div>
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <div>
                                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('Snmpro')}</>}</Translation></label>
                                  </div>
                                  <div className="customLabelValue form-label">
                                      {this.state.viewDevice.snmpro}
                                  </div>
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <div>
                                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('Smprw')}</>}</Translation></label>
                                  </div>
                                  <div className="customLabelValue form-label">
                                      {this.state.viewDevice.snmprw}
                                  </div>
                              </FormGroup>
                          </Col>
                      </Row>
                      <Row>
  
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <div>
                                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('Router Id')}</>}</Translation></label>
                                  </div>
                                  <div className="customLabelValue form-label">
                                      {this.state.viewDevice.routerId}
                                  </div>
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <div>
                                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('Country')}</>}</Translation></label>
                                  </div>
                                  <div className="customLabelValue form-label">
                                      {this.state.viewDevice.country}
                                  </div>
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                      <FormGroup>
                          <div>
                              <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('City')}</>}</Translation></label>
                          </div>
                          <div className="customLabelValue form-label">
                              {this.state.viewDevice.city}
                          </div>
                      </FormGroup>
                      </Col>
                      </Row>
  
                      <Row>
  
                  
                  <Col xs="12" sm="12" md="3">
                      <FormGroup>
                          <div>
                              <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('Site')}</>}</Translation></label>
                          </div>
                          <div className="customLabelValue form-label">
                              {this.state.viewDevice.site}
                          </div>
                      </FormGroup>
                  </Col>
                  <Col xs="12" sm="12" md="3">
                          <FormGroup>
                              <div>
                                  <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('Premise')}</>}</Translation></label>
                              </div>
                              <div className="customLabelValue form-label">
                                  {this.state.viewDevice.premise}
                              </div>
                          </FormGroup>
                      </Col>
                      
                  </Row>
  
                   <Row className="heading-green-row">
                          <Col className="heading-green" xs="12" sm="12" md="12">
                              <Translation>
                                  {t => <>{t('order.addEthernetPeDevice.routerTools')}</>}
                              </Translation>
                          </Col>
                      </Row>
                      <Row className="div-margin">
                          <Col xs="12" sm="12" md="3">
                              <FormGroup className="marginTop3">
                                  <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.addEthernetPeDevice.commandIpv4')}</>}</Translation></label>
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3" >
                              <FormGroup className="marginTop3">
                                  <CountryList />
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup className="marginTopMinus6">
                                  <Button action={this.handleClearForm} type={"secondary"} align={'right'} submit={true} title="common.execute" />
                              </FormGroup>
                          </Col>
                      </Row>
                      <Row className="div-margin">
                          <Col xs="12" sm="12" md="3">
                              <FormGroup className="marginTop3">
                                  <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.addEthernetPeDevice.commandIpv6')}</>}</Translation></label>
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3" >
                              <FormGroup className="marginTop3">
                                  <CountryList />
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup className="marginTopMinus6">
                                  <Button action={this.handleClearForm} type={"secondary"} align={'right'} submit={true} title="common.execute" />
                              </FormGroup>
                          </Col>
                      </Row>
  
  
                      <Row className="heading-green div-margin">
                          <Col xs="12" sm="8" md="8">
                              <Translation>
                                  {t => <>{t('common.interfaces')}</>}
                              </Translation>
                          </Col>
                          <Col xs="12" sm="4" md="4" align="right"  >
                              <DropdownButton id="dropdown-basic-button" title="Action" variant="info" style={{ marginTop: "-1px" }}>
                                  <Dropdown.Item >View</Dropdown.Item>
                                  <Dropdown.Item>Delete</Dropdown.Item>
                              </DropdownButton>
                          </Col>
  
  
                      </Row>
                     
                      <Row className="ag-div-margin">
                          <Col xs="12" sm="12" md="12">
                              <FormGroup>
                                  <AgGrid enableSorting={true} pagination={true} paginationPageSize="5" columnDefs={interfaceColumnDefs}
                                      rowData={interfaceList} rowSelection={this.state.rowSelection} domLayout='autoHeight' />
                              </FormGroup>
                          </Col>                      
                      </Row>
                      
                      
                      <Row>
                          <Col>
                              <Button click={this.handleCancel} type={"secondary"} align={'right'} title="action.back" />
                          </Col>
                      </Row>
                  </Container>
              </>
          );
      }
  }
  const labelStyle = {
      color: "gray",
      display: "inline-block",
      maxWidth: "100%",
      marginBottom: "5px",
      fontWeight: "700"
  };
  