import { Stack } from '../../types'
import './style.scss'
import _ from 'lodash'

type Props = {
  stack: Stack
}

export const FundBar = ({ stack }: Props) => {
  const amount = _.sumBy(stack.transactions, 'amount')
  console.log('amount', stack.id, amount)
  const max = stack.amount
  const current = max - amount
  const percent = Math.max(current / max, 0)
  const hue = percent * 120

  return (
    <div className="fundbar">
      <div
        className={`back`}
        onClick={() => console.log(`adding transaction to => ${stack.name}`)}
      ></div>
      <div
        className={`front`}
        style={{
          background: `hsl(${hue}, 100%, 50%)`,
          height: `${percent * 40 + 10}vmin`,
        }}
      >
        <h3>{stack.name}</h3>
      </div>
      <div
        className={`totals`}
        style={{ color: `hsl(0, 0%, ${Math.abs(1 - percent) * 100}%)` }}
      >
        ${Math.floor(current)} / ${max}
      </div>
    </div>
  )
}