text: import React, { Component } from 'react';
  import {Message,Form,Grid,Checkbox} from 'semantic-ui-react'
  import 'whatwg-fetch'
  //import {withRouter,Redirect, Link,HashRouter, Switch, Route} from 'react-router-dom'
  import {urlPrefix} from '../../utils.js'
  import ConfigurableForm from "./ConfigurableForm.js";
  import HostsPicker from "./HostsPicker.js"
  import update from 'immutability-helper';
  import RawDataModal from '../RawDataModal.js'
  
  export class PentestProperties extends Component {
      state = {};
  
      getAccessPicklist = () => {
        var accessPicklistConfig = {
          label: 'Read Write Access',
          name: 'readWriteAccess',
          type: 'multipleChoice',
          options: this.props.configPostAuth ? this.props.configPostAuth.pentest.properties.accessPicklist.map(user=>{return {key:user, text: user, value: user}}) : []
          // [
          //   {key:"xx", text:"xx", value: "xx"},
          // ]
        };
        return accessPicklistConfig;
      }
  
      componentDidMount() {
          this.setState({dirty: false});
          this.loadState();
      }
  
      componentWillUnmount() {
        // try to save data...
        this.handleSave();
      }
  
  
      loadState = () => {
          let t=this;
  
          fetch(urlPrefix + '/api/v1/pentests/'+t.props.match.params.code, {method: 'get',credentials: 'include'})
          .then(response => {
              return response.json()})
          .then(function(json) {
              if('success' in json && json.success === false) {
                console.log("ERROR: " + JSON.stringify(json, null, 4));
                t.setState({error: json});
                return;
              }
              // Database created. Creating properties entry.
              console.log("got properties: " +JSON.stringify(json,null,4));
              t.setState({properties: json, dirty:false});
          }).catch(function(ex) {
              console.log("ERROR:" + ex);
          });
      }
  
      handleInputChange = (event, data) => {
          const target = event.target;
          var value = target.type === 'checkbox' ? target.checked : data.value;
          if (data.type === 'checkbox') {
            value = data.checked;
          }
          const name = data.name;
  
          // Ugly. change me.
          let newProperties =  JSON.parse(JSON.stringify(this.state.properties));
          newProperties[name]=value;
              //update(this.state.properties, {[name]: {$set: value}});
          this.setState({properties: newProperties, dirty:true});
      }
  
  
      handleSave = () => {
          let t = this;
          console.log("Props update: "+t.props.match.params.code);
          fetch(urlPrefix + '/api/v1/pentests/'+t.props.match.params.code,
                {method: 'put',credentials: 'include', body: JSON.stringify(this.state.properties), headers: {
                     'Accept': 'application/json',
                     'Content-Type': 'application/json'
                }})
          .then(response => {
              return response.json()})
          .then(function(json) {
              if('success' in json && json.success === false) {
                console.log("ERROR: " + JSON.stringify(json, null, 4));
                t.setState({error: json});
                return;
              }
              // Database created. Creating properties entry.
              console.log("updated: " +JSON.stringify(json,null,4));
              t.setState({response: json});
              t.loadState();
          }).catch(function(ex) {
              console.log("ERROR:" + ex);
          });
      }
      // <Form.Input name='name' label='Name' value={this.state.properties.name}  onChange={this.handleInputChange} width={8}/>
      //
      // <Form.TextArea name='description' label='Description' value={this.state.properties.description} onChange={this.handleInputChange}/>
      // <Form.Select name='classification' label='Classification' value={this.state.properties.classification} onChange={this.handleInputChange} options={classifications} placeholder='Choose one' />
      // <Form.Select name='testType' label='Test Type' value={this.state.properties.testType} onChange={this.handleInputChange} options={testTypes} placeholder='Choose one' />
      //
  
      handleHostsChange = (hosts) => {
        this.setState({properties:
          update(this.state.properties,
            {hosts: {$set: hosts}}
          )
        ,dirty:true});
      }
  
      render () {
          // console.log(this.props);
          if('properties' in this.state)
              return (
                  <div>
                  {this.state.error && <Message error floating>{this.state.error.message}</Message>}
  
                  <Grid>
                  <Grid.Row>
                  <Grid.Column width="12">
                    <h2>Properties <RawDataModal json={this.state.properties}/></h2>
                  </Grid.Column>
                  <Grid.Column width="4" textAlign="right">
                    <Form.Button onClick={this.handleSave} active={this.state.dirty} primary={this.state.dirty}>Save</Form.Button>
                  </Grid.Column>
                  </Grid.Row>
                  <Grid.Row>
                  <Grid.Column width="16" textAlign="right">
                    <Checkbox slider label="Retest" name="retest" checked={this.state.properties.retest || false} onChange={this.handleInputChange}/>
                  </Grid.Column>
                  </Grid.Row>
                  </Grid>
  
                  <Grid>
                  <Grid.Row>
                  <Grid.Column width="8">
                  <ConfigurableForm onChange={this.handleInputChange} values={this.state.properties} config={(this.props.configPostAuth && this.props.configPostAuth.pentest && this.props.configPostAuth.pentest.properties) ? this.props.configPostAuth.pentest.properties.inputFields : {inputs: []}}/>
                  </Grid.Column>
                  <Grid.Column width="8">
                  <ConfigurableForm onChange={this.handleInputChange} values={this.state.properties} config={{inputs: [this.getAccessPicklist()]}}/>
                  <HostsPicker inline label='Hosts' value={this.state.properties.hosts}  onChange={this.handleHostsChange}/>
                  </Grid.Column>
                  </Grid.Row>
                  </Grid>
  
                  </div>
              );
          else return (<div>
            {this.state.error && <Message error floating>{this.state.error.message}</Message>}
          </div>);
      }
  }
  