import React from 'react';
import {} from '../../../actions';
import Datetime from 'react-datetime';
import {Container, Segment, Form, Header, Menu, Grid, Table, Input, Button} from 'semantic-ui-react';
import {convertTime} from '../../../tools';

const TimeForm = ({i18n, time, onSubmit}) => {
	return (
		<Form onSubmit={(e,data) => {
				e.preventDefault();
				onSubmit(data.formData);
			}} serializer={e => {
				let json = {};

				json.time = e.querySelector('input').value || '';

				return json;
			}}>
			<Table>
				<Table.Body>
					<Table.Row>
						<Table.Cell width={8} content={i18n && 't' in i18n ? i18n.t('page.system_info.form.label.sysdate') : ''} textAlign="center"/>
						<Table.Cell width={8} textAlign="center" >
							<Datetime dateFormat="YYYY-MM-DD" timeFormat="HH:mm" value={convertTime(time)} input={true} />
						</Table.Cell>
					</Table.Row>
				</Table.Body>
				<Table.Footer>
					<Table.Row>
						<Table.Cell colSpan="2">
							<Button type="submit" fluid content={i18n && 't' in i18n ? i18n.t('page.system_info.form.button.update_time') :''} />
						</Table.Cell>
					</Table.Row>
				</Table.Footer>
			</Table>
		</Form>
	)
}

export default TimeForm;