import React from 'react'
import moment from 'moment'
import TimePickerColumn from './TimePickerColumn'
import { generateHours, generateMinutes } from '../utils/generateTimes'
import { isSameDay } from '../utils/isSameDay'

const defaultProps = {
    buttonLabel: 'OK',
    buttonClass: '',
    onClick: () => {}
}

export default class TimePicker extends React.Component {

    constructor(props) {
        super(props)

        this.state = {}
        this.getSelectedTime = this.getSelectedTime.bind(this)
        this.formatTime = this.formatTime.bind(this)
    }

    componentDidMount() {
        this.setState({ hoursArray: generateHours() })
        this.setState({ minutesArray: generateMinutes() })
        if (this.props.date && this.props.disablePastHours) {
            if (isSameDay(this.props.date, moment())) {
                const currentTime = moment().format('HH')
                let excludeHours = []
                for (let i = 0; i < currentTime; i++) {
                    if (i < 10) {
                        excludeHours.push("0" + i)
                    } else {
                        excludeHours.push(i)
                    }
                }

                this.setState({excludeHours: excludeHours})
            }
        }
    }

    formatTime() {
        if (this.state.Hours && this.state.Minutes && this.props.getTime) {
            return this.props.getTime(this.state.Hours + ':' + this.state.Minutes)
        }
    }

    getSelectedTime(id, value) {
        this.setState({ [id]: value }, () => this.formatTime())
    }

    render() {
        return (<div className="time-picker">
            <div className="info"><strong>Selected Time: {this.state.Hours && this.state.Minutes ? this.state.Hours + ':' + this.state.Minutes : null}</strong></div>
            <div className="time-picker-container">
                <TimePickerColumn id='Hours' excludeHours={this.state.excludeHours} active={this.state.Hours} getValue={this.getSelectedTime} values={this.state.hoursArray} />
                <TimePickerColumn id='Minutes' active={this.state.Minutes} getValue={this.getSelectedTime} values={this.state.minutesArray} />
            </div>
            <div className="info" onClick={this.props.onClick}><span className={`${this.props.buttonClass}`}>{this.props.buttonLabel}</span></div>
        </div>
        )

    }
}

TimePicker.defaultProps = defaultProps;