text: import React, { Component } from 'react'
  import CustomerTemplate from '../../../../Customer/CustomerTemplate';
  import { Container, Col, Row} from 'reactstrap';
  import { DropdownButton, Dropdown, Alert, Modal, Button, FormGroup} from 'react-bootstrap';
  import { Translation } from 'react-i18next';
  import ModificationHistory from '../../../../Common/ModificationHistory/ModificationHistory';
  import * as Constant from '../../../../Base/Constant';
  import LanLinkSiteOrderList from '../../../../OrderService/LanLinkSiteOrderList/LanLinkSiteOrderList';
  import { Link } from 'react-router-dom';
  import AmnValidatorResult from '../../../../OrderService/AmnValidatorResult/AmnValidatorResult';
  
  export default class ViewLanLinkInternationalService extends Component {
    constructor(props) {
      super(props);
      this.state = {      
        siteOrderData:'',
        viewLanLinkInternationalService: {
          serviceIdentification: 'Test Service',
          serviceType: 'LAN Link', 
          serviceSubType: 'LANLink International',
          interfaceSpeed: '10 GBPS',
          remark: 'Testing',
          email: 'test@test.com',
          phoneContact: '+9100034234', 
          vpnTechnology: 'Point-to-Point',
          serviceNameInNevion: 'Nevion',
          proactiveMonitoring:'No',
          performanceReporting:'Yes',
          smartMonitoring:'No',
          notificationManagementTeam:"None",
          singleEndPointCpe:'None',
          managementOrder: '123113',
          selectManagementOrder: '',
          intermediateTechnology: '',
          deliveryChannel: 'Reseller',
          circuitReference: 'BEFR/122/SPR',
          circuitType: 'Default',
          modularMsp:"No"
        },
        serviceType:'MDF',
        deleteServiceFlag:false,
        deleteSiteOrderFlag:false,
        deleteSiteOrderStatusFlag:false,
        sycnhronizeStatusFlag:false,
        amnValidatorResultFlag:false,
        backToServiceUrl:Constant.VIEW_LANLINK_INTERNATIONAL_SERVICE_URL ,
        addSiteOrderUrl:Constant.LANLINK_INTERNATIONAL_ADD_SITE_ORDER_URL,
        editSiteOrderUrl:Constant.LANLINK_INTERNATIONAL_EDIT_SITE_ORDER_URL,
        viewSiteOrderUrl:Constant.LANLINK_INTERNATIONAL_VIEW_SITE_ORDER_URL,
      }
      this.deleteService = this.deleteService.bind(this);
      this.toggleDelete = this.toggleDelete.bind(this);
      this.toggleDeleteSiteOrder = this.toggleDeleteSiteOrder.bind(this);
      this.synchronizeDevice = this.synchronizeDevice.bind(this);
      this.toggleAmnResultDetails = this.toggleAmnResultDetails.bind(this);
      this.sendGridData=this.sendGridData.bind(this);
      this.showDeleteSiteOrderStatus=this.showDeleteSiteOrderStatus.bind(this);
    }
    toggleAmnResultDetails() {
      this.setState({ amnValidatorResultFlag: !this.state.amnValidatorResultFlag });
    }
    toggleDeleteSiteOrder(){
      this.setState({ deleteSiteOrderFlag: !this.state.deleteSiteOrderFlag}); 
    }
    toggleDelete(){
      this.setState({ deleteServiceFlag: !this.state.deleteServiceFlag}); 
    }
    synchronizeDevice(){
      this.setState({ sycnhronizeStatusFlag: !this.state.sycnhronizeStatusFlag}); 
    }
    deleteService() {
        window.location = "#"+Constant.DELETE_CUSTOMER_URL;
    }
    showDeleteSiteOrderStatus(){
      this.setState({ deleteSiteOrderStatusFlag: !this.state.deleteSiteOrderStatusFlag}); 
    }
    sendGridData(url,data){
      this.props.history.push({ pathname:url, aboutProps: { gridData:data} })
    }
    render() {
      const manageSubnetUrl = Constant.LANLINK_MANAGESUBNET_URL ;
      const showSycnhronizeStatus = {
        display: this.state.sycnhronizeStatusFlag? "inline" : "none"
      };
      const showDeleteSiteOrderStatus = {
        display: this.state.deleteSiteOrderStatusFlag? "inline" : "none"
      };
      const hideDeleteSiteOrderStatus = {
        display: !this.state.deleteSiteOrderStatusFlag? "inline" : "none"
      };
      return (
        <>
          <div style={showDeleteSiteOrderStatus}>
            <Alert style={{ paddingTop: '4px', paddingBottom: '4px' }} variant="success"> Site Order successfully deleted.</Alert>
          </div>
          <div style={hideDeleteSiteOrderStatus}>
          <Alert style={{ paddingTop: '4px', paddingBottom: '4px' }} variant="success"> Service  successfully created.</Alert>
          </div>
          <div style={showSycnhronizeStatus}>
            <Alert style={{ paddingTop: '4px', paddingBottom: '4px' }} variant="success"> Synchronize  successfully created.</Alert>
          </div>
          <Container style={{ paddingTop: '4px', paddingBottom: '4px' }} className="div-border div-margin">
            <CustomerTemplate />        
            <Row className="div-margin1  heading-green" style={{ marginRight: "-14px" }}>
              <Col xs="12" sm="12" md="8"><Translation>{(t) => <>{t('order-service.service')} </>}</Translation>
                <ModificationHistory />
              </Col>
              <Col xs="12" sm="12" md="4" align="right" style={{marginTop:"-2px"}}>
                <DropdownButton id="dropdown-basic-button" title="Action" variant="info" style={{ marginRight: "-16px" }}>
                  <Dropdown.Item href={"#"+Constant.EDIT_LANLINK_INTERNATIONAL_SERVICE_URL}><Translation>{(t) => <>{t('common.edit')} </>}</Translation></Dropdown.Item>
                  <Dropdown.Item onClick={this.toggleDelete}><Translation>{(t) => <>{t('common.delete')} </>}</Translation></Dropdown.Item>
                  <Dropdown.Item onClick={this.synchronizeDevice}><Translation>{(t) => <>{t('common.showNewInfovistaReport')} </>}</Translation></Dropdown.Item>                
                  <Dropdown.Item><Link className="customLink" to={{ pathname: Constant.MANAGE_SERVICE_URL, aboutProps: { name: 'Add Site Order',backToServiceUrl:this.state.backToServiceUrl } }} exact="true"><Translation>{(t) => <>{t('common.manage')} </>}</Translation></Link></Dropdown.Item>
                  <Dropdown.Item><Link className="customLink" to={{ pathname: `${manageSubnetUrl}`, aboutProps: { name: 'Add Site Order',backToServiceUrl:this.state.backToServiceUrl } }} exact="true"><Translation>{(t) => <>{t('common.manageSubnets')} </>}</Translation></Link></Dropdown.Item>
                  <Dropdown.Item onClick={this.toggleAmnResultDetails}><Translation>{(t) => <>{t('order.lanLink.amnValidator')} </>}</Translation></Dropdown.Item>
                  <Dropdown.Item onClick={this.synchronizeDevice}><Translation>{(t) => <>{t('common.dump')} </>}</Translation></Dropdown.Item>
                </DropdownButton>
              </Col>
            </Row>
            <Row className="div-margin">
              <Col style={{ fontSize: '11px' }} xs="12" sm="12" md="12"> <br />
                <Alert variant="danger" style={{ paddingTop: '2px', paddingBottom: '2px' }} dismissible>
                  <Alert.Heading style={{ fontSize: '11px' }}>Errors</Alert.Heading>
                  <li>This service type must contain only one Provider Equipment (PE).</li>
                </Alert>
                <Alert style={{ fontSize: '11px', paddingTop: '2px', paddingBottom: '2px' }} variant="dark" dismissible>
                  <Alert.Heading style={{ fontSize: '11px' }} >Sync Error</Alert.Heading>
                  <li> VistaPortal - user: [BRM.10.5001] JMS: No send permissions for event type "JMS::Queues::vistaportal" in client group "aptdev2.lon.queueClientGroup"</li>
                  <li>New VistaPortal - user: Error while creating file on remote host!</li>
                </Alert>
                <Alert style={{ fontSize: '11px', paddingTop: '2px', paddingBottom: '2px' }} variant="warning" dismissible>
                  <Alert.Heading style={{ fontSize: '11px' }} >Warning</Alert.Heading>
                  <li>Warning 1.</li>
                  <li>Warning 2.</li>
                </Alert>
              </Col>
            </Row>
            <Col style={{ height: "2px" }} className="heading-green" xs="12" sm="12" md="12"></Col>
            <br />
            <Row className="div-margin">
              <Col  xs="12" sm="12" md="4">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.mdfService.serviceIdentification')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkInternationalService.serviceIdentification} 
                  </div>
                </FormGroup>
              </Col>
              <Col  xs="12" sm="12" md="4">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.mdfService.serviceType')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkInternationalService.serviceType} 
                  </div>
                </FormGroup>
              </Col>		
              <Col  xs="12" sm="12" md="4">
                  <FormGroup>
                      <div>
                          <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('common.serviceSubType')}</> }</Translation></label>
                      </div>
                      <div className="customLabelValue form-label">
                          {this.state.viewLanLinkInternationalService.serviceSubType} 
                      </div>
                  </FormGroup>
              </Col> 	                                       
            </Row>
            <Row>
              <Col  xs="12" sm="12" md="4">
                <FormGroup>
                    <div>
                        <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.lanLinkService.interfaceSpeed')}</> }</Translation></label>
                    </div>
                    <div className="customLabelValue form-label">
                        {this.state.viewLanLinkInternationalService.interfaceSpeed} 
                    </div>
                </FormGroup>
              </Col>               
              <Col  xs="12" sm="12" md="4">
                  <FormGroup>
                      <div>
                          <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('common.singleEndPointCpe')}</> }</Translation></label>
                      </div>
                      <div className="customLabelValue form-label">
                          {this.state.viewLanLinkInternationalService.singleEndPointCpe} 
                      </div>
                  </FormGroup>
              </Col>
              <Col xs="12" sm="12" md="4">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.mdfService.email')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkInternationalService.email} 
                  </div>
                </FormGroup>
              </Col>            
            </Row>
            <Row>
              <Col  xs="12" sm="12" md="4">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.mdfService.phoneContact')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkInternationalService.phoneContact} 
                  </div>
                </FormGroup>
              </Col>
               <Col  xs="12" sm="12" md="4">
                  <FormGroup>
                      <div>
                          <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.lanLinkService.modularMsp')}</> }</Translation></label>
                      </div>
                      <div className="customLabelValue form-label">
                          {this.state.viewLanLinkInternationalService.modularMsp} 
                      </div>
                  </FormGroup>
              </Col> 
              <Col  xs="12" sm="12" md="4">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.mdfService.remark')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkInternationalService.remark} 
                  </div>
                </FormGroup>
              </Col>  
            </Row>
            <Row className="heading-green-row div-margin">
              <Col className="heading-green" xs="12" sm="12" md="12">
                <Translation>{t => <>{t('common.managementOptions')}</>}</Translation>
              </Col>
            </Row>
            <Row className="div-margin">
              <Col  xs="12" sm="12" md="4">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.mdfService.performanceReporting')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkInternationalService.performanceReporting} 
                  </div>
                </FormGroup>
              </Col>			
              <Col  xs="12" sm="12" md="4">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.mdfService.proactiveMonitoring')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkInternationalService.proactiveMonitoring} 
                  </div>
                </FormGroup>
              </Col>            
              <Col xs="12" sm="12" md="4">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.ipVpnService.deliveryChannel')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkInternationalService.deliveryChannel} 
                  </div>
                </FormGroup>
              </Col>
            </Row>
            <Row className="heading-green-row div-margin">
              <Col className="heading-green" xs="12" sm="12" md="12">
                <Translation>{t => <>{t('common.configurationOptions')}</>}</Translation>
              </Col>
            </Row>
            <Row className="div-margin">
              <Col  xs="12" sm="12" md="4">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.mdfService.vpnTechnology')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkInternationalService.vpnTechnology} 
                  </div>
                </FormGroup>
              </Col>			            
              <Col  xs="12" sm="12" md="4">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.lanLinkService.circuitType')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkInternationalService.circuitType} 
                  </div>
                </FormGroup>
              </Col>     
              <Col  xs="12" sm="12" md="4">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.lanLinkService.circuitReference')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkInternationalService.circuitReference} 
                  </div>
                </FormGroup>
              </Col>       
            </Row>
            <LanLinkSiteOrderList 
              ivReferenceFlag ={false}
              subServiceType ={Constant.LANLINK_INTERNATIONAL_SERVICE}
              sendGridData ={this.sendGridData}
              showDeleteSiteOrderStatus ={this.showDeleteSiteOrderStatus}
              addSiteOrderData ={this.state.siteOrderData}
            />
            <Modal size="sm"
              aria-labelledby="contained-modal-title-vcenter"
              centered show={this.state.deleteSiteOrderFlag} onHide={this.toggleDeleteSiteOrder}>
              <Modal.Header closeButton>
                  <Modal.Title> <Translation>{(t) => <>{t('order.addSiteOrder.deleteTitle')}</>}</Translation></Modal.Title>
              </Modal.Header>
              <Modal.Body>
                  Are you sure that you want to delete this item?
              </Modal.Body> 
              <Modal.Footer>
              <Button variant="danger" onClick={this.deleteService}><Translation>{(t) => <>{t('common.delete')}</>}</Translation></Button>
              </Modal.Footer>
          </Modal>
          <Modal size="sm"
              aria-labelledby="contained-modal-title-vcenter"
              centered show={this.state.deleteServiceFlag} onHide={this.toggleDelete}>
              <Modal.Header closeButton>
                  <Modal.Title> <Translation>{(t) => <>{t('common.deleteService')}</>}</Translation></Modal.Title>
              </Modal.Header>
              <Modal.Body>
                  Are you sure that you want to delete this item?
              </Modal.Body>
              <Modal.Footer>
              <Button variant="danger" onClick={this.deleteService}><Translation>{(t) => <>{t('common.delete')}</>}</Translation></Button>
              </Modal.Footer>
          </Modal>
          <Modal animation="true" scrollable="true" size="lg"
              aria-labelledby="contained-modal-title-vcenter" centered
              show={this.state.amnValidatorResultFlag}
              onHide={this.toggleAmnResultDetails}>
              <Modal.Header closeButton>
              <Modal.Title><Translation>{(t) => <>{t('order.lanLink.amnValidatorResults')} </>}</Translation></Modal.Title>
              </Modal.Header>
              <Modal.Body>
              <AmnValidatorResult/>
              </Modal.Body>
              <Modal.Footer>
              </Modal.Footer>
          </Modal>
          </Container>
        </>
      )
  
    }
  };
  
  const labelStyle = {
    color: "gray",
    display: "inline-block",
    maxWidth: "100%",
    marginBottom: "5px",
    fontWeight: "500"
  };