import React from 'react';
import {toggle_loading, get_network_info, get_system_time, add_dialog_msg,set_network_info, set_system_time} from '../../../actions';
import Datetime from 'react-datetime';
import {Container, Segment, Form, Header, Menu, Grid, Table, Input} from 'semantic-ui-react';
import NetForm from './NetForm';
import TimeForm from './TimeForm';
import TimezoneForm from './TimezoneForm';
import {convertTime,padding} from '../../../tools';

class SysInfo extends React.Component {

	componentDidMount(){
		let {dispatch} = this.props;
		// get network
		dispatch(get_network_info());
		//get time 
		dispatch(get_system_time());
	}

	netSubmit = (data) => {
		let {dispatch, i18n} = this.props;
		if(!data.dhcpMode){
			if(!data.ip || !data.netmask || !data.gateway || !data.dns) return dispatch(add_dialog_msg(i18n && 't' in i18n ? i18n.t('tip.input_empty') : ''));
		}

		dispatch(set_network_info(data.dhcpMode, data.ip, data.netmask, data.gateway, data.dns));
	}

	timeSubmit = (data) => {
		let {dispatch, i18n} = this.props;
		let regex_date = /^([0-9]{4})\-([0-9]{2})\-([0-9]{2})\s([0-9]{1,2}):([0-9]{1,2})$/;
		if(!('time' in data) || !data.time.trim() || !regex_date.test(data.time.trim())) return dispatch(add_dialog_msg(i18n && 't' in i18n ? i18n.t('tip.datetime_format') : ''));
		let m = data.time.trim().match(regex_date);
		if(!m) return dispatch(add_dialog_msg(i18n && 't' in i18n ? i18n.t('tip.datetime_format') : ''));
		// MMDDHHmmYYYY
		let dstr = `${m[2]}${m[3]}${padding(m[4], 2)}${padding(m[5], 2)}${m[1]}`;
		
		dispatch(set_system_time(dstr));
	}

	showDialog = (msg) => {
		let {dispatch} = this.props;
		dispatch(add_dialog_msg(msg));
	}

	render() {
		let {i18n, network, time} = this.props;
		return (
			<Container>
				<Segment>
					<Header as="h2" content={i18n && 't' in i18n ? i18n.t('page.system_info.title.sysinfo') : ''} />
					<NetForm i18n={i18n} network={network} onSubmit={this.netSubmit}/>
				</Segment>
				<Segment>
					<Header as="h2" content="Time Zone" />
					<TimezoneForm i18n={i18n} showDialog={this.showDialog} />
				</Segment>
				<Segment style={{marginBottom: '100px'}}>
					<Header as="h2" content={i18n && 't' in i18n ? i18n.t('page.system_info.title.timeinfo') : ''} />
					<TimeForm i18n={i18n} time={time} onSubmit={this.timeSubmit}/>
				</Segment>
			</Container>
		)
	}
}

export default SysInfo;