import React from 'react';
import {Modal, Form, Checkbox, Input, Radio, Segment, Header, List, Grid, Button} from 'semantic-ui-react';
import DateTime from 'react-datetime';
import DeviceSelect from '../../Common/DeviceSelect';
import SelectedItem from './SelectedItem';

class ScheduleModal extends React.Component {

	render(){
		let {i18n, open, data, type, devs, permissions, querySelectList, onSubmit, onClose} = this.props;
		let {showTemp, week, cmd, temp, dateType, selected, addSelect, removeSelected, changeDateType, checkShowTemp, changeWeek} = this.props;
		let actlist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.action_list') : [];

		let act = data.ioschedulecmd || ''; 
		act = act.split(',');
		let defcmd = '';
		let deftemp = '';
		if(act.length == 2){
			if(act[0] == '2') {
				defcmd = act[0];
				deftemp = act[1];
			}else {
				defcmd = act.join(' ');
			}
		}

		return (
			<Modal open={open}>
				<Modal.Header content={i18n&&i18n.t ? (type == 1 ? i18n.t('page.schedule.form.title.edut') : i18n.t('page.schedule.form.title.add')) : ''}/>
				<Modal.Content>
					<Form onSubmit={(e, d) => {
							e.preventDefault();
							onSubmit(type, d.formData);
						}} serializer={e => {
							let json = {
								active: false,
								name: '',
								cmd: '',
								temp: '',
								time: '',
								date: '',
								id: data.ioscheduleuid || ''
							};

							let active = e.querySelector('input[name="active"]');
							if(active && 'checked' in active) json.active = active.checked;
							let name = e.querySelector('input[name="name"]');
							if(name && 'value' in name) json.name = name.value;
							let cmd = e.querySelector('select[name="act"]');
							if(cmd && 'value' in cmd) json.cmd = cmd.value;
							let time = e.querySelector('#timeDiv input');
							if(time && 'value' in time) json.time = time.value;
							let date = e.querySelector('#dateDiv input');
							if(date && 'value' in date) json.date = date.value;
							let temp = e.querySelector('input[name="temp"]');
							if(temp && 'value' in temp) json.temp = temp.value;
							
							return json;
						}}>
						<Form.Field>
							{/*<label>{i18n&&i18n.t ? i18n.t('page.schedule.form.label.enable') : ''}</label>*/}
							<Checkbox defaultChecked={data.ioscheduleactive == 1 ? true : false} name="active" label={i18n&&i18n.t ? i18n.t('page.schedule.form.label.enable') : ''} />
						</Form.Field>
						<Form.Field>
							<Input label={i18n&&i18n.t ? i18n.t('page.schedule.form.label.name') : ''} name="name" defaultValue={data.ioschedulename} />
						</Form.Field>
						<Form.Field>
							<label>{i18n&&i18n.t?i18n.t('page.schedule.form.label.action') : ''}</label>
							<select name="act" value={cmd} onChange={(e) => { checkShowTemp(e.target.value); }}>
								<option value="">{i18n&&i18n.t ? i18n.t('select.select_action') : ''}</option>
								{
									actlist.map((t, idx) => {
										{/*let selected = defcmd == t.cmd ? 'selected' : 'false';*/}
										return (
											<option key={idx} value={t.cmd} >{t.name}</option>
										)
									})
								}
							</select>
						</Form.Field>
						{
							showTemp ? 
							(<Form.Field>
								<Input label={i18n&&i18n.t ? i18n.t('page.schedule.form.label.temp') : ''} name="temp" defaultValue={temp} />
							</Form.Field>)
							: null
						}
						<Form.Field id="timeDiv">
							<label>{i18n&&i18n.t?i18n.t('page.schedule.form.label.time') : ''}</label>
							<DateTime dateFormat={false} timeFormat="HH:mm" defaultValue={data.ioscheduleparam1&&data.ioscheduleparam2 ? `${data.ioscheduleparam2}:${data.ioscheduleparam1}` : ''} />
						</Form.Field>
						<Form.Field>
							<label>{i18n&&i18n.t ? i18n.t('page.schedule.form.label.datetype') : ''}</label>
							<Radio label={i18n&&i18n.t ? i18n.t('page.schedule.form.label.type_week') : ''} name="dtRadio" value="w" checked={dateType == 'w'} onChange={(e, {value}) => {changeDateType(value)}} />
							<Radio label={i18n&&i18n.t ? i18n.t('page.schedule.form.label.type_date') : ''} name="dtRadio" value="d" checked={dateType == 'd'} onChange={(e, {value}) => {changeDateType(value)}} />
						</Form.Field>
						{
							dateType == 'w' ? 
							(
								<Form.Group inline>
									<label>{i18n&&i18n.t ? i18n.t('page.schedule.form.label.week') : ''}</label>
									<Form.Field>
										<Checkbox label={i18n&&i18n.t ? i18n.t('week.mon') : ''} value="1" checked={week.find(t => t == 1) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
									</Form.Field>
									<Form.Field>
										<Checkbox label={i18n&&i18n.t ? i18n.t('week.tue') : ''} value="2" checked={week.find(t => t == 2) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
									</Form.Field>
									<Form.Field>
										<Checkbox label={i18n&&i18n.t ? i18n.t('week.wed') : ''} value="3" checked={week.find(t => t == 3) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
									</Form.Field>
									<Form.Field>
										<Checkbox label={i18n&&i18n.t ? i18n.t('week.thu') : ''} value="4" checked={week.find(t => t == 4) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
									</Form.Field>
									<Form.Field>
										<Checkbox label={i18n&&i18n.t ? i18n.t('week.fri') : ''} value="5" checked={week.find(t => t == 5) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
									</Form.Field>
									<Form.Field>
										<Checkbox label={i18n&&i18n.t ? i18n.t('week.sat') : ''} value="6" checked={week.find(t => t == 6) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
									</Form.Field>
									<Form.Field>
										<Checkbox label={i18n&&i18n.t ? i18n.t('week.sun') : ''} value="7" checked={week.find(t => t == 7) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
									</Form.Field>
								</Form.Group>
							) : 
							(
								<Form.Field id="dateDiv">
									<label>{i18n&&i18n.t?i18n.t('page.schedule.form.label.date'):''}</label>
									<DateTime timeFormat={false} dateFormat="MM-DD" defaultValue={`${data.ioscheduleparam4}-${data.ioscheduleparam3}`} />
								</Form.Field>
							)
						}
						<DeviceSelect i18n={i18n} devs={devs} addSelect={addSelect} showGroup={true} permissions={permissions} querySelectList={querySelectList} page="schedule" />
						<Segment>
							<Header as="h4" content={i18n&&i18n.t ? i18n.t('page.schedule.form.label.selected_device') : ''} />
							<List verticalAlign="middle" divided>
								{
									selected.map((t, idx) => (
										<SelectedItem key={idx} i18n={i18n} data={t} idx={idx} removeSelected={removeSelected} />
									))
								}
							</List>
						</Segment>
						<Grid columns={2}>
							<Grid.Column>
								<Button fluid type="submit" content={i18n&&i18n.t?i18n.t('page.leone.form.button.submit'):''}/>
							</Grid.Column>
							<Grid.Column>
								<Button fluid type="button" content={i18n&&i18n.t?i18n.t('page.leone.form.button.cancel'):''} onClick={() => {onClose()}}/>
							</Grid.Column>
						</Grid>
					</Form>
				</Modal.Content>
			</Modal>
		)
	}
}

export default ScheduleModal;