require './md-select-search.styl'

vision = angular.module 'vision'

vision.directive 'mdSelectSearch', ($compile) ->
  'ngInject'
  
  link: (scope, element, attrs) ->
    input = $(element).find('input')
    input.on 'keydown', keydown
    input.on 'focus', focus
    parent = input.parent().parent()
    parent.addClass 'md-select-search-container'
    items = parent.find('md-option')
    parent.on 'mouseover', 'md-option', ->
      if canOver
        select $(@), no
    parent.on 'click', 'md-option', ->
      scrollTop = parent.scrollTop()
      input.focus()
      select $(@), no
      parent.scrollTop(scrollTop)

    button = $compile '''
      <md-button class="md-icon-button md-select-clear" aria-label="clear">
        <ng-md-icon icon="replay"></ng-md-icon>
        <md-tooltip>Сброс</md-tooltip>
      </md-button>
    '''
    button = button scope
    setTimeout ->
      element.append button
    , 1000


  replace: yes
  scope:
    ngModel: '='
    placeholder: '@'
  controller: ($scope) ->
    $scope.placeholder ?= 'Поиск...'
  template: """
    <md-select-header class="md-select-search" layout="row">
      <input flex class="md-select-search-input" type="search" placeholder="{{placeholder}}" ng-model="ngModel">
    </md-select-header>
  """

fc = 'md-select-search-option-focus'
canOver = yes

select = (el, scroll=yes) ->
  unless el.is('md-option') then return no
  parent = el.parent()
  parent.find('md-option').removeClass(fc)
  el.addClass(fc)
  input = parent.find('.md-select-search input')

  unless scroll then return false

  elHeight = el.height()

  # scrollHeight = parent.get(0).scrollHeight
  scrollTop = parent.scrollTop()
  height = parent.height()
  pos = el.position().top + scrollTop
  max = scrollTop + height - elHeight
  min = scrollTop
  # console.log "pos:#{pos}, min:#{min}, max:#{max}"
  if pos >= max
    canOver = no
    parent.animate
      scrollTop: min + elHeight
    , 50
  else if pos <= min
    canOver = no
    parent.animate
      scrollTop: min - elHeight
    , 50

focus = (e) ->
  parent = $(e.target).parent().parent()
  selected = parent.find('.'+fc)
  unless selected.is('md-option')
    select parent.find('md-option').first(), no


keydown = (e) ->

  do e.stopPropagation
  parent = $(e.target).parent().parent()
  items = parent.find('md-option')

  if e.keyCode is 27
    do e.preventDefault
    e = $.Event('keydown')
    e.which = 27
    e.keyCode = 27
    parent.trigger(e)

  # при нажатии на enter
  else if e.keyCode is 13
    parent.find('.'+fc).trigger 'click'
    return false
  # вверх/вниз
  else if e.keyCode in [38, 40]
    do e.preventDefault
    if e.keyCode is 38
      el = parent.find('.'+fc).prev()
    else
      el = parent.find('.'+fc).next()
    if el.is('md-option')
      select(el)
  else
    parent.animate
      scrollTop: 0
    setTimeout ->
      items = parent.find('md-option')
      select items.first()
    , 500

$(document).on 'mousemove', ->
  canOver = yes unless canOver

$(document).on 'click', '.md-select-search .md-select-clear', ->
  parent =
  $(@).parent().parent().find('md-option[selected]').trigger('click')
  # e = $.Event('keydown')
  # e.which = 27
  # e.keyCode = 27
  # parent.trigger(e)

do ->
  setInterval ->
    $(document).find('.md-select-search input').each ->
      if $(this).is(':visible')
        parent = $(this).parent().parent()
        scrollTop = parent.scrollTop()
        do $(this).focus
        parent.scrollTop scrollTop
  , 1000