import Form from 'react-bootstrap/Form';

function FormTextArea(props) {
  const {
    input,
    required,
    disabled,
    horizontal,
    label,
    type,
    size,
    meta: { touched, error }
  } = props;

  const id = props.id || input.name;
  const placeholder = props.placeholder || label;
  const exactLabel = ['.', '?', '!', '؟'].includes(label.charAt(label.length - 1));

  if (horizontal) {
    return (
      <Form.Group controlId={id} className='d-flex align-items-baseline'>
        <Form.Label className='mr-3 flex-shrink-0'>
          {exactLabel ? label : `${label} :`}
          {required && <span className='text-danger'> * </span>}
        </Form.Label>
        <div className='flex-grow-1'>
          <Form.Control
            {...input}
            required={required}
            type={type}
            placeholder={placeholder}
            as='textarea'
            disabled={disabled}
          />
          {touched && error != null && <Form.Text className='text-danger'>{error}</Form.Text>}
        </div>
      </Form.Group>
    );
  }

  return (
    <Form.Group controlId={id}>
      <Form.Label>
        {exactLabel ? label : `${label} :`}
        {required && <span className='text-danger'> * </span>}
      </Form.Label>
      <Form.Control
        {...input}
        required={required}
        type={type}
        placeholder={placeholder}
        size={size}
        as='textarea'
        disabled={disabled}
      />
      {touched && error != null && <Form.Text className='text-danger'>{error}</Form.Text>}
    </Form.Group>
  );
}

export default FormTextArea;
