// Copyright 2018, University of Colorado Boulder

/**
 * Static equation in the form: y = (1/(4p)(x - h)^2 + k
 * This is an alternative version of the vertex form, when 1/(4p) is substituted for a.
 *
 * @author Chris Malley (PixelZoom, Inc.)
 */
define( require => {
  'use strict';

  // modules
  const GQSymbols = require( 'GRAPHING_QUADRATICS/common/GQSymbols' );
  const graphingQuadratics = require( 'GRAPHING_QUADRATICS/graphingQuadratics' );
  const Line = require( 'SCENERY/nodes/Line' );
  const MathSymbols = require( 'SCENERY_PHET/MathSymbols' );
  const Node = require( 'SCENERY/nodes/Node' );
  const PhetFont = require( 'SCENERY_PHET/PhetFont' );
  const RichText = require( 'SCENERY/nodes/RichText' );
  const StringUtils = require( 'PHETCOMMON/util/StringUtils' );
  const Tandem = require( 'TANDEM/Tandem' );
  const VBox = require( 'SCENERY/nodes/VBox' );

  class FocusAndDirectrixEquationNode extends Node {

    /**
     * @param {Object} [options]
     */
    constructor( options ) {

      options = _.extend( {
        font: new PhetFont( 26 ),
        fractionFont: new PhetFont( 22 ),
        color: 'black',
        tandem: Tandem.required
      }, options );

      // y =
      const leftString = StringUtils.fillIn( '{{y}} {{equals}}', {
        y: GQSymbols.y,
        equals: MathSymbols.EQUAL_TO
      } );
      const leftNode = new RichText( leftString, {
        font: options.font,
        fill: options.color
      } );

      // 1
      const numeratorNode = new RichText( '1', {
        font: options.fractionFont,
        fill: options.color
      } );

      // 4p
      const denominatorString = StringUtils.fillIn( '4{{p}}', {
        p: GQSymbols.p
      } );
      const denominatorNode = new RichText( denominatorString, {
        font: options.fractionFont,
        fill: options.color
      } );

      // horizontal line between numerator and denominator
      const fractionLineLength = 1.25 * Math.max( numeratorNode.width, denominatorNode.width );
      const fractionLine = new Line( 0, 0, fractionLineLength, 0, {
        stroke: options.color,
        lineWidth: 1
      } );

      // 1/4p
      const fractionNode = new VBox( {
        spacing: 2,
        children: [ numeratorNode, fractionLine, denominatorNode ]
      } );

      // (x - h)^2 + k
      const rightString = StringUtils.fillIn( '({{x}} {{minus}} {{h}})<sup>2</sup> {{plus}} {{k}}', {
        x: GQSymbols.x,
        h: GQSymbols.h,
        k: GQSymbols.k,
        plus: MathSymbols.PLUS,
        minus: MathSymbols.MINUS
      } );
      const rightNode = new RichText( rightString, {
        font: options.font,
        fill: options.color
      } );

      assert && assert( !options.children, 'FocusAndDirectrixEquationNode sets children' );
      options.children = [ leftNode, fractionNode, rightNode ];

      const xSpacing = 5;
      fractionNode.left = leftNode.right + xSpacing;
      fractionNode.centerY = leftNode.centerY;
      rightNode.left = fractionNode.right + xSpacing;

      super( options );
    }
  }

  return graphingQuadratics.register( 'FocusAndDirectrixEquationNode', FocusAndDirectrixEquationNode );
} );

@@ -1211,20 +1211,23 @@
   const 
-left
+yEquals
 String =
@@ -1231,89 +1231,27 @@
 g = 
-StringUtils.fillIn( '%7B%7By%7D%7D %7B%7Bequals%7D%7D', %7B%0A        y: GQSymbols.y,%0A        equals:
+GQSymbols.y + ' ' +
  Mat
@@ -1267,26 +1267,16 @@
 EQUAL_TO
-%0A      %7D )
 ;%0A      
@@ -1281,20 +1281,23 @@
   const 
-left
+yEquals
 Node = n
@@ -1309,20 +1309,23 @@
 chText( 
-left
+yEquals
 String, 
@@ -1578,50 +1578,13 @@
 g = 
-StringUtils.fillIn( '4%7B%7Bp%7D%7D', %7B%0A        p:
+'4' +
  GQS
@@ -1591,26 +1591,16 @@
 ymbols.p
-%0A      %7D )
 ;%0A      
@@ -2686,20 +2686,23 @@
 ren = %5B 
-left
+yEquals
 Node, fr
@@ -2779,20 +2779,23 @@
 .left = 
-left
+yEquals
 Node.rig
@@ -2838,20 +2838,23 @@
 nterY = 
-left
+yEquals
 Node.cen

remove unnecessary uses of StringUtils.fillIn