text: import React, { Component } from 'react';
  import Button from '../../../../Base/FormControl/Button';
  import { Col, Row, Container, Form, FormGroup } from 'reactstrap';
  import Input from '../../../../Base/FormControl/FormControlCol3/Input';
  import Select from '../../../../Base/FormControl/FormControlCol3/Select';
  import TextArea from "../../../../Base/FormControl/FormControlCol3/TextArea";
  import CheckBox from '../../../../Base/FormControl/CheckBox';
  import { Translation } from 'react-i18next';
  import * as Constant from '../../../../Base/Constant';
  import '../../../Service/Dsl/Dsl.scss';
  
  
  export default class EditColtTotalSarBasedSingleMultilink extends Component {
    constructor(props) {
      super(props);
      this.state = {
          dslAdslService: {
          serviceIdentification: '',
          serviceType: 'DSL',
          serviceSubType: 'LANLink Olo',
          productType:"COLT Total - SAR Based - Single & Multilink",
          interfaceSpeed: '10 GBPS',
          remark: '',
          country: '',
          email: '',
          phoneContact: '',
          vpnTechnology: '',
          serviceNameInNevion: '',
          proactiveMonitoring:true,
          performanceReporting:false,
          smartMonitoring:true,
          notificationManagementTeam:"",
          singleEndPointCpe:true,
          managementOrder: '',
          selectManagementOrder: '',
          intermediateTechnology: '',
          deliveryChannel: '',
          circuitReference: '',
          circuitType: '',
          default: '',
          compositeCircuit: '',
          extendedCircuit: '',
          ipGuardian:true,
          routerConfigurationView:false,
          enni: false,
          erxName:'',
          venderModel:"",
          managementAddress:"",
          snmpro:"",
          deviceName:"",
          wanInterfaceName:"",
          framedIpSubnetMask:"255.255.255.255",
          staticNat:false,
          dynamicNat:true,
          lanSubnetMask:"",
          framedIpAddress:"",
          lanNetworkAddressRange:"",
          bundle:'',
          dslProvider:''
        },
        billingTypeList: [
          { "name": "Flate Rate", "code": "Flate Rate" },
          { "name": "UBB Per GigaBite", "code": "UBB Per GigaBite" },
          { "name": "UBB -95th Percentile", "code": "UBB -95th Percentile" }],
        serviceTypes: [      
          { "name": "DSL", "code": "2" }
        ],
        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" }
      ],
      bundleList: [
        { "name": "IPV19890", "code": "IPV19890" }
     ],
     dslProviderList:[
      {"name":"-Select-","code":"--"},
      {"name":"Colt DSL","code":"Colt DSL"},
      {"name":"Wholesale DSL","code":"Wholesale DSL"}
  ],
    erxList: [
          { "name": "ERX", "code": "1" }
    ],
    wanInterfaceNameList: [
      { "name": "--", "code": "0" },
      { "name": "Dialer0", "code": "Dialer0" },
      { "name": "Virtual-Template0", "code": "Virtual-Template0" },
      { "name": "Virtual-Template100", "code": "Virtual-Template100" },
      { "name": "Atm0", "code": "Atm0" },
      { "name": "Atm0.1", "code": "Atm0.1" },
      { "name": "Atm0/0.1", "code": "Atm0/0.1" },
      { "name": "Serial 0/0/0", "code": "Serial 0/0/0" },
      { "name": "Serial 0/0", "code": "Serial 0/0" }
  ],
  vendormodelList:[
      { "name": "Cisco 2611", "code": "Cisco 2611" },
      { "name": "Cisco 2811", "code": "Cisco 2811" },
      { "name": "Cisco 877M", "code": "Cisco 877M" },
      { "name": "Cisco 881", "code": "Cisco 881" },
      { "name": "Cisco 888", "code": "Cisco 888" },
      { "name": "Cisco ASR1002", "code": "Cisco ASR1002" },
      { "name": "Cisco Unknown", "code": "Cisco Unknown" },
      { "name": "Huawei 183x", "code": "Huawei 183x" },
      { "name": "Huawei AR2809", "code": "Huawei AR2809" },
      { "name": "Huawei AR4640", "code": "Huawei AR4640" }
  ],
  lanSpeedlList:[
      {"name":"Auto","code":"Auto"},
      {"name":"10 Mbps","code":"10Mbps"},
      {"name":"100 Mbps","code":"100Mbps"},
      {"name":"1 Gbps","code":"1gbps"},
      {"name":"10 Gbps","code":"10gbps"},
  ],
  lanDuplexlList:[
      {"name":"Auto","code":"Auto"},
      {"name":"Half","code":"Half"},
      {"name":"Full","code":"Full"}
  ],
  lineModelList:[
      {"name":"-Select-","code":"--"},                
      {"name":"2-wire","code":"2-wire"},
      {"name":"4-wire","code":"4-wire"}
  ],
  atmPcrList: [
    { "name": "--", "code": "0" }
  ],
  atmScrList: [
    { "name": "--", "code": "0" }
  ],
  atmMbsList: [
    { "name": "1", "code": "1" }
  ],
  atmCatList: [
    { "name": "2", "code": "2" }
  ],
  uniQosProfileNameList:[
    { "name": "AOK-BAV-L2TP-QOS", "code": "AOK-BAV-L2TP-QOS"},
    { "name": "AOK-BAV-L2TP-QOS-1M", "code": "AOK-BAV-L2TP-QOS-1M"},
    { "name": "AOK-BAV-L2TP-QOS-1M-BU", "code": "AOK-BAV-L2TP-QOS-1M-BU"},
  ],
  qoSParametersList:[
    { "name": "access-rate", "code": "access-rate" },
    { "name": "business-weight", "code": "business-weight" },
    { "name": "max-voice-bw-dn", "code": "max-voice-bw-dn" },
    { "name": "business2-weight", "code": "business2-weight" },
    { "name": "business3-weight", "code": "business3-weight" }                
  ],
  unisphereIGMPenableList:[
    { "name": "Yes", "code": "Yes" },
    { "name": "No", "code": "No" }
  ],
  unisphereIGMPVersionList:[
    { "name": "0", "code": "0" },
    { "name": "1", "code": "1" },
    { "name": "2", "code": "2" },
    { "name": "3", "code": "3" }
  ],
      selectErxFlag:true,
      }
      this.handleFormSubmit = this.handleFormSubmit.bind(this);
      this.handleInput = this.handleInput.bind(this);
      this.handleCheckBox = this.handleCheckBox.bind(this);
      this.backToCreateService = this.backToCreateService.bind(this);
      this.toggleErxDetails = this.toggleErxDetails.bind(this);
    }
    toggleErxDetails(){
      this.setState({ selectErxFlag: !this.state.selectErxFlag}); 
    }
    backToCreateService() {
      this.props.history.push(Constant.CREATE_SERVICE_URL);
    }
    handleCheckBox(e) {
      const value = e.target.checked;
      const name = e.target.name;
      this.setState({
        [name]: value
      });
    }
  
    handleInput(e) {
      let value = e.target.value;
      let name = e.target.name;
      this.setState(prevState => ({
        dslAdslService: { ...prevState.dslAdslService, [name]: value }
      }), () => console.log(this.state.dslAdslService))
    }
  
    handleFormSubmit(e) {
      e.preventDefault();
      this.props.history.push({ pathname: Constant.VIEW_COLT_TOTAL_SARBASED_SINGLE_MULTILINK_URL, service: { serviceType: this.state.serviceTypeId } })
    }
  
    render() {
      return (
        <>
          <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('common.createOrderService')}</>}</Translation>
                </Col>
              </Row>
              <Row className="div-margin">             
                <Col xs="12" sm="12" md="4">
                      <FormGroup>
                        <Input inputtype={"text"} title="order.mdfService.serviceIdentification" name={"serviceIdentification"} value={this.state.dslAdslService.serviceIdentification}
                          placeholder={"Enter Service Identification"} onChange={this.handleInput} />
                      </FormGroup>
                  </Col>
                  <Col xs="12" sm="12" md="4">
                    <FormGroup>
                    <label htmlFor="name" className="form-label">
                              Service Type
                      </label>                     
                        <div>{this.state.dslAdslService.serviceType}</div>
                   
                    </FormGroup>
                </Col>
                <Col  xs="12" sm="12" md="4">
                  <FormGroup>
                      <label htmlFor="name" className="form-label">
                              Product Type
                      </label>                     
                        <div>{this.state.dslAdslService.productType}</div>
                  </FormGroup>
                </Col> 
              </Row>
              <Row className="div-margin">
                <Col xs='12' sm='12' md='4'>
                  <Select title={"order-service.belongstoBundle"} name={"bundle"} multiple={false} options={this.state.bundleList}
                    value={this.state.dslAdslService.bundleList} handleChange={this.handleInput} />
                </Col>
                <Col xs='12' sm='12' md='4'>
                          <Select  title={"order-service.dslProvider"} name={"dslProvider"}
                              multiple={false} options={this.state.dslProviderList}
                              value={this.state.dslAdslService.dslProviderList}
                              handleChange={this.handleInput} isrequired={false}/>
                  </Col>  
                <Col xs="12" sm="12" md="4">
                      <FormGroup>
                        <Input inputtype={"text"} title="order-service.email" name={"email"} value={this.state.dslAdslService.email}
                          placeholder={"Enter Email"} onChange={this.handleInput} />
                      </FormGroup>
                </Col>
                <Col xs="12" sm="12" md="4">
                    <FormGroup>
                      <Input inputtype={"text"} title="order-service.phoneContact" name={"phoneContact"} value={this.state.dslAdslService.phoneContact}
                        placeholder={"Enter Phone Contact"} onChange={this.handleInput} />
                    </FormGroup>
                </Col>
                <Col xs="12" sm="12" md="4">
                      <FormGroup>
                          <TextArea
                            title="order-service.remark"
                            name={"remark"}
                            rows="1"
                            cols="10"
                            value={this.state.dslAdslService.remark}
                            handleChange={this.handleInput}
                          />
                      </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>
                        <CheckBox
                            title={"order-service.performanceReporting"}
                            name={"performanceReporting"}
                            options={this.state.dslAdslService.performanceReporting}
                            selectedOptions={this.state.dslAdslService.performanceReporting}
                            handleChange={this.handleCheckBox}
                            defaultChecked={this.state.dslAdslService.performanceReporting}
                        />
                      </FormGroup>
                  </Col>
                  <Col xs="12" sm="12" md="4">
                      <FormGroup>
                          <CheckBox
                              title={"order-service.ipGuardian"}
                              name={"ipGuardian"}
                              options={this.state.dslAdslService.ipGuardian}
                              selectedOptions={this.state.dslAdslService.ipGuardian}
                              handleChange={this.handleCheckBox}
                              defaultChecked={this.state.dslAdslService.ipGuardian}
                          />
                      </FormGroup>
                  </Col>
                  <Col xs="12" sm="12" md="4">
                      <FormGroup >
                          <CheckBox
                              style={checkboxStyle}
                              title={"order-service.routerConfigurationView"}
                              name={"routerConfigurationView"}
                              options={this.state.dslAdslService.routerConfigurationView}
                              selectedOptions={this.state.dslAdslService.routerConfigurationView}
                              handleChange={this.handleCheckBox}
                              defaultChecked={this.state.dslAdslService.routerConfigurationView}
                          />
                      </FormGroup>
                  </Col>
              </Row>
              <Row className="heading-green-row div-margin">
                <Col className="heading-green" xs="12" sm="12" md="12">
                Configuration options
                </Col>
              </Row>
             <Row className="div-margin">
                  <Col xs="12" sm="12" md="4">
                    <FormGroup>
                        <CheckBox
                            title={"order-service.qos"}
                            name={"performanceReporting"}
                            options={this.state.dslAdslService.performanceReporting}
                            selectedOptions={this.state.dslAdslService.performanceReporting}
                            handleChange={this.handleCheckBox}
                            defaultChecked={this.state.dslAdslService.performanceReporting}
                        />
                      </FormGroup>
                  </Col>
                  <Col xs="12" sm="12" md="4">
                      <FormGroup>
                          <CheckBox
                              title={"order-service.actelisBased"}
                              name={"ipGuardian"}
                              options={this.state.dslAdslService.ipGuardian}
                              selectedOptions={this.state.dslAdslService.ipGuardian}
                              handleChange={this.handleCheckBox}
                              defaultChecked={this.state.dslAdslService.ipGuardian}
                          />
                      </FormGroup>
                  </Col>               
              </Row>
              <Row>
              <FormGroup style={{ marginLeft: '77%' }}>
                  <Button type={"secondary"} align={'right'} submit={true} title="common.next" />
                </FormGroup>
                <FormGroup>
                  <Button type={"secondary"} align={'right'} submit={true} title="common.cancel" />
                </FormGroup>
              </Row>
            </Form>
          </Container>
        </>
      );
    }
  }
  const checkboxStyle = {
    marginLeft:"-23px"
  };