text: import React, { Component } from "react";
  import Button from "../../../../../Base/FormControl/Button";
  import { Translation } from "react-i18next";
  import { Col, Row, Container, FormGroup, Form, Input } from "reactstrap";
  import DeviceTemplate from "../../../../../ManageColtNetwork/Device/DeviceTemplate";
  import AgGrid from "../../../../../Base/FormControl/AgGrid";
  import { DropdownButton, Dropdown } from "react-bootstrap";
  class RadioCellRenderer extends React.Component {
    render() {
      return <Input className="option-input checkbox" type="checkbox" name="id" />;
    }
  }
  const columnDefs = [
    {
      headerName: "",
      field: "f0",
      width: 80,
      cellRendererFramework: RadioCellRenderer
    },
    { headerName: "Interface", field: "f1" },
    { headerName: "Link /Circuit ID", field: "f2" },
    { headerName: "Interface Address Range", field: "f3" },
    { headerName: "Bearer Type", field: "f4" },
    { headerName: "Bandwidth", field: "f5" },
    { headerName: "VLAN Id", field: "f6" },
    { headerName: "VI Management", field: "f7" }
  ];
  
  const interfacesInServiceList = [
    {
      f1: "Interface 1",
      f2: "Link/Circuit Id 1",
      f3: "Interface Address Router 1",
      f4: "Interface Address",
      f5: "Bearer Type",
      f6: "",
      f7: "No"
    },
    {
      f1: "Interface 1",
      f2: "Link/Circuit Id 1",
      f3: "Interface Address Router 1",
      f4: "Interface Address",
      f5: "Bearer Type",
      f6: "",
      f7: "No"
    },
    {
      f1: "Interface 1",
      f2: "Link/Circuit Id 1",
      f3: "Interface Address Router 1",
      f4: "Interface Address",
      f5: "Bearer Type",
      f6: "",
      f7: "No"
    },
    {
      f1: "Interface 1",
      f2: "Link/Circuit Id 1",
      f3: "Interface Address Router 1",
      f4: "Interface Address",
      f5: "Bearer Type",
      f6: "",
      f7: "No"
    },
    {
      f1: "Interface 1",
      f2: "Link/Circuit Id 1",
      f3: "Interface Address Router 1",
      f4: "Interface Address",
      f5: "Bearer Type",
      f6: "",
      f7: "No"
    },
    {
      f1: "Interface 1",
      f2: "Link/Circuit Id 1",
      f3: "Interface Address Router 1",
      f4: "Interface Address",
      f5: "Bearer Type",
      f6: "",
      f7: "No"
    },
    {
      f1: "Interface 1",
      f2: "Link/Circuit Id 1",
      f3: "Interface Address Router 1",
      f4: "Interface Address",
      f5: "Bearer Type",
      f6: "",
      f7: "No"
    }
  ];
  
  export default class IPAccessCMSDataViewSelectInterfacePE extends Component {
    constructor(props) {
      super(props);
      this.state = {
        backLinkUrl:
          props.location.aboutProps !== undefined
            ? props.location.aboutProps.backLinkUrl
            : "#",
        serviceTypeId:
          props.location.aboutProps !== undefined
            ? props.location.aboutProps.serviceTypeId
            : "0",
        routerform: {
          hostorip4: "",
          hostorip6: ""
        },
        // interfacesInServiceList: [],
        interfacesToSelectList: []
      };
    }
  
    handleFormSubmit = e => {
      e.preventDefault();
      this.props.history.push("/order-service/masSwitch/interface");
    };
    handleCancel = e => {
      e.preventDefault();
      if (this.state.backLinkUrl !== "#")
        this.props.history.push({
          pathname: this.state.backLinkUrl,
          service: { serviceType: this.state.serviceTypeId }
        });
      else this.props.history.push("/viewCustomer");
    };
  
    render() {
      return (
        <>
          <Container className="div-border div-margin">
            <DeviceTemplate data={this.state.data} />
            <Row className="div-margin heading-green" style={{marginRight:"-13px"}}>
            <Col xs="12" sm="12" md="8">
            <Translation>{t => <>{t('order.device.interfaceInService')}</>}</Translation>
            </Col>
            <Col xs="12" sm="12" md="4" align="right">
              <FormGroup>
                    <DropdownButton id="dropdown-basic-button" title="Action" variant="info" style={{ marginLeft: "-1px",marginTop:"-1px" }}>
                    <Dropdown.Item  onClick={this.handleClearForm}>Remove</Dropdown.Item>
                    </DropdownButton>
               </FormGroup>
            </Col>
          </Row> 
            <br />
            <Row className="div-margin" style={{ marginTop: "-16px" }}>
              <Col xs="12" sm="12" md="12">
                <FormGroup>
                  <AgGrid
                    enableSorting={true}
                    pagination={true}
                    paginationPageSize="5"
                    columnDefs={columnDefs}
                    rowData={interfacesInServiceList}
                    enableGlobalSearch={false}
                  />
                </FormGroup>
              </Col>
            </Row>
            {/* <Row>
              <Col>
                <Button
                  action={this.handleClearForm}
                  type={"secondary"}
                  align={"right"}
                  submit={true}
                  title={"Remove"}
                />
              </Col>
            </Row> */}
            {/* <Row className="div-margin">
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <label htmlFor="name" className="form-label">{<Translation>{(t) => <>{t('interface.nameandaddress')}</>}</Translation>}</label>
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <Input inputtype={"text"} title={""} name={"hostorip4"} value={this.state.routerform.hostorip4 || ''}
                                      placeholder={"Host Name or IP"} onChange={this.handleInput} required={false} addlabel={false} />
                              </FormGroup>
                          </Col>
                          <Col xs="12" sm="12" md="3">
                              <FormGroup>
                                  <Button className="rowButton" action={this.handleClearForm} type={"secondary"} align={'left'} submit={true} title={"Search"} />
                              </FormGroup>
                          </Col>
                      </Row> */}
            {/* <Row className="div-margin">
              <Col className="heading-green" xs="12" sm="12" md="12">
                <Translation>
                  {t => <>{t("order.device.interfaceToSelect")} </>}
                </Translation>
              </Col>
            </Row> */}
             <Row className="div-margin heading-green" style={{marginRight:"-13px"}}>
            <Col xs="12" sm="12" md="8">
            <Translation>{t => <>{t('order.device.interfaceToSelect')}</>}</Translation>
            </Col>
            <Col xs="12" sm="12" md="4" align="right">
              <FormGroup>
                    <DropdownButton id="dropdown-basic-button" title="Action" variant="info" style={{ marginLeft: "-1px",marginTop:"-1px" }}>
                    <Dropdown.Item  onClick={this.handleClearForm}>Add</Dropdown.Item>
                    </DropdownButton>
               </FormGroup>
            </Col>
          </Row> 
            <br />
            <Row className="div-margin" style={{ marginTop: "-16px" }}>
              
              <Col xs="12" sm="12" md="12">
                <FormGroup>
                  <AgGrid
                    enableSorting={true}
                    pagination={true}
                    paginationPageSize="5"
                    columnDefs={columnDefs}
                    rowData={interfacesInServiceList}
                    rowSelection={this.state.rowSelection}
                    enableGlobalSearch={false}
                  />
                </FormGroup>
              </Col>
            </Row>
            <Form method="POST" onSubmit={this.handleFormSubmit}>
            </Form>
          </Container>
              <Row  className="div-margin" >
                <Col xs="4" sm="4" md="11">
                  <Button
                    click={this.handleCancel}
                    type={"secondary"}
                    align={"right"}
                    title={"Cancel"}
                  />
                </Col>
              </Row>
           
        </>
      );
    }
  }
  