text: import React, { Component } from "react";
  import { Translation } from "react-i18next";
  import { Col, Container, FormGroup, Row, Form } from "reactstrap";
  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 RadioButton from "../../Base/FormControl/RadioButton";
  import CitySitePremise from "../../Common/CitySitePremise/CitySitePremise";
  import ErrorMesage from "../../Base/FormControl/ErrorMessage";
  
  /* Below given device types categorization
    formfragment0	Accesss Router	
    formfragment1	Access Switch	
    formfragment1	Core Router
    formfragment1	Prizmnet
    formfragment1	MDF Firewall
    formfragment1	Key Server
    formfragment2	DCN Device
    formfragment2	Firewall
    formfragment2	Load Balancer
    formfragment2	Traffic Aggregator
    formfragment2	Voice Gateway
    formfragment2	VOIPAccess DAS Switch
    formfragment3	DSLAM Device
    formfragment3	Mini DSLAM Device
  
  */
  export class CreatDevice extends CitySitePremise {
    constructor(props) {
      super(props);
      this.state = {
        createDeviceForm: {
          name: "",
          devicetype: "",
          vendermodel: "",
          connectivityProtocol: 'SSH',
          snmpVersion: '3',
          routerId: '',
          snmpro: 'JdhquA5',
          snmprw: '',
          snmpV3UserName: 'colt-nms',
          snmpV3AuthPassword: 'OrHzjWmRvr4piJZb',
          snmpV3PrivPassword: '3k0hw8thNxHucQkE',
          modularMSP: '',
          fullIqnet: '',
          iosXr: '',
          country: "",
          managementAddress: ""
        },
        errors: {
          name: "",
          devicetype: "",
          vendermodel: "",
          snmpro: "",
          routerId: '',
          country: '',
          snmpV3UserName: '',
          snmpV3AuthPassword: '',
          snmpV3PrivPassword: ''
        },
        country: [
          { 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" }
        ],
        devicetype: [
          { name: "Access Router", code: "AccessRouter" },
          { name: "Access Switch", code: "AccessSwitch" },
          { name: "Core Router", code: "CoreRouter" },
          { name: "DCN Device", code: "DCNDevice" },
          { name: "DSLAM Device", code: "DSLAMDevice" },
          { name: "Firewall", code: "Firewall" },
          { name: "Key Server", code: "KeyServer" },
          { name: "Load Balancer", code: "LoadBalancer" },
          { name: "MDF Firewall", code: "MDFFirewall" },
          { name: "Mini DSLAM", code: "MiniDSLAM" },
          { name: "Prizmnet", code: "Prizmnet" },
          { name: "Traffic Aggregator", code: "TrafficAggregator" },
          { name: "Voice Gateway", code: "VoiceGateway" },
          { name: "VOIPAccess DAS Switch", code: "VOIPAccessDASSwitch" }
        ],
        vendermodel: [
          { name: "All", code: "all" },
          { name: "Vender A", code: "userId" },
          { name: "Vender B", code: "name" },
          { name: "Vender C", code: "ocn" },
          { name: "Vender D", code: "email" },
          { name: "Vender E", code: "phone" }
        ],
        connectivityProtocols: [
          { name: "Telnet", code: "TLT" },
          { name: "SSH", code: "SSH" }],
        snmpVersions: [
          { name: "2c", code: "2c" },
          { name: "3", code: "3" }],
        formfragment0: false,
        formfragment1: false,
        formfragment2: true,
        formfragment3: false,
        snmpSectionDisplay: false
      };
      this.formvalid = true;
      this.handleFormSubmit = this.handleFormSubmit.bind(this);
      this.handleClearForm = this.handleClearForm.bind(this);
      this.handleInput = this.handleInput.bind(this);
      this.handleSNMPVersion = this.handleSNMPVersion.bind(this);
      this.validateFieldOnSubmit = this.validateFieldOnSubmit.bind(this);
    }
  
    handleInput(e) {
      let value = e.target.value;
      let name = e.target.name;
      this.setState(prevState => ({ createDeviceForm: { ...prevState.createDeviceForm, [name]: value } }));
      this.validateField(e.target);
    }
  
    validateField = (target) => {
      if (target.required && target.value === '') {
        this.setState(prevState => ({ errors: { ...prevState.errors, [target.name]: 'REQUIRED' } }));
      } else {
        this.setState(prevState => ({ errors: { ...prevState.errors, [target.name]: '' } }));
      }
    }
  
    validateFieldOnSubmit() {
      const inputList = document.querySelectorAll('input[required],select[required]');
      let count = 0;
      inputList.forEach((target) => {
        if (target.required && target.value === '') {
          this.setState(prevState => ({ errors: { ...prevState.errors, [target.name]: 'REQUIRED' } }));
          count++;
        } else {
          this.setState(prevState => ({ errors: { ...prevState.errors, [target.name]: '' } }));
        }
      });
      console.log(count);
      if (count > 0) {
        this.formvalid = false;
      } else {
        this.formvalid = true;
      }
    }
    handleSNMPVersion(e) {
      console.log('handleSNMPVersion :', e.target.value);
      this.handleInput(e);
      if (e.target.value === '2c') {
        this.setState({ snmpSectionDisplay: false });
      } else if (e.target.value === '3') {
        this.setState({ snmpSectionDisplay: true });
      }
    }
  
    onChangeDeviceType = (e) => {
      this.handleInput(e);
      let value = e.target.value;
      if ("AccessRouter" === value) {
        this.setState({ formfragment0: true, formfragment1: false, formfragment2: false, formfragment3: false });
      } else if ("AccessSwitch" === value || "CoreRouter" === value || "Prizmnet" === value || "MDFFirewall" === value || "KeyServer" === value) {
        this.setState({ formfragment0: false, formfragment1: true, formfragment2: false, formfragment3: false });
      } else if ("DCNDevice" === value || "Firewall" === value || "LoadBalancer" === value || "TrafficAggregator" === value || "VoiceGateway" === value || "VOIPAccessDASSwitch" === value) {
        this.setState({ formfragment0: false, formfragment1: false, formfragment2: true, formfragment3: false });
      } else if ("DSLAMDevice" === value || "MiniDSLAM" === value) {
        this.setState({ formfragment0: false, formfragment1: false, formfragment2: false, formfragment3: true });
      }
    };
  
    handleClearForm(e) {
      e.preventDefault();
      this.setState({
        createDeviceForm: {
          name: "",
          devicetype: "",
          vendermodel: "",
          connectivityProtocol: 'SSH',
          snmpVersion: '2c',
          routerId: "",
          snmpro: '',
          snmprw: '',
          snmpV3UserName: '',
          snmpV3AuthPassword: '',
          snmpV3PrivPassword: '',
          modularMSP: '',
          fullIqnet: '',
          iosXr: '',
          country: "",
          managementAddress: ""
        }
      });
    }
  
    handleFormSubmit(e) {
      e.preventDefault();
      this.validateFieldOnSubmit();
      console.log(this.form);
      if (this.formvalid) {
        console.log('form valid');
        this.props.history.push({
          pathname: '/device',
          data: {
            formfragment0: this.state.formfragment0,
            formfragment1: this.state.formfragment1,
            formfragment2: this.state.formfragment2,
            formfragment3: this.state.formfragment3,
            formdata:this.state.createDeviceForm
          } 
        });
      } else {
        console.log('form invalid');
      }
  
  
    }
  
  
    render() {
  
      const snmpV3Section = <Row className="div-margin">
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <Input inputtype={"text"} title={"createdevice.snmpV3UserName"} name={"snmpV3UserName"} value={this.state.createDeviceForm.snmpV3UserName || ""}
              placeholder={"Enter Snmp v3 Username"} handleChange={this.handleInput} isrequired='Y' />
            <ErrorMesage title={"createdevice.snmpV3UserName"} error={this.state.errors.snmpV3UserName} />
          </FormGroup>
        </Col>
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <Input inputtype={"text"} title={"createdevice.snmpV3AuthPassword"} name={"snmpV3AuthPassword"}
              value={this.state.createDeviceForm.snmpV3AuthPassword || ""} placeholder={"Enter Snmp v3 Auth Password"}
              handleChange={this.handleInput} isrequired='Y' />
            <ErrorMesage title={"createdevice.snmpV3AuthPassword"} error={this.state.errors.snmpV3AuthPassword} />
          </FormGroup>
        </Col>
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <Input inputtype={"text"} title={"createdevice.snmpV3PrivPassword"}
              name={"snmpV3PrivPassword"} value={this.state.createDeviceForm.snmpV3PrivPassword || ""}
              placeholder={"Enter Snmp v3 Priv Password"} handleChange={this.handleInput}
              isrequired='Y' />
            <ErrorMesage title={"createdevice.snmpV3PrivPassword"} error={this.state.errors.snmpV3PrivPassword} />
          </FormGroup>
        </Col>
      </Row>;
      const snmpSection = <Row className="div-margin">
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <Input inputtype={"text"} title={"createdevice.snmpro"} name={"snmpro"} value={this.state.createDeviceForm.snmpro || ""}
              placeholder={"Enter Snmpro"} handleChange={this.handleInput} isrequired='Y' />
            <ErrorMesage title={"createdevice.snmpro"} error={this.state.errors.snmpro} />
          </FormGroup>
        </Col>
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <Input inputtype={"text"} title={"createdevice.snmprw"} name={"snmprw"} value={this.state.createDeviceForm.snmprw || ""}
              placeholder={"Enter Snmprw"} handleChange={this.handleInput} isrequired='Y' />
            <ErrorMesage title={"createdevice.snmprw"} error={this.state.errors.snmprw} />
          </FormGroup>
        </Col>
      </Row>;
  
      const formfragment0 = <><Row className="div-margin">
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <RadioButton type={"radio"} name={"protocol"} title="createdevice.protocol" handleChange={this.handleInput}
              options={this.state.connectivityProtocols} value={this.state.createDeviceForm.connectivityProtocol || ''}></RadioButton>
          </FormGroup>
        </Col>
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <RadioButton type={"radio"} name={"snmpVersion"} title="createdevice.snmpVersion" handleChange={this.handleSNMPVersion}
              options={this.state.snmpVersions} value={this.state.createDeviceForm.snmpVersion || ''} ></RadioButton>
          </FormGroup>
        </Col>
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <Input inputtype={"text"} title={"createdevice.routerId"} name={"routerId"} value={this.state.createDeviceForm.routerId || ""}
              placeholder={"Enter Router Id"} handleChange={this.handleInput} isrequired='Y' />
            <ErrorMesage title={"createdevice.routerId"} error={this.state.errors.routerId} />
          </FormGroup>
        </Col>
      </Row>
        {this.state.snmpSectionDisplay ? snmpSection : snmpV3Section}
        <Row className="div-margin">
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <CheckBox title={"createdevice.modularMSP"} name={"modularMSP"} handleChange={this.handleInput} />
            </FormGroup>
          </Col>
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <CheckBox title={"createdevice.fullIqnet"} name={"fullIqnet"} handleChange={this.handleInput} />
            </FormGroup>
          </Col>
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <CheckBox title={"createdevice.iosXr"} name={"iosXr"} handleChange={this.handleInput} />
            </FormGroup>
          </Col>
        </Row>
        <Row className="div-margin">
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <Select title={"createdevice.country"} name={"country"} multiple={false} options={this.state.country}
                value={this.state.createDeviceForm.country} placeholder={"Select country"}
                handleChange={this.handleInput} isrequired='Y' />
              <ErrorMesage title={"createdevice.country"} error={this.state.errors.country} />
            </FormGroup>
          </Col>
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <Input
                inputtype={"text"} title={"createdevice.managementAddress"} name={"managementAddress"}
                value={this.state.createDeviceForm.managementAddress || ""} placeholder={"Enter Management Address"}
                handleChange={this.handleInput} />
            </FormGroup>
          </Col>
        </Row></>;
      const formfragment1 = <><Row className="div-margin">
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <RadioButton type={"radio"} name={"protocol"} title="createdevice.protocol" handleChange={this.handleInput}
              options={this.state.connectivityProtocols} value={this.state.createDeviceForm.connectivityProtocol || ''}></RadioButton>
          </FormGroup>
        </Col>
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <RadioButton type={"radio"} name={"snmpVersion"} title="createdevice.snmpVersion" handleChange={this.handleSNMPVersion}
              options={this.state.snmpVersions} value={this.state.createDeviceForm.snmpVersion || ''} ></RadioButton>
          </FormGroup>
        </Col>
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <Input inputtype={"text"} title={"createdevice.routerId"} name={"routerId"} value={this.state.createDeviceForm.routerId || ""}
              placeholder={"Enter Router Id"} handleChange={this.handleInput} isrequired='Y' />
            <ErrorMesage title={"createdevice.routerId"} error={this.state.errors.routerId} />
          </FormGroup>
        </Col>
      </Row>
        {this.state.snmpSectionDisplay ? snmpSection : snmpV3Section}
        <Row className="div-margin">
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <CheckBox title={"createdevice.modularMSP"} name={"modularMSP"} handleChange={this.handleInput} />
            </FormGroup>
          </Col>
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <CheckBox title={"createdevice.fullIqnet"} name={"fullIqnet"} handleChange={this.handleInput} />
            </FormGroup>
          </Col>
        </Row>
        <Row className="div-margin">
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <Select title={"createdevice.country"} name={"country"} multiple={false} options={this.state.country}
                value={this.state.createDeviceForm.country} placeholder={"Select country"}
                handleChange={this.handleInput} isrequired='Y' />
              <ErrorMesage title={"createdevice.country"} error={this.state.errors.routerId} />
            </FormGroup>
          </Col>
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <Input
                inputtype={"text"} title={"createdevice.managementAddress"} name={"managementAddress"}
                value={this.state.createDeviceForm.managementAddress || ""} placeholder={"Enter Management Address"}
                handleChange={this.handleInput} />
            </FormGroup>
          </Col>
        </Row></>;
      const formfragment2 = <><Row className="div-margin">
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <Input inputtype={"text"} title={"createdevice.snmpro"} name={"snmpro"} value={this.state.createDeviceForm.snmpro || ""}
              placeholder={"Enter Snmpro"} handleChange={this.handleInput} isrequired='Y' />
            <ErrorMesage title="Snmpro" error={this.state.errors.snmpro} />
          </FormGroup>
        </Col>
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <Input inputtype={"text"} title={"createdevice.routerId"} name={"routerId"} value={this.state.createDeviceForm.routerId || ""}
              placeholder={"Enter Router Id"} handleChange={this.handleInput} isrequired='Y' />
            <ErrorMesage title="Router Id" error={this.state.errors.routerId} />
          </FormGroup>
        </Col>
      </Row>
        <Row className="div-margin">
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <CheckBox title={"createdevice.modularMSP"} name={"modularMSP"} handleChange={this.handleInput} />
            </FormGroup>
          </Col>
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <CheckBox title={"createdevice.fullIqnet"} name={"fullIqnet"} handleChange={this.handleInput} />
            </FormGroup>
          </Col>
        </Row>
        <Row className="div-margin">
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <Select title={"createdevice.country"} name={"country"} multiple={false} options={this.state.country}
                value={this.state.createDeviceForm.country} placeholder={"Select country"}
                handleChange={this.handleInput} isrequired='Y' />
              <ErrorMesage title="Country" error={this.state.errors.country} />
            </FormGroup>
          </Col>
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <Input
                inputtype={"text"} title={"createdevice.managementAddress"} name={"managementAddress"}
                value={this.state.createDeviceForm.managementAddress || ""} placeholder={"Enter Management Address"}
                handleChange={this.handleInput} />
            </FormGroup>
          </Col>
        </Row></>;
      const formfragment3 = <><Row className="div-margin">
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <Input inputtype={"text"} title={"createdevice.snmpro"} name={"snmpro"} value={this.state.createDeviceForm.snmpro || ""}
              placeholder={"Enter Snmpro"} handleChange={this.handleInput} isrequired='Y' />
            <ErrorMesage title={"createdevice.snmpro"} error={this.state.errors.snmpro} />
          </FormGroup>
        </Col>
        <Col xs="4" sm="4" md="4">
          <FormGroup>
            <Input inputtype={"text"} title={"createdevice.routerId"} name={"routerId"} value={this.state.createDeviceForm.routerId || ""}
              placeholder={"Enter Router Id"} handleChange={this.handleInput} isrequired='Y' />
            <ErrorMesage title={"createdevice.routerId"} error={this.state.errors.routerId} />
          </FormGroup>
        </Col>
      </Row>
        <Row className="div-margin">
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <CheckBox title={"createdevice.modularMSP"} name={"modularMSP"} handleChange={this.handleInput} />
            </FormGroup>
          </Col>
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <CheckBox title={"createdevice.fullIqnet"} name={"fullIqnet"} handleChange={this.handleInput} />
            </FormGroup>
          </Col>
        </Row>
        <Row className="div-margin">
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <Select title={"createdevice.country"} name={"country"} multiple={false} options={this.state.country}
                value={this.state.createDeviceForm.country} placeholder={"Select country"}
                handleChange={this.handleInput} isrequired='Y' />
              <ErrorMesage title={"createdevice.country"} error={this.state.errors.country} />
            </FormGroup>
          </Col>
          <Col xs="4" sm="4" md="4">
            <FormGroup>
              <Input
                inputtype={"text"} title={"createdevice.managementAddress"} name={"managementAddress"}
                value={this.state.createDeviceForm.managementAddress || ""} placeholder={"Enter Management Address"}
                handleChange={this.handleInput} />
            </FormGroup>
          </Col>
          <Col xs="4" sm="4" md="3">
            <Button className="customButton" type={"secondary"} align={"right"} title={"createdevice.managementAddress"} />
          </Col>
        </Row></>;
      return (
        <>
          <Container className="div-border div-margin">
            <Form method="POST" onSubmit={this.handleFormSubmit} noValidate>
              <Row className="heading-green">
                <Col xs="12" sm="12" md="12">
                  <Translation>{t => <>{t("createdevice.title")}</>}</Translation>
                </Col>
              </Row>
              <Row className="div-margin">
                <Col xs="4" sm="4" md="4">
                  <FormGroup>
                    <Input
                      inputtype={"text"} title={"createdevice.name"} name={"name"} value={this.state.createDeviceForm.name || ""}
                      placeholder={"Enter Device Name"} handleChange={this.handleInput} isrequired='Y' />
                    <ErrorMesage title={"createdevice.name"} error={this.state.errors.name} />
                  </FormGroup>
                </Col>
                <Col xs="4" sm="4" md="4">
                  <FormGroup>
                    <Select title={"createdevice.devicetype"} name={"devicetype"} multiple={false} options={this.state.devicetype}
                      value={this.state.createDeviceForm.devicetype} placeholder={"Select Service Type"}
                      handleChange={this.onChangeDeviceType} isrequired='Y' />
                    <ErrorMesage title={"createdevice.devicetype"} error={this.state.errors.devicetype} />
                  </FormGroup>
                </Col>
                <Col xs="4" sm="4" md="4">
                  <FormGroup>
                    <Select title={"createdevice.vendermodel"} name={"vendermodel"} multiple={false} options={this.state.vendermodel}
                      value={this.state.createDeviceForm.vendermodel} placeholder={"Select Vender Model"}
                      handleChange={this.handleInput} isrequired='Y' />
                    <ErrorMesage title={"createdevice.vendermodel"} error={this.state.errors.vendermodel} />
                  </FormGroup>
                </Col>
              </Row>
              {this.state.formfragment0 ? formfragment0 : ''}
              {this.state.formfragment1 ? formfragment1 : ''}
              {this.state.formfragment2 ? formfragment2 : ''}
              {this.state.formfragment3 ? formfragment3 : ''}
              <CitySitePremise index={"1"} />
              <Row className="div-margin">
                <Col>
                  <Button type={"secondary"} align={"right"} submit={true} title={"common.ok"} />
                  <Button click={this.handleClearForm} type={"secondary"} align={"right"} title={"common.cancel"} />
                </Col>
              </Row>
            </Form>
          </Container>
        </>
      );
    }
  }
  export default CreatDevice;
  