import React from 'react';
import {Container, Segment, Form, Button, List, Input} from 'semantic-ui-react';
import DeviceSelect from '../../Common/DeviceSelect';
import SelectedItem from './SelectedItem';

class IOCmdPage extends React.Component {
	state = {
		showTemp: false,
		selectItem: []
	}

	querySelectList = (type) => {
		this.props.clearSelectList();
		if(!type) return ;
		this.props.getSelectList({type});
	}

	checkShowTemp = (cmd) => {
		this.setState({
			showTemp: cmd == 2 ? true : false
		})
	}

	addSelect = (data) => {
		let tmp = this.state.selectItem.filter(t => t.id == data.id);
		if(tmp.length > 0) return ;
		this.setState({
			selectItem: [...this.state.selectItem, data]
		});
	}

	removeSelect = (idx) => {
		this.state.selectItem.splice(idx, 1);
		this.setState({
			selectItem: this.state.selectItem
		})
	}

	runCmd = (data) => {
		let {i18n} = this.props;
		if(!data.cmd) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.select_action') : '');
		if(data.cmd == 2){
			if(!data.temp) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty_temp') : '');
			if(!(data.temp > 16 && data.temp < 30)) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.temp_format') : '');

			data.cmd = `${data.cmd} ${data.temp}`;
		}

		let ids = this.state.selectItem.map(t => t.id);
		
		let json = {
			...data,
			devs: ids.join(',')
		}

		this.props.runCmd(json);

		this.setState({
			showTemp: false,
			selectItem: []
		}, ()=>{
			this.props.clearSelectList();
		})
	}

	componentDidMount() {
		this.props.clearSelectList();
	}

	render() {
		let {i18n,permissions,devs} = this.props;
		let actlist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.action_list') : [];
		return (
			<Container>
				<Segment>
					<Form onSubmit={(e,d) => {
							e.preventDefault();
							this.runCmd(d.formData);
						}} serializer={e => {
							let json = {
								cmd: '',
								temp: ''
							};
							let sel = e.querySelector('select[name="cmd"]');
							if(sel && 'value' in sel) json.cmd = sel.value;
							let temp = e.querySelector('input[name="temp"]');
							if(temp && 'value' in temp) json.temp = temp.value;

							if(e.reset) e.reset();

							return json;
						}}>
						<Form.Field>
							<label>{i18n&&i18n.t ? i18n.t('page.iocmd.form.label.action') : ''}</label>
							<select name="cmd" onChange={e => {
								this.checkShowTemp(e.target.value);
								}}>
								<option value="">{i18n&&i18n.t ? i18n.t('select.action') : ''}</option>
								{
									actlist.map((t,idx) => <option key={idx} value={t.cmd}>{t.name}</option>)
								}
							</select>
						</Form.Field>
						{
							this.state.showTemp ? 
							(<Form.Field>
								<Input name="temp" label={i18n&&i18n.t ? i18n.t('page.iocmd.form.label.temp') : ''} />
							</Form.Field>) : null
						}
						<DeviceSelect i18n={i18n} devs={devs} page="iocmd" showGroup={true} permissions={permissions} querySelectList={this.querySelectList} addSelect={this.addSelect} />
						<Form.Field>
							<label>{i18n&&i18n.t ? i18n.t('page.iocmd.form.label.selected_device') : ''}</label>
							<Segment>
								<List divided relaxed={true}>
									{
										this.state.selectItem.map((t,idx) => <SelectedItem key={idx} i18n={i18n} data={t} idx={idx} removeSelect={this.removeSelect} />)
									}
								</List>
							</Segment>
						</Form.Field>
						<Button type="submit" fluid content={i18n&&i18n.t ? i18n.t('page.iocmd.form.button.submit') : ''} />
					</Form>
				</Segment>
			</Container>
		)
	}
}

export default IOCmdPage;