import React from 'react';
import * as actions from './actions.js';
import { connect } from 'react-redux';
import FormField from './forms/FormField.js';
import {RadioButton} from 'material-ui/RadioButton';
import RepeatByDayOfMonthOrWeekSubComponent from './RepeatByDayOfMonthOrWeekSubComponent';
import ReactDatetime from 'react-datetime';

class RepeatByDayOfMonthOrWeek extends React.Component {
    render() {
        var arr = []
        this.props.RepeatByDayOfMonthOrWeekData.map((el)=>{
            if(el.selected){
                arr.push(<div><RadioButton className="half_width" type='RadioGroup' 
                    label={el.label}
                    value={el.value}
                    style={{padding: '4px 0'}}
                    onCheck={(e) => {this.props.HandleChangeRepeatByDayOfMonthOrWeek(e,this.props.RepeatByDayOfMonthOrWeekData);this.props.extractCronExpression();}}
                    name="RepeatByDayOfMonthOrWeekRadioGroup"
                    checked={(el.selected)?true:false}
                /><RepeatByDayOfMonthOrWeekSubComponent data={el} /></div>)
            }
            else{
                arr.push(<RadioButton className="half_width" type='RadioGroup' 
                    label={el.label}
                    value={el.value}
                    style={{padding: '4px 0'}}
                    onCheck={(e) => {this.props.HandleChangeRepeatByDayOfMonthOrWeek(e,this.props.RepeatByDayOfMonthOrWeekData);this.props.extractCronExpression();}}
                    name="RepeatByDayOfMonthOrWeekRadioGroup"
                    checked={(el.selected)?true:false}
                />)
            }
        })
        var yesterday = ReactDatetime.moment().subtract( 1, 'day' );
        var valid = function( current ){
            return current.isAfter( yesterday );
        };
        return (
            <div className="RepeatByDayOfMonthOrWeek">
                <div className="form-field">
                    <div className="field-label ">Notification Time</div>
                    <ReactDatetime
                        inputProps ={{
                            placeholder : 'Select Time',
                            className : 'DatePickerInput'
                        }}
                        className = 'DatePicker full_width'
                        open = {false}
                        onChange = {(val) => {this.props.setScheduleTime(val);this.props.extractCronExpression()}}
                        viewMode = "time"
                        dateFormat={false}
                        timeFormat="LT"
                        value = {this.props.ScheduleTime}
                    />
                </div>
                <div className="form-field half_width">
                    <div className="field-label ">Repeat by*</div>
                    <div className="input-group  ">
                        {
                            arr
                        }
                    </div>
                </div>
            </div>
        );
    }
};

const mapStateToProps = (state) =>{
	console.log("****** RepeatByDayOfMonthOrWeek.js state:", state.toJS());
	return {
		RepeatByDayOfMonthOrWeekData : state.get('whenReducer').get('RepeatByDayOfMonthOrWeekData').toJS(),
        ScheduleTime : state.get('whenReducer').get('ScheduleTime')
	}
}

export default connect(mapStateToProps, actions)(RepeatByDayOfMonthOrWeek);