import React, { useState } from 'react'
import {
  getAnimatedScale,
  getFractalBoxStyle,
  getFractalContainerStyle,
} from './FractalHelpers'

export default function FractalTreeBranch(props) {
  let {
    depth = 1,
    lean,
    maxDepth = 7,
    side,
    size,
    sprout,
  } = props
  
  let scale = getAnimatedScale(
    'constant',
    // startTime,
    // startScale
  )

  // When lean/sprout are negative, scaling them can reduce
  // the visible size, which feels kinda odd. The Math.min
  // prevents this from occuring.
  let scaledLean = Math.min(lean * scale, lean)
  let scaledSprout = Math.min(sprout * scale, sprout)

  if (depth > maxDepth) {
    return null
  } else {
    return (
      <div style={getFractalContainerStyle({
        depth,
        lean,
        maxDepth,
        side,
        size,
        sprout
      })}>
        <div
          style={getFractalBoxStyle(depth, maxDepth)}
        />
        <FractalTreeBranch
          depth={depth + 1}
          lean={scaledLean}
          side='left'
          sprout={scaledSprout}
          size={size}
        />
        <FractalTreeBranch
          depth={depth + 1}
          lean={scaledLean}
          side='right'
          sprout={scaledSprout}
          size={size}
        />
      </div>
    )
  }
}