import React from 'react';
import {Container, Table, Button, Segment, Modal, Item, Label} from 'semantic-ui-react';
import ListItem from './ListItem';
import GroupModal from './GroupModal';

class IOGroupPage extends React.Component {
	state = {
		modal: false,
		modalType: 0,
		modalData: {},
		modalSelect: [],
		showItem: false,
		items: []
	}

	showGroupItems = (items = []) => {

		this.setState({
			showItem: true,
			items
		})
	}
	closeItemModal = () => {
		this.setState({
			showItem: false,
			items: []
		})
	}

	openModal = (type, data= {}, items=[]) => {
		this.props.clearSelectList();
		this.setState({
			modal: true,
			modalType: type,
			modalData: data,
			modalSelect: items
		})
	}
	closeModal = () => {
		this.setState({
			modal: false,
			modalData: {},
			modalSelect: []
		})
	}
	submitModal = (type, data ={}) => {
		let {i18n} = this.props;
		if(!data.name || (type == 1 && !data.id)) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');

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

		if(type == 1) {
			this.props.editIOGroup(json);
		}else {
			this.props.addIOGroup(json);
		}

		this.closeModal()
	}

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

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

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

	delIOGroup = (id) => {
		if(!id) return ;
		this.props.delIOGroup({id});
	}

	componentDidMount() {
		this.props.getIOGroupList();
		
		this.props.router.setRouteLeaveHook(this.props.route, () => {
			this.props.clearList();
		})
	}

	render () {
		let {i18n, list, dos, leones, permissions, devs} = this.props;
		return (
			<Container>
				<Segment className="clearfix">
					<Button basic type="button" color="green" floated="right" style={{marginBottom: '15px'}} icon="plus" content={i18n&&i18n.t ? i18n.t('page.iogroup.table.button.add') : ''} onClick={() => {this.openModal(0)}} />
					<Table>
						<Table.Header>
							<Table.Row>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.iogroup.table.operate') : ''}</Table.HeaderCell>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.iogroup.table.name') : ''}</Table.HeaderCell>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.iogroup.table.groups') : ''}</Table.HeaderCell>
							</Table.Row>
						</Table.Header>
						<Table.Body>
							{
								list.map((t, idx) => <ListItem i18n={i18n} key={idx} data={t} dos={dos} les={leones} openItemModal={this.showGroupItems} onDelete={this.delIOGroup} openModal={this.openModal}/>)
							}
						</Table.Body>
					</Table>
				</Segment>
				<ShowGroupItem open={this.state.showItem} items={this.state.items} onClose={this.closeItemModal} />
				<GroupModal i18n={i18n} 
					open={this.state.modal} 
					data={this.state.modalData} 
					type={this.state.modalType} 
					onClose={this.closeModal} 
					onSubmit={this.submitModal} 
					permissions={permissions} 
					devs={devs} 
					selected={this.state.modalSelect} 
					removeSelect={this.removeSelect} 
					addSelect={this.addSelect}
					querySelectList={this.querySelectList} />
			</Container>
		)
	}
}

const ShowGroupItem = ({i18n,open,items, onClose}) => {

	return (
		<Modal open={open} onClose={() => {onClose()}} size="small">
			<Modal.Content>
				{
					items.map((t, idx) => <Item key={idx}><Label content={t.type}/>{t.name}</Item>)
				}
			</Modal.Content>
		</Modal>
	)
}

export default IOGroupPage;