import React from 'react'
import { generateHours, generateMinutes } from '../utils/generateTimes'
import _pull from 'lodash/pull'

export default class TimePicker extends React.Component {

    constructor(props) {
        super(props)
        this.state = {}
        this.onTimeClick = this.onTimeClick.bind(this)
    }

    preventDefaultScroll(event){
        event.preventDefault()
        event.stopPropagation()
    }

    onTimeClick(id, value) {
        this.props.getValue(id, value)
    }


    render() {
        let valuesWithout = []
        return (<ul className="columns" onScroll={(event) => this.preventDefaultScroll(event)} id={this.props.id}>
            <li className="id">{this.props.id}</li>
            {this.props.excludeHours ? this.props.excludeHours.map(h => {
                if (this.props.values.includes(h)) {
                    valuesWithout.push(_pull(this.props.values, h))
                }
                return <li key={h} className="disabled">{h}</li>
            }
            ) : null}
            {valuesWithout ? valuesWithout.map(v => v => <li key={v} className={this.props.active === v ? 'active' : ''} onClick={() => this.onTimeClick(this.props.id, v)}>{v}</li>) : null}
            {this.props.values && valuesWithout.length < 1 ? this.props.values.map(v => <li key={v} className={this.props.active === v ? 'active' : ''} onClick={() => this.onTimeClick(this.props.id, v)}>{v}</li>) : null}
        </ul>
        )
    }
}