import React from 'react';
import { Form, InputGroup } from 'react-bootstrap';
import { ValidatorComponent } from 'react-form-validator-core';
import translateLabel from "./../../translation";

class TextBox extends ValidatorComponent {

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

  render() {

    const { id, name, label, value, type, asterisk, readonly, inputGroup, placeholder, onChange, lang, langCheckValue } = this.props;
    return (
      <div className={lang === langCheckValue ? "rtl-textBox" : ""}>
        <Form.Group>
          <Form.Label>{label}{asterisk ? <span className='asterisk'>*</span> : ""}</Form.Label>
          {inputGroup !== "" ?
            <InputGroup>
              <InputGroup.Prepend>
                <InputGroup.Text>{inputGroup}</InputGroup.Text>
              </InputGroup.Prepend>
              <Form.Control
                id={id}
                name={name}
                value={value !== null ? value : ""}
                type={type}
                placeholder={placeholder}
                readOnly={readonly === "true" ? true : false}
                onChange={onChange}
                ref={(r) => { this.input = r; }}
              />
            </InputGroup>
            :
            <Form.Control
              id={id}
              name={name}
              value={value !== null ? value : ""}
              type={type}
              placeholder={placeholder}
              readOnly={readonly === "true" ? true : false}
              onChange={onChange}
              ref={(r) => { this.input = r; }}
            />
          }
          {this.errorText()}
        </Form.Group>
      </div>);
  }

  errorText() {
    const { isValid } = this.state;
    if (isValid) {
      return null;
    }
    return (
      <div className="errorStr">
        {translateLabel(this.getErrorMessage())}
      </div>
    );
  }
}

export default TextBox;
// {/*const TextBox = ({id, name, label, value, type, asterisk, readonly, placeholder, required, onChange }) => (
//    <div>
//          <Form.Group>
//                  <Form.Label>{label}{asterisk ? <span className='asterisk'>*</span>: ""}</Form.Label>
//                  <Form.Control 
//                         id={id}
//                         name={name} 
//                         value={value!==null ? value : ""}
//                         type={type}
//                         placeholder={translateLabel(placeholder)}
//                         readOnly={readonly === "true" ? true : false }
//                         onChange={onChange}
//                  />
//                  {/* <Form.Text className="text-muted">
//                    We'll never share your email with anyone else.
//                  </Form.Text> 
//          </Form.Group>
//     </div>
//  );
// export default TextBox; */} 