text: import React, { Component } from "react";
  import Button from "../../../../../Base/FormControl/Button";
  import CheckBox from "../../../../../Base/FormControl/CheckBox";
  import Input from "../../../../../Base/FormControl/FormControlCol3/Input";
  import Select from "../../../../../Base/FormControl/FormControlCol3/Select";
  import AgGrid from '../../../../../Base/FormControl/AgGrid';
  import { Link } from 'react-router-dom';
  import { Col, Row, Container, Form, FormGroup,Input as Input1, Badge } from "reactstrap";
  
  class RadioCellRenderer extends React.Component {
      render() {
        return <Input1 className="option-input radio" type="radio" name="id" />;
      }
    }
    const multiLinkcolumnDefs = [
      {
        headerName: "",
        field: "f0",
        width: 35,
        cellRendererFramework: RadioCellRenderer
      },
      { headerName: "Check to add to Multilink", field: "f1"  },
      { headerName: "Interface", field: "f2" },
      { headerName: "Link / Circuit Id", field: "f3"},
      { headerName: "Bearer Type", field: "f4" },
      { headerName: "Bandwidth", field: "f5"},
      { headerName: "VLAN Id", field: "f6" },
      { headerName: "IfInOctets", field: "f7"},
    ];
    	 					
    const multiLinkList = [
      { f1: "ae2.2143", f2: "Interface 1", f3: "Link/Circuit Id 1",f4: "Bearer Type 1",f5: "Bandwidth 1",f6: "34532",f7: "IfInOctets 1" },
      { f1: "ae2.2144", f2: "Interface 1", f3: "Link/Circuit Id 1",f4: "Bearer Type 1",f5: "Bandwidth 1",f6: "34532",f7: "IfInOctets 1" },
      { f1: "ae2.2145", f2: "Interface 1", f3: "Link/Circuit Id 1",f4: "Bearer Type 1",f5: "Bandwidth 1",f6: "34532",f7: "IfInOctets 1" },
      { f1: "ae2.2146", f2: "Interface 1", f3: "Link/Circuit Id 1",f4: "Bearer Type 1",f5: "Bandwidth 1",f6: "34532",f7: "IfInOctets 1" },
      { f1: "ae2.2147", f2: "Interface 1", f3: "Link/Circuit Id 1",f4: "Bearer Type 1",f5: "Bandwidth 1",f6: "34532",f7: "IfInOctets 1" },
      { f1: "ae2.2148", f2: "Interface 1", f3: "Link/Circuit Id 1",f4: "Bearer Type 1",f5: "Bandwidth 1",f6: "34532",f7: "IfInOctets 1" },
      { f1: "ae2.2149", f2: "Interface 1", f3: "Link/Circuit Id 1",f4: "Bearer Type 1",f5: "Bandwidth 1",f6: "34532",f7: "IfInOctets 1" }
    ];
  
  
    export default class SpeedPostPEAddMultiLink extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        formErrors: {
          bearerType: "",
          bandWidth: "",
          encapsulation: "",
          slot: "",
          port: "",
          pic: "",
          configuration: ""
        },
        errors: {
          bearerType: "",
          bandWidth: "",
          encapsulation: "",
          slot: "",
          port: "",
          pic: "",
          configuration: ""
        },
        interface: {
          name: "",
          network: "XFER",
          interfaceAddressRange: "",
          interfaceaddressname: "",
          address: "",
          networkWan: "",
          interfaceAddressRangeIPv6: "",
          addressIPv6: "",
          link: "",
          bearerType: "",
          bandWidth: "",
          encapsulation: "",
          bgp: "",
          cardType: "",
          slot: "9",
          pic: "11",
          port: "8080",
          stm1number: "4",
          bearerNumber: "5",
          configuration: "",
          interfaceName: "t3-9/11/8080:4.5.0",
          clocksource: "",
          accessMedia:'',
          hsrpbgp:''
        },
        hidePortal: "none",
  
        clocksource: [
          { name: "External", code: "External" },
          { name: "Internal", code: "Internal" },
          { name: "Line", code: "Line" }
        ],
  
        networks: [
          { name: "XFER", code: "XFER" },
          { name: "CUST", code: "CUST" }
        ],
        bearerType: [
          { name: "E1", code: "E1" },
          { name: "E3", code: "E3" },
          { name: "10 GEthernet", code: "10GET" },
          { name: "STM-1", code: "ST" },
          { name: "T3", code: "T3" },
          { name: "GEthernet", code: "GET" }
        ],
        bandWidth: [
          { code: "300", name: "300 Bytes" },
          { code: "600", name: "600 Bytes" },
          { code: "1.2", name: " 1.2 Kbps" },
          { code: "1.9", name: " 1.9 Kbps" },        
          { code: "512000000", name: "500 Gbps" }
        ],
        encapsulation: [
          { name: "ppp", code: "ppp" },
          { name: "hdlc", code: "hdlc" },
          { name: "Ethernet", code: "ET" },
          { name: "STM-1", code: "ST" },
          { name: "T3", code: "T3" }
        ],
        cardType: [
          { name: "MX FPC", code: "MXFPC" },
          { name: "E3", code: "E3" },
          { name: "Ethernet", code: "ET" },
          { name: "STM-1", code: "ST" },
          { name: "T3", code: "T3" }
        ],
        framingType: [
          { name: "no-crc4", code: "no-crc4" },
          { name: "crc4", code: "crc4" },
          { name: "g704", code: "g704" },
          { name: "unframed", code: "unframed" }
        ],
        accessMediaList:[
          { name: "EPN", code: "EPN" },
          { name: "VPN", code: "VPN"} 
        ],
        hsrpbgpList:[
          { name: "-Select-", code: "-Select-" },
          { name: "Ethernet", code: "Ethernet" },
          { name: "Ethernet-VLAN", code: "Ethernet-VLAN"},
          { name: "Fast Ethernet", code: "Fast Ethernet" },
          { name: "Gigabit Ethernet", code: "Gigabit Ethernet"},
        ],
        bandwidthList:[
          { name: "-Select-", code: "-Select-" },
          { name: "1.69 kbps", code: "1.69 kbps" },
          { name: "300 bytes", code: "300 bytes"},
          { name: "2.4 kbps", code: "2.4 kbps" },
          { name: "192 kbps", code: "192 kbps"}
        ],
        speedList:[
          { name: "-Select-", code: "-Select-" },
          { name: "Auto", code: "Auto" },
          { name: "100 mbps", code: "100 mbps"},
          { name: "1 gbps", code: "1 gbps" },
          { name: "10 gbps", code: "10 gbps"}
        ],
        ipaddressingTypeList:[
          { name: "-Select-", code: "-Select-" },
          { name: "PA", code: "PA" },
          { name: "PI", code: "PI"}
        ],
        duplexList:[
          { name: "-Select-", code: "-Select-" },
          { name: "Full", code: "Full" },
          { name: "Half", code: "Half"},
          { name: "Auto", code: "Auto"}
        ],  
        interfaceNodeList:[        
            { name: "-Select-", code: "-Select-" },
            { name: "Active", code: "Active" },
            { name: "Standby", code: "Standby"}
        ] ,  
        enableDedicatedPortal: [""],
        isBearerType: true,
        isBandWidth: true,
        isEncapsulation: true,
        isSlot: true,
        isPort: true,
        isPic: true,
        isConfiguration: true
      };
  
      this.handleFormSubmit = this.handleFormSubmit.bind(this);
      this.handleClearForm = this.handleClearForm.bind(this);
      this.handleCheckBox = this.handleCheckBox.bind(this);
      this.handleCheckBoxIV = this.handleCheckBoxIV.bind(this);
      this.handleCheckboxChangeIV = this.handleCheckboxChangeIV.bind(this);
      this.handleInput = this.handleInput.bind(this);
      this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
      this.setBearerType = this.setBearerType.bind(this);
      this.setCommon = this.setCommon.bind(this);
    }
    setGender(event) {
      console.log(event.target.value);
    }
    setCommon(e) {
      debugger;
      let value = e.target.value;
      let name = e.target.name;
      let commonValue = this.state.interfaceName;
      commonValue = commonValue + "." + value;
      this.setState(
        prevState => ({
          interface: {
            ...prevState.interface,
            [name]: value
          }
        }),
        () => console.log(this.state.interface)
      );
      this.setState({ interfaceName: commonValue });
    }
  
    setBearerType(e) {
      let value = e.target.value;
      let name = e.target.name;
  
      this.setState(
        prevState => ({
          interface: {
            ...prevState.interface,
            [name]: value
          }
        }),
        () => console.log(this.state.interface)
      );
  
      debugger;
      if (value === "E1") {
        // alert(value);
        this.setState({ interfaceName: "e1-//::.0" });
      } else if (value === "E3") {
        // alert(value);
        this.setState({ interfaceName: "e3-//::.0" });
      } else if (value === "10GET") {
        // alert(value);
        this.setState({ interfaceName: "xe-//.0" });
      } else if (value === "ST") {
        //  alert(value);
        this.setState({ interfaceName: "so-//:.0" });
      } else if (value === "T3") {
        //  alert(value);
        this.setState({ interfaceName: "t3-//::.0" });
      } else if (value === "GET") {
        //  alert(value);
        this.setState({ interfaceName: "ge-//.0" });
      }
    }
  
    handleInput(e) {
      let value = e.target.value;
      let name = e.target.name;
      this.setState(
        prevState => ({
          interface: {
            ...prevState.interface,
            [name]: value
          }
        }),
        () => console.log(this.state.interface)
      );
  
      if (name === "bearerType") {
        if (value.length < 1) {
          this.setState({ isBearerType: true });
        } else {
          this.setState({ isBearerType: false });
        }
      }
      if (name === "bandWidth") {
        if (value.length < 1) {
          this.setState({ isBandWidth: true });
        } else {
          this.setState({ isBandWidth: false });
        }
      }
      if (name === "encapsulation") {
        if (value.length < 1) {
          this.setState({ isEncapsulation: true });
        } else {
          this.setState({ isEncapsulation: false });
        }
      }
      if (name === "slot") {
        if (value.length < 1) {
          this.setState({ isSlot: true });
        } else {
          this.setState({ isSlot: false });
        }
      }
      if (name === "pic") {
        if (value.length < 1) {
          this.setState({ isPic: true });
        } else {
          this.setState({ isPic: false });
        }
      }
      if (name === "port") {
        if (value.length < 1) {
          this.setState({ isPort: true });
        } else {
          this.setState({ isPort: false });
        }
      }
      if (name === "configuration") {
        if (value.length < 1) {
          this.setState({ isConfiguration: true });
        } else {
          this.setState({ isConfiguration: false });
        }
      }
    }
  
    handleCheckBox(e) {
      this.setState({ checked: !this.state.checked });
      if (this.state.hidePortal === "none") this.setState({ hidePortal: "" });
      else this.setState({ hidePortal: "none" });
    }
  
    handleCheckboxChange() {
      this.setState({ checked: !this.state.checked });
    }
    handleCheckBoxIV(e) {
      this.setState({ checkediv: !this.state.checkediv });
      
    }
  
    handleCheckboxChangeIV() {
      this.setState({ checkediv: !this.state.checkediv });
    }
    handleFormSubmit(e) {
      e.preventDefault();
      debugger;
      let userData = this.state.interface;
      console.log(userData);
      if (userData.bearerType.length < 1) {
        this.setState(prevState => ({
          errors: { ...prevState.errors, bearerType: "Bearer Type is required" }
        }));
      } else if (userData.bandWidth.length < 1) {
        this.setState(prevState => ({
          errors: { ...prevState.errors, bandWidth: "Bandwidth is required" }
        }));
      } else if (userData.encapsulation.length < 1) {
        this.setState(prevState => ({
          errors: {
            ...prevState.errors,
            encapsulation: "Encapsulation is required"
          }
        }));
      } else if (userData.slot.length < 1) {
        this.setState(prevState => ({
          errors: { ...prevState.errors, slot: "Slot is required" }
        }));
      } else if (userData.pic.length < 1) {
        this.setState(prevState => ({
          errors: { ...prevState.errors, pic: "Pic is required" }
        }));
      } else if (userData.port.length < 1) {
        this.setState(prevState => ({
          errors: { ...prevState.errors, port: "Port is required" }
        }));
      } else if (userData.configuration.length < 1) {
        this.setState(prevState => ({
          errors: {
            ...prevState.errors,
            configuration: "Configuration is required"
          }
        }));
      } else {
        this.props.history.push("/addinterface-link");
      }
    }
  
    handleClearForm(e) {
      e.preventDefault();
      this.props.history.push("/addinterface-link");
    }
  
    render() {
      const { formErrors } = this.state;
      const errorFlagConfiguration = {
        display: this.state.isConfiguration ? "inline" : "none"
      };
      return (
        <div className="glb-font">       
          <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">
                Add Interface / Link
                </Col>
              </Row>
  
              <Row className="div-margin">
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <CheckBox
                      title="Configure Interface on Device"
                      name={"ConfigureInterface"}
                      options={this.state.enableDedicatedPortal}
                      selectedOptions={this.state.interface.range}
                      handleChange={this.handleCheckBox}
                      checked={this.state.checked}
                    />
                  </FormGroup>
                </Col>             
              </Row>
  
              <Row className="div-margin">  
                  <Col xs="12" sm="12" md="4">
                    <FormGroup>
                      <Input disabled={true} inputtype={"text"}
                        title="Interface"
                        name={"interfaceaddressname"}
                        value={this.state.interface.interfaceaddressname || ""}
                        placeholder={"Enter Interface name"}
                        onChange={this.handleInput}
                      />
                    </FormGroup>
                  </Col>
                  {/* <Col xs="12" sm="12" md="4">
                    <FormGroup>
                    <div>
                                <label className="form-label">
                                  </label>
                              </div>
                              <div className="form-label">
                              (Interface should not be GigabitEthernet, If Access media is VPN)
                              </div>               
                  </FormGroup>
                  </Col> */}
                </Row>
                <fieldset className="form-fieldset">
                  <legend className="form-legend">Network Router Configuration</legend>
                        <Row className="div-margin">	                      
                          <Col xs="12" sm="12" md="4">
                            <FormGroup>
                            <div>
                                <label className="form-label">
                                Network
                                  </label>
                              </div>
                              <div className="form-label">
                              Cust
                              </div> 
                            </FormGroup>
                          </Col>
                          <Col style={{marginTop:'25px'}} xs="12" sm="4" md="4"  className="badge-right">              
                             
                             <Badge variant="success" className="badge-success" >Get Address</Badge>
                         &nbsp;<span>|</span>&nbsp;        
                             <Badge variant="success" className="badge-success"  >EIP Allocation</Badge>                
                          </Col>
                        </Row>
                        <Row className="div-margin">	
                        <Col xs="12" sm="12" md="4">
                            <FormGroup>
                            <Input
                              inputtype={"text"}
                              title="Interface Address Range"
                              name={"link"}
                              value={this.state.interface.interfaceaddressname || ""}
                              placeholder={"Enter Interface Address Range"}
                              onChange={this.handleInput}
                            />
                            </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="4">
                            <FormGroup>
                            <Input
                              inputtype={"text"}
                              title="Address"
                              name={"link"}
                              value={this.state.interface.interfaceaddressname || ""}
                              placeholder={"Enter Address"}
                              onChange={this.handleInput}
                            />
                            </FormGroup>
                          </Col>                      
                          </Row>
               </fieldset>
               
              <Row className="div-margin">            
              <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <Input
                      inputtype={"text"}
                      title="Group Number"
                      name={"link"}
                      value={this.state.interface.interfaceaddressname || ""}
                      placeholder={"Group Number"}
                      onChange={this.handleInput}
                    />
                  </FormGroup>
                </Col>
                <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <Input
                      inputtype={"text"}
                      title="Link"
                      name={"link"}
                      value={this.state.interface.interfaceaddressname || ""}
                      placeholder={"Enter Link"}
                      onChange={this.handleInput}
                    />
                  </FormGroup>
                </Col>
                <Col xs="12" sm="12" md="4">
                            <FormGroup>
                              <Select
                                title="Bandwidth"
                                name={"hsrpbgp"}
                                multiple={false}
                                options={this.state.bandwidthList}
                                value={this.state.interface.bandWidth}
                                handleChange={this.handleInput}
                              />
                            </FormGroup>
                          </Col>                     
              </Row>
              <Row className="div-margin">
                  
              <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <Input
                      inputtype={"text"}
                      title="VLAN ID"
                      name={"link"}
                      value={this.state.interface.interfaceaddressname || ""}
                      placeholder={"Enter VLAN ID"}
                      onChange={this.handleInput}
                    />
                </FormGroup>
              </Col>    
              <Col xs="12" sm="12" md="4">
                            <FormGroup>
                              <Select
                                title="Speed"
                                name={"hsrpbgp"}
                                multiple={false}
                                options={this.state.speedList}
                                value={this.state.interface.bandWidth}
                                handleChange={this.handleInput}
                              />
                            </FormGroup>
                          </Col>   
                          <Col xs="12" sm="12" md="4">
                            <FormGroup>
                              <Select
                                title="IP Addressing Type"
                                name={"hsrpbgp"}
                                multiple={false}
                                options={this.state.ipaddressingTypeList}
                                value={this.state.interface.bandWidth}
                                handleChange={this.handleInput}
                              />
                            </FormGroup>
                          </Col>        
                          </Row>  
                        
                  <Row className="div-margin">    
  
                          <Col xs="12" sm="12" md="4">
                            <FormGroup>
                              <Select
                                title="Duplex"
                                name={"hsrpbgp"}
                                multiple={false}
                                options={this.state.duplexList}
                                value={this.state.interface.bandWidth}
                                handleChange={this.handleInput}
                              />
                            </FormGroup>
                          </Col>   
                          <Col xs="12" sm="12" md="4">
                          <FormGroup>
                            <CheckBox
                              title="Access Leaf"
                              name={"ivmanagement"}
                              options={this.state.enableDedicatedPortal}
                              selectedOptions={this.state.interface.range}
                              handleChange={this.handleCheckBoxIV}
                            />
                          </FormGroup>
                        </Col>  
                        <Col xs="12" sm="12" md="4">
                  <FormGroup>
                    <CheckBox
                      title="IV management"
                      name={"ivmanagement"}
                      options={this.state.enableDedicatedPortal}
                      selectedOptions={this.state.interface.range}
                      handleChange={this.handleCheckBoxIV}
                    />
                  </FormGroup>
                </Col> 
                </Row>
              <Row className="div-margin">  
                          <Col xs="12" sm="12" md="4">
                            <FormGroup>                         
                            <div>
                                <label className="form-label">
                                Secondary IPs 
                                  </label>
                              </div>
                              <div className="form-label">
                              <a className="customLink heading-green-1" href="#/">Add</a>
                              </div> 
                            </FormGroup>
                          </Col>
             </Row>
   
             <Row className="div-margin">              
               <Col xs="12" sm="12" md="4">
                 <FormGroup>
                   <Input
                     inputtype={"text"}
                     title="Secondary IP"
                     name={"link"}
                     value={this.state.interface.interfaceaddressname || ""}
                     placeholder={"Enter Secondary IP"}
                     onChange={this.handleInput}
                   />
               </FormGroup>
             </Col>    
             <Col xs="12" sm="12" md="4">
                 <FormGroup>
                   <Input
                     inputtype={"text"}
                     title="Netmask"
                     name={"link"}
                     value={this.state.interface.interfaceaddressname || ""}
                     placeholder={"Enter Netmask"}
                     onChange={this.handleInput}
                   />
               </FormGroup>
             </Col>     
             <Col xs="12" sm="12" md="4">
                 <FormGroup>
                   <Input
                     inputtype={"text"}
                     title="Group Number"
                     name={"link"}
                     value={this.state.interface.interfaceaddressname || ""}
                     placeholder={"Enter Group Number"}
                     onChange={this.handleInput}
                   />
               </FormGroup>
             </Col>
             </Row>
  
             <Row className="div-margin"> 
               
               <Col xs="12" sm="12" md="4">
                 <FormGroup>
                   <Input
                     inputtype={"text"}
                     title="VRRP IP"
                     name={"link"}
                     value={this.state.interface.interfaceaddressname || ""}
                     placeholder={"Enter VRRP IP"}
                     onChange={this.handleInput}
                   />
               </FormGroup>
             </Col>    
             <Col xs="12" sm="12" md="4">
                            <FormGroup>
                              <Select
                                title="IP Addressing Type"
                                name={"hsrpbgp"}
                                multiple={false}
                                options={this.state.ipaddressingTypeList}
                                value={this.state.interface.bandWidth}
                                handleChange={this.handleInput}
                              />
                            </FormGroup>
                          </Col>          
                          <Col xs="12" sm="12" md="4">
                            <FormGroup>                         
                            <div>
                                <label className="form-label">                           
                                  </label>
                              </div>
                              <div className="form-label">
                              <a className="customLink heading-green-1" href="#/">Delete</a>
                              </div> 
                            </FormGroup>
                          </Col>  
             </Row>
             <Row className="div-margin" style={{ marginRight: "-13px" }}>
              <Col xs="12" sm="12" md="12">
              Multilinked Bearers
              </Col>
            </Row>
            <Row className="ag-div-margin">
              <Col xs="12" sm="12" md="8">
                <FormGroup>               
                  <AgGrid enableSorting={true} pagination={true} paginationPageSize="5" columnDefs={multiLinkcolumnDefs} rowData={multiLinkList}
                    rowSelection={this.state.rowSelection} domLayout='autoHeight' />
                </FormGroup>
              </Col>
              <Col xs="12" sm="12" md="4" >
  
              </Col>
            </Row>
              {/* <EthernetCheckOnOff/> */}
              <Row>
                <Col Col xs="12" sm="4" md="8" />
                <Col Col xs="12" sm="4" md="2">
                  <Button
                    type={"secondary"}
                    align={"right"}
                    submit={false}
                    title={"OK"}
                    className="execSaveBtnStyle"
                  />
                </Col>
                <Col Col xs="12" sm="4" md="1">
                  <Button
                    type={"secondary"}
                    align={"left"}
                    submit={false}
                    title={"Cancel"}
                  />
                </Col>
              </Row>
              <br />
              {this.state.checked && (
                <div>
                  <Row className="heading-green-row">
                    <Col className="heading-green" xs="12" sm="12" md="12">
                      Configuration
                    </Col>
                  </Row>
                  <Row>
                    <tr
                      class="labelFont"
                      style={{
                        paddingLeft: "15px",
                        fontSize: "13px",
                        paddingTop: "15px"
                      }}
                    >
                      <td>
                      <Link  className="customLink heading-green-1" to="#" exact="true" >Generate Configuration</Link>
                      <span class="heading-green-1">&nbsp;|&nbsp;</span>
                      </td>
                      <td>
                      <Link  className="customLink heading-green-1" to="#" exact="true" >Save Configuration to File</Link>
                      <span class="heading-green-1" />
                      </td>
                    </tr>
                  </Row>
                  <Row className="div-margin">
                    <Col xs="12" sm="12" md="12">
                      <FormGroup>
                        <Input
                          inputtype={"text"}
                          title="Configuration"
                          name={"configuration"}
                          value={this.state.interface.configuration || ""}
                          placeholder={"Enter Configuration"}
                          handleChange={this.handleInput}
                          isrequired={true}
                        />
  
                        <div style={errorFlagConfiguration}>
                          <span style={spanStyle}>
                            {this.state.errors.configuration}
                          </span>
                          {formErrors.configuration.length > 0 && (
                            <span className="errorMessage">
                              {formErrors.configuration}
                            </span>
                          )}
                        </div>
                      </FormGroup>
                    </Col>
                  </Row>
                  <Row>
                    <Col>
                      <Button
                        type={"secondary"}
                        align={"right"}
                        submit={true}
                        title={"Execute and Save"}
                        className="execSaveBtnStyle"
                      />
                    </Col>
                    <Col>
                      <Button
                        type={"secondary"}
                        align={"right"}
                        submit={true}
                        title={"Cancel"}
                      />
                    </Col>
                  </Row>
                </div>
              )}
            </Form>
          </Container>
        </div>
      );
    }
  }
  const spanStyle = {
    color: "red"
  };
  