require './md-button-sidenav.styl'

vision = angular.module 'vision'
vision.directive 'mdButtonSidenav', ($timeout, $mdSidenav) ->
  'ngInject'
  restrict: 'E'
  # replace: yes
  scope:
    icon: '@'
    iconAction: '@'
    title: '@'
    titleAction: '@'
    sidenav: '@'
    action: '&'
  link: (scope, element, attrs) ->

    sidenav = scope.sidenav
    scope.sidenav = null

    scope.$on '$destroy', ->
      do element.remove


    try
      unless sidenav?
        parent = $(element).parent()
        if parent.is('md-sidenav')
          sidenav = parent.attr('md-component-id')
        else
          do scope.$destroy

      sidenavEl = $('[md-component-id="'+sidenav+'"]')
      # if sidenavEl.length
        # console.log 123
      scope.sidenavEl = sidenavEl
      scope.sidenav = $mdSidenav(sidenav)
      element.appendTo(sidenavEl.parent())
      scope.icon ?= 'add'
      scope.iconAction ?= 'play_arrow'
      scope.title ?= 'Фильтры'
      scope.titleAction ?= 'Сформировать'
      scope.action ?= ->
      scope.ready = yes
      # else
      #   do scope.$destroy


    catch error
      do scope.$destroy








  controller: ($scope, $mdSidenav, $timeout, $interval) ->
    'ngInject'

    # получить иконку
    $scope.getIcon = ->
      return null unless $scope.sidenav
      if $scope.sidenav.isLockedOpen() then $scope.iconAction
      else if $scope.sidenav.isOpen() then $scope.iconAction
      else $scope.icon
    $scope.getLeft = ->
      return null unless $scope.sidenav
      width = $scope.sidenavEl.width()
      if $scope.sidenav.isLockedOpen() then width - 20
      else if $scope.sidenav.isOpen() then width - 20
      else 20

    # при клике на кнопку
    $scope.click = ->
      return null unless $scope.sidenav
      if $scope.sidenav.isOpen() or $scope.sidenav.isLockedOpen()
        do $scope.action
      unless $scope.sidenav.isLockedOpen()
        do $scope.sidenav.toggle


  template: '''
    <md-button class="md-fab md-btn-sidenav" aria-label="sidenav toggle"
      ng-click="click()" ng-style="{left: getLeft()}">
      <ng-md-icon icon="{{getIcon()}}"></ng-md-icon>
    </md-button>
  '''