import React from 'react';
import {Modal, Table, Button, Input, Form} from 'semantic-ui-react';
import ListItem from './AIOListItem';
import AIOForm from './AIOForm';

class AIOModal extends React.Component {
	state = {
		editMode: false,
		data: {},
		type: 0
	}

	openEditField = (type, data = {}) => {
		this.closeEditField(()=>{
			this.setState({
				editMode: true,
				data,
				type
			});
		});
	}
	closeEditField = (cb) => {
		this.setState({
			editMode: false,
			data: {}
		}, ()=>{
			if(cb && typeof cb == 'function') cb()
		});
	}
	submitAIO = (type, data) => {
		data.iouid = this.props.iouid;
		this.props.onSubmit(type, data);
		this.closeEditField();
	}

	render() {
		let {i18n, iouid, open, list, onClose, delAIO} = this.props;

		return (
			<Modal size="large" open={open} onClose={()=>{onClose()}}>
				<Modal.Content className="clearfix">
					<Button basic size="tiny" color="green" floated="right" style={{marginBottom: '10px'}} icon="plus" content="Add Set" onClick={()=>{
							this.openEditField(0);
						}}/>
					<Table size="small">
						<Table.Header>
							<Table.Row>
								<Table.HeaderCell>名稱</Table.HeaderCell>
								<Table.HeaderCell>接口號碼</Table.HeaderCell>
								<Table.HeaderCell>Range(Min-Max)</Table.HeaderCell>
								<Table.HeaderCell>Scale(Min-Max)</Table.HeaderCell>
								<Table.HeaderCell>操作</Table.HeaderCell>
							</Table.Row>
						</Table.Header>
						<Table.Body>
							{
								list.map((t,idx) => (
									<ListItem key={idx} i18n={i18n} data={t} editAIO={this.openEditField} delAIO={delAIO}/>
								))
							}
						</Table.Body>
						<Table.Footer>
							<AIOForm i18n={i18n} open={this.state.editMode} type={this.state.type} data={this.state.data} onSubmit={this.submitAIO} onClose={this.closeEditField}/>
						</Table.Footer>
					</Table>
				</Modal.Content>
			</Modal>
		)
	}
}

export default AIOModal;