var RecordField = React.createClass({
  render: function() {
    return (
      <div className="field">
        <label>{this.props.label}</label>
        {this.props.children}
      </div>
    );
  }
});

var RecordFlag = React.createClass({
  render: function() {
    return (
      <div className="field">
        <label>
          <input type="checkbox" checked={this.props.checked} onChange={this.props.onChange} /> {this.props.text}
        </label>
      </div>
    );
  }
});

var RecordInputField = React.createClass({
  getInitialState: function() {
    return {
      autocomplete: { options: [], current: -1 }
    }
  },
  render: function() {
    return (
      <RecordField label={this.props.label}>
        <input type="text" value={this.props.value} onChange={this.onChange} onKeyDown={this.onKeyDown} onBlur={this.onBlur} />
        {this.renderAutocomplete()}
      </RecordField>
    );
  },
  renderAutocomplete: function() {
    if (this.state.autocomplete.options.length > 0) {
      return (
        <ul style={{ position: "absolute", top: "16px", left: "132px", zIndex: "9", background: "white", padding: "10px", listStyle: "none", border: "1px solid #666", minWidth: "200px" }}>
          {this.renderAutocompleteOptions()}
        </ul>
      )
    }
  },
  renderAutocompleteOptions: function() {
    var result = [];
    for (var ix = 0; ix < this.state.autocomplete.options.length; ++ix) {
      if (ix == this.state.autocomplete.current) {
        result.push(<li className="current" onClick={this.onAutocomplete.bind(this, this.state.autocomplete.options[ix])} style={this.autoLiStyle}>{this.state.autocomplete.options[ix]}</li>)
      } else {
        result.push(<li onClick={this.onAutocomplete.bind(this, this.state.autocomplete.options[ix])} style={this.autoLiStyle}>{this.state.autocomplete.options[ix]}</li>)
      }
    }
    return result;
  },
  autoLiStyle: {
    lineHeight: "1.8em",
    whiteSpace: "nowrap",
    cursor: "pointer"
  },
  onAutocomplete: function(text, event) {
    this.props.onChange({ target: { value: text }}); // Almost an event. ;)
    this.setState({ autocomplete: {
        options: [],
        current: -1
      }
    });
  },
  onChange: function(event) {
    if (this.props.autocomplete) {
      this.state.autocomplete.options = event.target.value.autocomplete(this.props.autocomplete);
      this.state.autocomplete.current = -1;
    }
    this.props.onChange(event);
  },
  onKeyDown: function(event) {
    if (event.keyCode == 40) {
      this.state.autocomplete.current += 1;
      this.setState({ autocomplete: this.state.autocomplete })
    } else if (event.keyCode == 38) {
      this.state.autocomplete.current -= 1;
      this.setState({ autocomplete: this.state.autocomplete })
    } else if (event.keyCode == 13 && this.state.autocomplete.current >= 0 && this.state.autocomplete.current < this.state.autocomplete.options.length) {
      this.onAutocomplete(this.state.autocomplete.options[this.state.autocomplete.current]);
    }
    // event.keyCode
    // 40 - ArrowDown
    // 38 - ArrowUp
    // 13 - Enter
    console.debug("RecordInputField.onKeydown()", event.keyCode, event.key);
  },
  onBlur: function() {
    setTimeout(function() {
      this.setState({ autocomplete: {
          options: [],
          current: -1
        }
      });
    }.bind(this), 500)
  }
});

var RecordTextField = React.createClass({
  render: function() {
    return (
      <div className="text-field">
        <label>{this.props.label}</label>
        <textarea value={this.props.value} onChange={this.props.onChange} />
      </div>
    );
  }
});


