import React, { Component } from 'react'
import * as styles from '../style'
import Box from './box'
import Donation from './donation'
import * as selectors from '../selectors'
import * as actions from '../actions'
import { connect } from 'react-redux'

const borderHeight = 2

export class Queue extends Component {
  constructor(props){
    super(props)
  }

  onDonationClick(id) {
    this.props.setActiveDonation(id)
  }

  queueGenerator (donation, i, totalAmount, queueHeight) {
    let backgroundColor, height, borderBottom

    if (this.props.highlightedDonations.includes(donation.email)) {
      //Highligthed donation (yours)
      backgroundColor = styles.colors.highlight
      borderBottom = `${borderHeight}px solid rgb(254, 255, 76)`
    } else {
      backgroundColor = styles.colors.donation
      borderBottom = `${borderHeight}px solid rgb(204, 226, 255)`
    }

    height = donation.amount / totalAmount
    height = height * queueHeight
    height = height - borderHeight

    const donationStyle = {
      backgroundColor,
      height,
      borderBottom,
      cursor: 'pointer'
    }
    return <Donation amount={donation.amount} pattern={donation.pattern} onClick={() => this.onDonationClick(donation._id)} donationStyle={donationStyle} key={i}/>
  }

  render(){
    const padding = 15
    const queueHeight = 660

    //Hack to compensate for border height
    const containerHeight = queueHeight + this.props.donations.length * borderHeight
    const totalAmount = this.props.donations.reduce((prev, curr) => prev + curr.amount, 0)

    return(
      <Box title={'€' + this.props.totalAmount} titleColor={'lightgray'} backgroundColor={'rgba(210,210,210,.6)'} height={containerHeight}>
        <div style={{padding: `${padding}px`}}>
          { this.props.donations.map((d, i) => this.queueGenerator(d, i, totalAmount, queueHeight-padding*2)) }
        </div>
      </Box>
    )
  }
}

const mapStateToProps = state => {
  return {
    donations: selectors.getQueue(state),
    totalAmount: selectors.getTotalAmount(state),
    highlightedDonations: state.highlightedDonations
  }
}

const mapDispatchToProps = dispatch => {
  return {
    setActiveDonation: (id) => {
      dispatch(actions.setActiveDonation(id))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Queue)

@@ -962,24 +962,33 @@
    height = 
+Math.max(
 height - bor
@@ -996,16 +996,20 @@
 erHeight
+, 1)
 %0A%0A    co

Set min size for donation height