<% 
# This partial expects the following locals to be passed in:
#   type - The HTML input type (e.g. 'text', 'checkbox', etc.) 
#   id   - The input id. Use the Rails style model_attr (e.g. 'user_email')
#   name - The input name. Use the Rails style model[attr] (e.g. 'user[email]')
#   label - The input's label. If its a checkbox the label will appear after the input
#   classes - The list of classes to apply to the input (e.g. 'required abcd a123')
#
# The following locals are also permitted but NOT required
#   val - The input value
#   tooltip - The input title attribute
#   error_handler - Any custom error handler that you want to be fired on blur.
#                   The email and password types have a default handler located in
#                   roadmap-form.js

tip = "#{id}_tip"
error = "#{id}_error"

# Used to prevent JS bindings from affecting existing page elements
js_id = ''

# Allow the tooltip, and error_handler to be missing form locals
tooltip = tooltip ||= ''
error_handler = error_handler ||= '' 
%>

<div class="form-input">
	<% if type != 'checkbox' %>
  	<label for="<%= id %>"><%= raw label ||= '' %></label>
	<% end %>

  <input type="<%= type %>" 
         id="<%= id %>" 
         name="<%= name %>" 
         class="left-indent <%= classes ||= '' %><%= type == 'checkbox' ? ' right-indent' : ''"
         value="<%= val ||= '' %>" 
         title="<%= tooltip %>"
         aria-describedby="<%= tooltip %>" 
         roadmap-js-id="<%= js_id %>" />

	<% if type == 'checkbox' %>
		<label for="<%= id %>"><%= raw label ||= '' %></label>
	<% end %>
  <% 
  # If the field is a password then provide a 'show password' checkbox
  if type == 'password' 
  %>
    <div class="form-input checkbox-right">
      <label for="<%= id %>_show" class="checkbox-label"><%= _('Show password') %></label>
      <input type="checkbox" id="<%= id %>_show" roadmap-js-id="<%= js_id %>_show" />
    </div>
    <script type="text/javascript">
      $("input[roadmap-js-id='<%= js_id %>_show']").click(function(){
        let typ = $(this).parent().siblings("input[roadmap-js-id='<%= js_id %>']").attr('type');
        $(this).parent().siblings("input[roadmap-js-id='<%= js_id %>']").attr('type', (typ === 'password' ? 'text' : 'password'));
      });
    </script>
  <% end %>

  <% 
  # If the field has a tooltip add it and wire it up for on focus/blur
  if !tooltip.blank? 
  %>
    <div role="" id="<%= tip %>" class="tooltip" roadmap-js-id="<%= js_id %>_tip">
      <span class="tooltip-msg"><%= tooltip %></span>
    </div>
    <script type="text/javascript">
      $(document).ready(function(){
        $("input[roadmap-js-id='<%= js_id %>']").focus(function(){
          $(this).siblings('.tooltip').attr('role', 'tooltip');
        }).blur(function(){
          $(this).siblings('.tooltip').attr('role', '');
        });
      });
    </script>
  <% end %>

  <%
  # If an error handler was passed in or the input type has a generic handler
  if !error_handler.blank? || ['email', 'password'].include?(type) 
  %>
    <span role="" id="<%= id %>_error" class="error-tooltip left-indent <%= js_id %>_error"></span>

    <script type="text/javascript">
      $(document).ready(function(){
        let input = $("input[roadmap-js-id='<%= js_id %>']");
        
        let validate_<%= js_id %> = function(val){
          // If this is an email or password run the default validation
          <% if ['email', 'password'].include?(type) %>
            <% if !error_handler.blank? %>
					    // Run the default validator and then the specified validator
							let msg = processValidations(<%= "validate#{type.capitalize}(val)" %>, 
																			 		 <%= raw "#{error_handler}" %>);
						<% else %>
							// Run the default validator
          		let msg = <%= "validate#{type.capitalize}(val)" %>;
						<% end %>
							
          <% else %>
						// Run the specified validator or return an empty string (passed)
						<% if !error_handler.blank? %>
							let msg = <%= raw "#{error_handler}" %>;
						<% else %>
							let msg = '';
						<% end %>
          <% end %>
          
          if(msg === '' || val.trim().length <= 0){
            $("span.<%= js_id %>_error").html('').attr('role', '');
            $("input[roadmap-js-id='<%= js_id %>']").removeClass('red-border');
          }else{
            $("span.<%= js_id %>_error").html(__('Error: ') + msg).attr('role', 'tooltip');
            $("input[roadmap-js-id='<%= js_id %>']").addClass('red-border');
          }
        }
        // Run the validation on load to display errors on refresh
        validate_<%= js_id %>($(input).val());
  
        // Run validation check on blur, hide error message on focus
        $(input).on('blur', function(){
          validate_<%= js_id %>($(input).val());
        }).focus(function(){
          $("span.<%= js_id %>_error").attr('role', '');
        });
      });
    </script>
  <% end %>
</div>