// Copyright 2014-2018, University of Colorado Boulder

/**
 * Shows a readout of the elapsed time, with play and pause buttons.  By default there are no units (which could be used
 * if all of a simulations time units are in 'seconds'), or you can specify a selection of units to choose from.
 *
 * @author Jonathan Olson <jonathan.olson@colorado.edu>
 * @author Sam Reid (PhET Interactive Simulations)
 * @author Anton Ulyanov (Mlearner)
 */
define( function( require ) {
  'use strict';

  // modules
  var Bounds2 = require( 'DOT/Bounds2' );
  var BooleanRectangularToggleButton = require( 'SUN/buttons/BooleanRectangularToggleButton' );
  var HBox = require( 'SCENERY/nodes/HBox' );
  var inherit = require( 'PHET_CORE/inherit' );
  var Node = require( 'SCENERY/nodes/Node' );
  var Path = require( 'SCENERY/nodes/Path' );
  var PauseIconShape = require( 'SCENERY_PHET/PauseIconShape' );
  var PlayIconShape = require( 'SCENERY_PHET/PlayIconShape' );
  var RectangularPushButton = require( 'SUN/buttons/RectangularPushButton' );
  var sceneryPhet = require( 'SCENERY_PHET/sceneryPhet' );
  var ShadedRectangle = require( 'SCENERY_PHET/ShadedRectangle' );
  var Tandem = require( 'TANDEM/Tandem' );
  var TimerReadoutNode = require( 'SCENERY_PHET/TimerReadoutNode' );
  var UTurnArrowShape = require( 'SCENERY_PHET/UTurnArrowShape' );
  var VBox = require( 'SCENERY/nodes/VBox' );

  // constants
  var ICON_HEIGHT = 10;
  var RESET_PATH_OPTIONS = {
    fill: 'black'
  };
  var PLAY_PATH_OPTIONS = {
    stroke: 'black',
    fill: '#eef'
  };
  var PAUSE_PATH_OPTIONS = {
    fill: 'black'
  };

  /**
   * @param {Property.<number>} timeProperty
   * @param {Property.<boolean>} runningProperty
   * @param {Object} [options]
   * @constructor
   */
  function TimerNode( timeProperty, runningProperty, options ) {

    options = _.extend( {

      // See also options that pass through to TimerReadoutNode
      touchAreaDilation: 10,
      cursor: 'pointer',
      iconFill: 'black',
      iconStroke: null,
      iconLineWidth: 1,
      buttonBaseColor: '#DFE0E1',
      xSpacing: 6, // horizontal space between the buttons
      ySpacing: 6, // vertical space between readout and buttons
      xMargin: 8,
      yMargin: 8,

      // Tandem is required to make sure the buttons are instrumented
      tandem: Tandem.required
    }, options );

    assert && assert( options.xSpacing >= 0, 'Buttons cannot overlap' );
    assert && assert( options.ySpacing >= 0, 'Buttons cannot overlap the readout' );

    // Create the TimerReadoutNode.  If we need more flexibility for this part, consider inversion of control
    var timerReadoutNode = new TimerReadoutNode( timeProperty, options );
    timerReadoutNode.centerX = 0;

    // Buttons ----------------------------------------------------------------------------

    var resetPath = new Path( new UTurnArrowShape( ICON_HEIGHT ), RESET_PATH_OPTIONS );

    var playIconHeight = resetPath.height;
    var playIconWidth = 0.8 * playIconHeight;
    var playPath = new Path( new PlayIconShape( playIconWidth, playIconHeight ), PLAY_PATH_OPTIONS );

    var pausePath = new Path( new PauseIconShape( 0.75 * playIconWidth, playIconHeight ), PAUSE_PATH_OPTIONS );

    var playPauseButton = new BooleanRectangularToggleButton( pausePath, playPath, runningProperty, {
      baseColor: options.buttonBaseColor,
      tandem: options.tandem.createTandem( 'playPauseButton' )
    } );

    var resetButton = new RectangularPushButton( {
      listener: function resetTimer() {
        runningProperty.set( false );
        timeProperty.set( 0 );
      },
      content: resetPath,
      baseColor: options.buttonBaseColor,
      tandem: options.tandem.createTandem( 'resetButton' )
    } );

    var contents = new VBox( {
      spacing: options.ySpacing,
      children: [
        timerReadoutNode,
        new HBox( {
          spacing: options.xSpacing,
          children: [ resetButton, playPauseButton ]
        } )
      ]
    } );

    // Background panel ----------------------------------------------------------------------------

    var backgroundNode = new ShadedRectangle( new Bounds2( 0, 0,
      contents.width + 2 * options.xMargin, contents.height + 2 * options.yMargin ) );
    backgroundNode.touchArea = backgroundNode.localBounds.dilated( options.touchAreaDilation );
    contents.center = backgroundNode.center;

    assert && assert( !options.children, 'TimerNode sets children' );
    options.children = [ backgroundNode, contents ];

    Node.call( this, options );

    // @public (read-only) - Target for drag listeners
    this.dragTarget = backgroundNode;

    // Disable the reset button when time is zero.
    var timeListener = function( value ) {
      resetButton.enabled = value > 0;
    };
    timeProperty.link( timeListener );

    // @private
    this.disposeTimerNode = function() {
      timerReadoutNode.dispose();
      timeProperty.unlink( timeListener );
      resetButton.dispose();
      playPauseButton.dispose();
    };
  }

  sceneryPhet.register( 'TimerNode', TimerNode );

  return inherit( Node, TimerNode, {

    /**
     * Release resources when no longer be used.
     * @public
     */
    dispose: function() {
      this.disposeTimerNode();
      Node.prototype.dispose.call( this );
    }
  } );
} );
@@ -1383,223 +1383,8 @@
 );%0A%0A
-  // constants%0A  var ICON_HEIGHT = 10;%0A  var RESET_PATH_OPTIONS = %7B%0A    fill: 'black'%0A  %7D;%0A  var PLAY_PATH_OPTIONS = %7B%0A    stroke: 'black',%0A    fill: '#eef'%0A  %7D;%0A  var PAUSE_PATH_OPTIONS = %7B%0A    fill: 'black'%0A  %7D;%0A%0A
   /*
@@ -1745,16 +1745,38 @@
 inter',%0A
+      iconHeight: 10,%0A
       ic
@@ -1796,32 +1796,8 @@
 k',%0A
-      iconStroke: null,%0A
     
@@ -2656,41 +2656,66 @@
 pe( 
-ICON_HEIGHT ), RESET_PATH_OPTIONS
+options.iconHeight ), %7B%0A      fill: options.iconFill%0A    %7D
  );%0A
@@ -2889,25 +2889,44 @@
  ), 
-PLAY_PATH_OPTIONS
+%7B%0A      fill: options.iconFill%0A    %7D
  );%0A
@@ -3020,26 +3020,44 @@
  ), 
-PAUSE_PATH_OPTIONS
+%7B%0A      fill: options.iconFill%0A    %7D
  );%0A

use iconFill:'black' as the default for all button icons, #430