import React from 'react';
import { connect } from 'react-redux';
import NotificationEndsWidget from './NotificationEndsWidget';
import NotificationSummary from './NotificationSummary';
import { Button,DropDown } from '../formElements';
import ReactDatetime from 'react-datetime';
import * as actions from './actions';

console.log(Button,'aman')
console.log(DropDown,'aman')

class ModalBody extends React.Component{
	render(){
	var Component = this.props.secondaryView;
	console.log("ScheduleNotificationModal component props: ", this.props);
	return (
				<div className="ScheduleNotificationModal">
					<div style={{'minHeight':'365px','paddingTop':'20px'}}><DropDown
						WrapperclassName="scheduleModalDd"
						name="notificationType"
						items={this.props.repeatFrequencyData}
						placeholder="Repeats"
						clearable = {false}
						onChange={(val)=>{
								debugger
								if(val && val.length && val[0].hasOwnProperty('value')){
									this.props.handleRepeatFrequencyChange(val[0].value);
								}
								else{
									this.props.handleRepeatFrequencyChange([{}]);
								}
							}
						}
						required = {true}
						value = {
							(this.props.RepeatType)?{
								'value':this.props.RepeatType
							}:{
								
							}
						}
					/>
					{ ((this.props.RepeatEveryData && this.props.RepeatEveryData.length) || !this.props.RepeatEveryDataBypass) &&
						<DropDown
							WrapperclassName="scheduleModalDd"
							name="RepeatEveryData"
							items={this.props.RepeatEveryData}
							placeholder="Repeat Every"
							required = {true}
							clearable = {false}
							onChange = {(val) => {
								if(val && val.length && val[0].hasOwnProperty('value')){
									this.props.RepeatEveryDataChange(val[0].value);
								}
								else{
									this.props.RepeatEveryDataChange([{}]);
								}
								this.props.extractCronExpression()}
							}
							value = {
							(this.props.RepeatType)?{
								'value':this.props.RepeatEverySelectedData
							}:{
								
							}
						}
						/>
					}
					{
						(this.props.RepeatEverySelectedData || this.props.RepeatEveryDataBypass) && <Component />
					}
					{
						(this.props.RepeatEverySelectedData || this.props.RepeatEveryDataBypass) && <NotificationEndsWidget />
					}
					{
						(this.props.RepeatEverySelectedData || this.props.RepeatEveryDataBypass) && <NotificationSummary summary={this.props.formData.schedule} />
					}
					</div>
					<div className="stickyFooterPadder"></div>
						<div className="stickyFooter">
							<Button buttonType="label" label="Cancel" onClick={()=>this.props.closeModal('indentModal')} className="primaryBtn disabled rf mr20" disabledBackgroundColor="rgba(221,113,47,0.2)" disabledLabelColor="rgba(1,1,1,0.2)" backgroundColor="rgba(221,113,47,1)" labelColor="white" />
							<Button buttonType="label" label="Done" onClick={()=>this.props.validateCronExpression(this.props,this.props.closeModal.bind(this,'indentModal'),this.props.callBack)}className="secondaryBtn rf" disabledBackgroundColor="rgba(1,1,1,0.2)" disabledLabelColor="rgba(221,113,47,0.2)" backgroundColor="rgba(221,113,47,1)" labelColor="white"  />
						</div>

				</div>
		  )
	}
};

const mapStateToProps = (state) =>{
    // console.log("****** ScheduleNotificationModal.js state:", state.toJS());
    return {
        RepeatEveryData : state.get('whenReducer').get('RepeatEveryData'),
        formData:state.get('whenReducer').get('formData').toJS(),
        secondaryView : state.get('whenReducer').get('secondaryView'),
        RepeatEverySelectedData : state.get('whenReducer').get('RepeatEverySelectedData'),
        RepeatType : state.get('whenReducer').get('RepeatType'),
        repeatFrequencyData : state.get('whenReducer').get('repeatFrequencyData').toJS(),
        RepeatEveryDataBypass: state.get('whenReducer').get('RepeatEveryDataBypass')
    }
}


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