/**
 * AccessibleBlockly
 *
 * Copyright 2016 Google Inc.
 * https://developers.google.com/blockly/
 *
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * @fileoverview Top-level component for the Accessible Blockly application.
 * @author madeeha@google.com (Madeeha Ghori)
 */

goog.provide('blocklyApp.AppComponent');

goog.require('Blockly');

goog.require('blocklyApp.AudioService');
goog.require('blocklyApp.BlockConnectionService');
goog.require('blocklyApp.BlockOptionsModalComponent');
goog.require('blocklyApp.BlockOptionsModalService');
goog.require('blocklyApp.KeyboardInputService');
goog.require('blocklyApp.NotificationsService');
goog.require('blocklyApp.SidebarComponent');
goog.require('blocklyApp.ToolboxModalComponent');
goog.require('blocklyApp.ToolboxModalService');
goog.require('blocklyApp.TranslatePipe');
goog.require('blocklyApp.TreeService');
goog.require('blocklyApp.UtilsService');
goog.require('blocklyApp.VariableAddModalComponent');
goog.require('blocklyApp.VariableModalService');
goog.require('blocklyApp.VariableRenameModalComponent');
goog.require('blocklyApp.VariableRemoveModalComponent');
goog.require('blocklyApp.WorkspaceComponent');


blocklyApp.workspace = new Blockly.Workspace();

blocklyApp.AppComponent = ng.core.Component({
  selector: 'blockly-app',
  template: `
    <blockly-workspace></blockly-workspace>
    <blockly-sidebar></blockly-sidebar>
    <!-- Warning: Hiding this when there is no content looks visually nicer,
    but it can have unexpected side effects. In particular, it sometimes stops
    screenreaders from reading anything in this div. -->
    <div class="blocklyAriaLiveStatus">
      <span aria-live="polite" role="status">{{getAriaLiveReadout()}}</span>
    </div>

    <blockly-add-variable-modal></blockly-add-variable-modal>
    <blockly-rename-variable-modal></blockly-rename-variable-modal>
    <blockly-remove-variable-modal></blockly-remove-variable-modal>
    <blockly-toolbox-modal></blockly-toolbox-modal>
    <blockly-block-options-modal></blockly-block-options-modal>

    <label id="blockly-translate-button" aria-hidden="true" hidden>
      {{'BUTTON'|translate}}
    </label>
    <label id="blockly-translate-workspace-block" aria-hidden="true" hidden>
      {{'WORKSPACE_BLOCK'|translate}}
    </label>
  `,
  directives: [
    blocklyApp.BlockOptionsModalComponent,
    blocklyApp.SidebarComponent,
    blocklyApp.ToolboxModalComponent,
    blocklyApp.VariableAddModalComponent,
    blocklyApp.VariableRenameModalComponent,
    blocklyApp.VariableRemoveModalComponent,
    blocklyApp.WorkspaceComponent
  ],
  pipes: [blocklyApp.TranslatePipe],
  // All services are declared here, so that all components in the application
  // use the same instance of the service.
  // https://www.sitepoint.com/angular-2-components-providers-classes-factories-values/
  providers: [
    blocklyApp.AudioService,
    blocklyApp.BlockConnectionService,
    blocklyApp.BlockOptionsModalService,
    blocklyApp.KeyboardInputService,
    blocklyApp.NotificationsService,
    blocklyApp.ToolboxModalService,
    blocklyApp.TreeService,
    blocklyApp.UtilsService,
    blocklyApp.VariableModalService
  ]
})
.Class({
  constructor: [
    blocklyApp.NotificationsService, function(notificationsService) {
      this.notificationsService = notificationsService;
    }
  ],
  getAriaLiveReadout: function() {
    return this.notificationsService.getDisplayedMessage();
  }
});