var RecordForm = React.createClass({
  render: function() {
    return (
      <div>
        <RecordField label="Märke">
          <select value={this.props.record.Brand} onChange={this.updateRecord.bind(this, "Brand")}>
            {this.emptyOption()}
            <option>Övriga</option>
            <option>Volvo</option>
            <option>Scania</option>
            <option>Mercedes</option>
          </select>
        </RecordField>
        <RecordField label="Biltyp">
          <select value={this.props.record.Cartype} onChange={this.updateRecord.bind(this, "Cartype")}>
            {this.emptyOption()}
            <option>Övriga</option>
            <option>Baklastare</option>
            <option>Sidlastare</option>
            <option>Brandbil</option>
          </select>
        </RecordField>

        <RecordInputField label="Kund" value={this.props.record.Customer} onChange={this.updateRecord.bind(this, "Customer")} autocomplete="Customer" />
        <RecordInputField label="Byggare" value={this.props.record.Builder} onChange={this.updateRecord.bind(this, "Builder")} />
        <RecordInputField label="Chassinummer" value={this.props.record.ChassiNumber} onChange={this.updateRecord.bind(this, "ChassiNumber")} />
        <RecordInputField label="Serienummer" value={this.props.record.SerialNumber} onChange={this.updateRecord.bind(this, "SerialNumber")} />
        <RecordInputField label="PTO" value={this.props.record.PTO} onChange={this.updateRecord.bind(this, "PTO")} />
        <RecordInputField label="Växellåda" value={this.props.record.Transmission} onChange={this.updateRecord.bind(this, "Transmission")} autocomplete="Transmission" />

        <div className="flags">
          <label>Flaggor</label>

          <RecordFlag checked={this.hasFlag("breakpedal")} text="Bromspedal" onChange={this.setFlag.bind(this, "breakpedal")} />
          <RecordFlag checked={this.hasFlag("extrapedal")} text="Extrapedal" onChange={this.setFlag.bind(this, "extrapedal")} />
          <RecordFlag checked={this.hasFlag("newsale")} text="Nyleverans" onChange={this.setFlag.bind(this, "newsale")} />
          <RecordFlag checked={this.hasFlag("parkingbreak")} text="Parkeringsbroms" onChange={this.setFlag.bind(this, "parkingbreak")} />
          <RecordFlag checked={this.hasFlag("pto")} text="PTO" onChange={this.setFlag.bind(this, "pto")} />
          <RecordFlag checked={this.hasFlag("regear")} text="Regear" onChange={this.setFlag.bind(this, "regear")} />
          <RecordFlag checked={this.hasFlag("repair")} text="Reparation" onChange={this.setFlag.bind(this, "repair")} />
          <RecordFlag checked={this.hasFlag("retardermod")} text="Retardermodifikation" onChange={this.setFlag.bind(this, "retardermod")} />
          <RecordFlag checked={this.hasFlag("special")} text="Special" onChange={this.setFlag.bind(this, "special")} />
          <RecordFlag checked={this.hasFlag("exchange")} text="Utbyte" onChange={this.setFlag.bind(this, "exchange")} />

          <div style={{ clear: "both" }}></div>
        </div>

        {this.renderTextField()}
      </div>
    )
  },
  renderTextField: function() {
    if (this.props.text == "true") {
      return (
        <RecordTextField label="Text" value={this.props.record.Text} onChange={this.updateRecord.bind(this, "Text")} />
      );
    }
  },
  emptyOption: function() {
    if (this.props.emptyOptions == "true") {
      return (
        <option></option>
      );
    }
  },
  updateRecord: function(field, event) {
    this.props.record[field] = event.target.value;
    this.props.onUpdate(this.props.record);
  },
  hasFlag: function(flag) {
    if (this.props.record.Flags) {
      for (var ix = 0; ix < this.props.record.Flags.length; ++ix) {
        if (this.props.record.Flags[ix] == flag) {
          return true;
        }
      }
    }

    return false;
  },
  setFlag: function(flag, event) {
    if (!this.props.record.Flags) {
      this.props.record.Flags = [];
    }

    if (event.target.checked) {
      this.props.record.Flags.push(flag);
    } else {
      this.props.record.Flags.splice(this.props.record.Flags.indexOf(flag), 1);
    }

    this.props.onUpdate(this.props.record);
  },
});