// Copyright 2013-2021, University of Colorado Boulder

/**
 * The Home button that appears in the navigation bar.
 *
 * @author Sam Reid (PhET Interactive Simulations)
 */

import Property from '../../axon/js/Property.js';
import Shape from '../../kite/js/Shape.js';
import merge from '../../phet-core/js/merge.js';
import FocusHighlightPath from '../../scenery/js/accessibility/FocusHighlightPath.js';
import Node from '../../scenery/js/nodes/Node.js';
import Rectangle from '../../scenery/js/nodes/Rectangle.js';
import ButtonInteractionState from '../../sun/js/buttons/ButtonInteractionState.js';
import FontAwesomeNode from '../../sun/js/FontAwesomeNode.js';
import joist from './joist.js';
import JoistButton from './JoistButton.js';
import joistStrings from './joistStrings.js';

// constants
const homeScreenDescriptionString = joistStrings.a11y.homeScreenDescription;

class HomeButton extends JoistButton {

  /**
   * @param {number} navBarHeight
   * @param {Property.<string>} navigationBarFillProperty - the color of the navbar, as a string.
   * @param {Tandem} tandem
   * @param {Property.<string|null>} pdomDisplayNameProperty - for the HomeScreen, for description
   * @param {Object} [options]
   */
  constructor( navBarHeight, navigationBarFillProperty, pdomDisplayNameProperty, tandem, options ) {

    options = merge( {
      highlightExtensionWidth: 4,
      listener: null,

      // pdom,
      containerTagName: 'li',
      descriptionContent: homeScreenDescriptionString,
      appendDescription: true
    }, options );

    assert && assert( !options.innerContent, 'HomeButton sets its own innerContent' );

    const homeIcon = new FontAwesomeNode( 'home' );

    // scale so that the icon is slightly taller than screen button icons, value determined empirically, see joist#127
    homeIcon.setScaleMagnitude( 0.48 * navBarHeight / homeIcon.height );

    // transparent background, size determined empirically so that highlight is the same size as highlight on screen buttons
    const background = new Rectangle( 0, 0, homeIcon.width + 12, navBarHeight );
    homeIcon.center = background.center;

    const content = new Node( { children: [ background, homeIcon ] } );

    super( content, navigationBarFillProperty, tandem, options );

    // pdom - Pass a shape to the focusHighlight to prevent dilation, then tweak the bottom up just a hair so it
    // isn't off the screen.
    const highlightLineWidth = FocusHighlightPath.getOuterLineWidthFromNode( this );
    this.focusHighlight = Shape.bounds( this.bounds.setMaxY( this.bounds.maxY - highlightLineWidth / 2 ) );

    Property.multilink( [ this.interactionStateProperty, navigationBarFillProperty ],
      ( interactionState, navigationBarFill ) => {
        if ( navigationBarFill === 'black' ) {
          homeIcon.fill = interactionState === ButtonInteractionState.PRESSED ? 'gray' : 'white';
        }
        else {
          homeIcon.fill = interactionState === ButtonInteractionState.PRESSED ? '#444' : '#222';
        }
      } );

    pdomDisplayNameProperty.link( name => {
      this.innerContent = name;
    } );
  }
}

joist.register( 'HomeButton', HomeButton );
export default HomeButton;
@@ -444,24 +444,75 @@
 s/Node.js';%0A
+import Path from '../../scenery/js/nodes/Path.js';%0A
 import Recta
@@ -567,16 +567,94 @@
 %0Aimport 
+homeSolidShape from '../../sherpa/js/fontawesome-5/homeSolidShape.js';%0Aimport 
 ButtonIn
@@ -720,71 +720,8 @@
 Stat
-e.js';%0Aimport FontAwesomeNode from '../../sun/js/FontAwesomeNod
 e.js
@@ -1727,31 +1727,28 @@
 new 
-FontAwesomeNode( 'home'
+Path( homeSolidShape
  );%0A

Convert home icon to font awesome 5, see https://github.com/phetsims/sherpa/issues/83