# Source: src/js/DefUtilisateurPanel.js

    /*

    !----------------------------------------------------------------------------!
    !                                                                            !
    ! Yexpert : (your) Système Expert sous Mumps GT.M et GNU/Linux               !
    ! Copyright (C) 2001-2015 by Hamid LOUAKED (HL).                             !
    !                                                                            !
    !----------------------------------------------------------------------------!

    */

    "use strict"

    var React = require('react');
    var ReactBootstrap = require('react-bootstrap');
    var Inspector = require('react-json-inspector');

    var {
      Button,
      Glyphicon,
      OverlayTrigger,
      Panel,
      Tooltip,
      form,
      FormGroup,
      ControlLabel,
      FormControl,
      HelpBlock
    } = ReactBootstrap;

    var DefUtilisateurPanel = React.createClass({

      componentWillMount: function() {

        this.controller = require('./controller-DefUtilisateurPanel')(this.props.controller, this);

        this.title = (
          <h1>Nouvelle partition</h1>
        );
      },

    // *******

      getInitialState() {
        return {
          valueWHOIS: 'DMO',
          valueBACK: 'GENERAL',
          valueENTETE: 'DEMO',
          valueMACHINE: 'DMO',
          valueNOM: 'DEMO',
          valuePASS: 'DMO',
          valuePRINTER: '30',
          valueSITE: '1',
          valueSTART: 'GENERAL',
          valueTABLETRAC: '30',
          valueTYPETABLE: 'HP-KYO',
          valueECRANGRAP: '0',
          valueTYPEECRAN: 'TEKTRO-4014',
          valueIMPRCOUR: '66',
          valueORDINATEUR: 'IBM-PC',
          valueLANGAGE: 'M11',
          isLoading: false,
          status: 'initial'
        };
      },

      // WHOIS
      getValidationWHOIS() {
        const length = this.state.valueWHOIS.length;
        if (length > 5) return 'error';
        else if (length > 3) return 'warning';
        else if (length == 3) return 'success';
      },

      handleChangeWHOIS(e) {
        const re = /[a-zA-Z]/g;
        const np = e.target.value.replace(re,"");
        if (e.target.value.replace(re,"")=="") {
          this.setState({
            valueWHOIS: e.target.value.toUpperCase(),
          });
        } else {
          this.setState({
            valueWHOIS: e.target.value.substring(0,e.target.value.length-1)
          });
        }
      },

    // ******2

      handleClick() {
        this.setState({isLoading: true});
        this.refresh();

        // This probably where you would have an `ajax` call
        setTimeout(() => {
          // Completed of async action, set loading state back
          this.setState({isLoading: false});
        }, 2000);
        },

      componentDidUpdate: function() {

        //console.log('status: ' + this.state.status);
        var that = this;

        setTimeout(function() {
          $('.json-inspector__leaf').each(function(ix, item) {
            var id = $(item).attr('id');
            var name = id.split('root.')[1];
            if (!name) {
              $(item).find('span.json-inspector__key').first().hide();
              $(item).find('span.json-inspector__value').first().hide();
            }
            else if (name.indexOf('.') === -1 && that.data[name]) {
              $(item).find('span.json-inspector__key').first().addClass('json-inspector__docName');
            }
          });
        }, 100);
      },

    // ******

      componentWillReceiveProps: function(newProps) {
        this.onNewProps(newProps);
      },

      render: function() {

        //var componentPath = this.controller.updateComponentPath(this);

        /**
         * @todo Améliorer le test sur laille de la partition
         * @todo La taille ne doit pas excéder 50% de la taille disponible en local
        */

        function FieldGroup({ id, validation, label, help, ...props }) {
          return (
            <FormGroup controlId={id} validationState={validation}>
              <ControlLabel>{label}</ControlLabel>
              <FormControl {...props} />
              <FormControl.Feedback />
              {help && <HelpBlock>{help}</HelpBlock>}
            </FormGroup>
          );
        }

        let isLoading = this.state.isLoading;

        // Créer un clone de données pour assurer un nouveau rendu
        if (this.data) {
          var newData = {};
          Object.assign(newData, this.data);
        }

        return (
          <Panel
            collapsible
            expanded={this.expanded}
            header={this.title}
            bsStyle="primary"
          >

          <form>

            <FieldGroup
              id="formWHOIS"
              validation={this.getValidationWHOIS()}
              type="text"
              label="WHOIS : Indiquer le nom de l'utilisateur."
              placeholder="Saisir l'utilisateur."
              value={this.state.valueWHOIS}
              help="Le nom doit être en majscules, comporter des lettres ou des nombres, le point est autorisé comme séparateur."
              onChange={this.handleChangeWHOIS}
            />

          </form>

          <Button
            bsStyle="primary"
            disabled={isLoading}
            onClick={!isLoading ? this.handleClick : null}>
            {isLoading ? 'En traitement...' : 'Soumettre'}
          </Button>

          <Inspector
            data={newData}
            isExpanded = {this.isExpanded}
            onClick={this.nodeClicked}
            search={false}
          />

          </Panel>
        );
      }
    });

    module.exports = DefUtilisateurPanel;

    /*
            <FormGroup
              controlId="formWHOIS"
              validationState={this.getValidationWHOIS()}
            >
              <ControlLabel>WHOIS : Indiquer nom de l'utisateur.</ControlLabel>
              <FormControl
                type="text"
                value={this.state.valueWHOIS}
                placeholder="Saisir le nom"
                onChange={this.handleChangeWHOIS}
              />
              <FormControl.Feedback />
              <HelpBlock>Le nom doit être en majscules, comporter des lettres ou des nombres, le point est autorisé comme séparateur.</HelpBlock>
            </FormGroup>

    */

    /*
            <FieldGroup
              id="formWHOIS"
              validationState={this.getValidationWHOIS()}
              type="text"
              label="WHOIS : Indiquer le nom de l'utilisateur."
              placeholder="Saisir l'utilisateur."
              value={this.state.valueWHOIS}
              help="Le nom doit être en majscules, comporter des lettres ou des nombres, le point est autorisé comme séparateur."
              onChange={this.handleChangeWHOIS}
            />
            <FieldGroup
              id="formBACK"
              type="text"
              label="BACK : Indiquer le nom du menu de retour."
              placeholder="Saisir le menu."
              value={this.state.valueBACK}
            />
            <FieldGroup
              id="formENTETE"
              type="text"
              label="ENTETE : Indiquer l'entête de la partition ou du service."
              placeholder="Saisir l'entête."
              value={this.state.valueENTETE}
            />
            <FieldGroup
              id="formMACHINE"
              type="text"
              label="MACHINE : Indiquer le nom de la partition ou du service."
              placeholder="Saisir la partition."
              value={this.state.valueMACHINE}
            />
            <FieldGroup
              id="formNOM"
              type="text"
              label="Text"
              placeholder="Enter text."
              value={this.state.valueNOM}
            />
            <FieldGroup
              id="formPASS"
              type="text"
              label="PASS : Indiquer le mot de passe de la partition ou du service."
              placeholder="Saisir le mot de passe."
              value={this.state.valuePASS}
            />
            <FieldGroup
              id="formPRINTER"
              type="number"
              label="PRINTER : Indiquer le N° de l'imprimante."
              placeholder="Saisir l'imprimante."
              value={this.state.valuePRINTER}
            />
            <FieldGroup
              id="formSITE"
              type="number"
              label="SITE : Indiquer le N° du site."
              placeholder="Saisir le site."
              value={this.state.valueSITE}
            />
            <FieldGroup
              id="formSTART"
              type="text"
              label="START : Indiquer le nom du menu au démarrage."
              placeholder="Saisir le menu."
              value={this.state.valueSTART}
            />
            <FieldGroup
              id="formTABLETRAC"
              type="text"
              label="TABLETRAC : Indiquer le nom du menu au démarrage."
              placeholder="Saisir le menu."
              value={this.state.valueTABLETRAC}
            />
            <FieldGroup
              id="formTYPETABLE"
              type="text"
              label="TYPETABLE : Indiquer le nom du menu au démarrage."
              placeholder="Saisir le menu."
              value={this.state.valueTYPETABLE}
            />
            <FieldGroup
              id="formECRANGRAP"
              type="text"
              label="ECRANGRAP : Indiquer le nom du menu au démarrage."
              placeholder="Saisir le menu."
              value={this.state.valueECRANGRAP}
            />
            <FieldGroup
              id="formTYPEECRAN"
              type="text"
              label="TYPEECRAN : Indiquer le nom du menu au démarrage."
              placeholder="Saisir le menu."
              value={this.state.valueTYPEECRAN}
            />
            <FieldGroup
              id="formIMPRCOUR"
              type="text"
              label="IMPRCOUR : Indiquer le nom du menu au démarrage."
              placeholder="Saisir le menu."
              value={this.state.valueIMPRCOUR}
            />
            <FieldGroup
              id="formORDINATEUR"
              type="text"
              label="ORDINATEUR : Indiquer le nom du menu au démarrage."
              placeholder="Saisir le menu."
              value={this.state.valueORDINATEUR}
            />
            <FieldGroup
              id="formLANGAGE"
              type="text"
              label="LANGAGE : Indiquer le langage utilisé."
              placeholder="Saisir le langage."
              value={this.state.valueLANGAGE}
            />
    */