React = require 'react'

{span} = require 'react-dom-factories'

###

  Filter mixin
  data siphoned through this mixin will be wrapped with highlight elements if the contents match a provided search term

  @params.term - String - the search term that is fed into the f() method. Typically would be done via a store property through a render method

  @params.source - String - the source term to compare against. This is the data that would be received by the API, or other searchable terms

### 


module.exports =

  f: (source, term) ->
    return '' unless source?
    
    # Allow a term to be passed directly – otherwise use an already-defined filterTerm property
    term = @props.filterTerm or term or ''
    term = term.trim()
    termIndex = source.toLowerCase().indexOf(term)

    if term.toLowerCase().length > 2 and termIndex > -1
      ra = []

      # Chunk 1 - unused characters before match
      if termIndex
        ch1 = source.substring(0, termIndex)
        ra.push(span { key: ch1 }, ch1)

      # Chunk 2 - actual matched term. If the term ends in a space, ignore it
      ch2 = source.substring(termIndex, termIndex + term.length)
      ra.push(span { key: ch2, className: 'ft' }, ch2)

      # Chunk 3 - remaining characters
      if termIndex + term.length < source.length
        ch3 = source.substr(termIndex + ch2.length)
        ra.push(span { key: ch3 }, ch3)

      # Pass the array for React to render
      rv = ra

    else rv = source

    return rv