import React from 'react';
import { Form } from 'react-bootstrap';
import { ValidatorComponent } from 'react-form-validator-core';
import translateLabel from "../../../../shared/translation"
import Config from "../../../../../config/appConstants";

class Select extends ValidatorComponent {

  // constructor(props) {
  //   super(props);
    
  // }

  render() {
    // const { errorMessages, validators, requiredError, validatorListener, id, name, label, value, type, asterisk, lang, readonly, placeholder, required, onChange } = this.props;
    return (
      <div>
        <Form.Group>
          <Form.Label dir={this.props.lang === Config.LANG.AR ? "rtl" : "ltr"}>{this.props.label}{this.props.asterisk ? <span className='asterisk'>*</span> : ""}</Form.Label>
          <select className="form-control" name={this.props.name} id={this.props.id} value={this.props.value !== null ? this.props.value : ""} onChange={this.props.onChange} ref={(r) => { this.input = r; }}>
            <option key='0' value="">{translateLabel("SELECT") + " " + this.props.label}</option>
            {
              this.props.options.map((data, index) => (
                <option key={index + 1} value={data.value}>{data.text}</option>
              ))
            }
          </select>
          {this.errorText()}
        </Form.Group>
      </div>);
  }
  errorText() {
    const { isValid } = this.state;
    if (isValid) {
      return null;
    }
    return (
      <div className="errorStr">
        {translateLabel(this.getErrorMessage())}
      </div>
    );
  }
}

export default Select;