import App from '../../../base'
import { react2angular } from 'react2angular'
import { cloneDeep } from 'lodash'

import FileTreeRoot from '../components/file-tree-root'
import { rootContext } from '../../../shared/context/root-context'

App.controller(
  'ReactFileTreeController',
  function (
    $scope,
    $timeout,
    ide
    // eventTracking
  ) {
    $scope.isConnected = true

    $scope.$on('project:joined', () => {
      $scope.$emit('file-tree:initialized')
    })

    $scope.$watch('editor.open_doc_id', openDocId => {
      window.dispatchEvent(
        new CustomEvent('editor.openDoc', { detail: openDocId })
      )
    })

    $scope.$on('file-tree.reselectDoc', (ev, docId) => {
      window.dispatchEvent(new CustomEvent('editor.openDoc', { detail: docId }))
    })

    // Set isConnected to true if:
    // - connection state is 'ready', OR
    // - connection state is 'waitingCountdown' and reconnection_countdown is null
    // The added complexity is needed  because in Firefox on page reload the
    // connection state goes into 'waitingCountdown' before being hidden and we
    // don't want to show a disconnect UI.
    function updateIsConnected() {
      const isReady = $scope.connection.state === 'ready'
      const willStartCountdown =
        $scope.connection.state === 'waitingCountdown' &&
        $scope.connection.reconnection_countdown === null
      $scope.isConnected = isReady || willStartCountdown
    }

    $scope.$watch('connection.state', updateIsConnected)
    $scope.$watch('connection.reconnection_countdown', updateIsConnected)

    $scope.onInit = () => {
      // HACK: resize the vertical pane on init after a 0ms timeout. We do not
      // understand why this is necessary but without this the resized handle is
      // stuck at the bottom. The vertical resize will soon be migrated to React
      // so we accept to live with this hack for now.
      $timeout(() => {
        $scope.$emit('left-pane-resize-all')
      })
    }

    $scope.onSelect = selectedEntities => {
      if (selectedEntities.length === 1) {
        const selectedEntity = selectedEntities[0]
        const type =
          selectedEntity.type === 'fileRef' ? 'file' : selectedEntity.type
        $scope.$emit('entity:selected', {
          ...selectedEntity.entity,
          id: selectedEntity.entity._id,
          type,
        })

        // in the react implementation there is no such concept as "1
        // multi-selected entity" so here we pass a count of 0
        $scope.$emit('entities:multiSelected', { count: 0 })
      } else if (selectedEntities.length > 1) {
        $scope.$emit('entities:multiSelected', {
          count: selectedEntities.length,
        })
      } else {
        $scope.$emit('entity:no-selection')
      }
    }

    $scope.refProviders = ide.$scope.user.refProviders || {}

    ide.$scope.$watch(
      'user.refProviders',
      refProviders => {
        $scope.refProviders = cloneDeep(refProviders)
      },
      true
    )

    $scope.setRefProviderEnabled = (provider, value = true) => {
      ide.$scope.$applyAsync(() => {
        ide.$scope.user.refProviders[provider] = value
      })
    }

    $scope.setStartedFreeTrial = started => {
      $scope.$applyAsync(() => {
        $scope.startedFreeTrial = started
      })
    }

    $scope.reindexReferences = () => {
      ide.$scope.$emit('references:should-reindex', {})
    }
  }
)

App.component(
  'fileTreeRoot',
  react2angular(
    rootContext.use(FileTreeRoot),
    Object.keys(FileTreeRoot.propTypes)
  )
)

@@ -1174,24 +1174,57 @@
 nnected() %7B%0A
+      if ($scope.connection) %7B%0A  
       const 
@@ -1269,16 +1269,18 @@
 'ready'%0A
+  
       co
@@ -1304,32 +1304,34 @@
 tdown =%0A        
+  
 $scope.connectio
@@ -1364,32 +1364,34 @@
 own' &&%0A        
+ 
+ 
 $scope.connectio
@@ -1420,24 +1420,26 @@
 wn === null%0A
+  
       $scope
@@ -1483,16 +1483,74 @@
 untdown%0A
+      %7D else %7B%0A        $scope.isConnected = false%0A      %7D%0A
     %7D%0A%0A 

Handle undefined $scope.connection (#7899)