import React from 'react';
import {Modal, Grid, Label, Button, Table, Checkbox} from 'semantic-ui-react';
import ScanItem from './SelectScanItem';

class SelectScan extends React.Component {

	state = {
		list: [],
		page: 1,
		per: 10,
		totalpage: 1
	}

	componentWillReceiveProps(nextProps) {
		if(this.state.list.length !== nextProps.list) {
			let totalpage = Math.ceil( nextProps.list.length / this.state.per ) || 1;
			this.setState({
				list: nextProps.list,
				totalpage
			});
		}
	}

	onItemSelect = (idx, checked) => {
		let list = [...this.state.list];
		if(list[idx]){
			list[idx].checked = checked;
			this.setState({
				list
			});
		}
	}

	changePage = (p = 1) => {
		p = p < 1 ? 1 : p;
		p = p > this.state.totalpage ? this.state.totalpage : p;
		this.setState({
			page: p
		});
	}

	calSelect = () => {
		let a = this.state.list.filter(t => t.checked);
		return a.length;
	}

	checkAllSelect = (s, e) => {
		let arr = this.state.list.slice(s,e);
		let tmp = arr.filter(t => !t.checked);
		if(tmp.length > 0) return false;
		return true;
	}

	changeAllCheck = (s, e, chk) => {
		let arr = [...this.state.list];
		for(let i=s; i<e; i++){
			arr[i].checked = chk;
		}
		this.setState({
			list: arr
		});
	}

	submitData = () => {
		let json = {
			id: []
		};
		for(let i in this.state.list) {
			if(this.state.list[i].leonelistuid) json.id.push(this.state.list[i].leonelistuid)
		}

		this.props.onSubmit(json);
	}

	render () {
		let {i18n, onClose} = this.props;

		let sIdx = this.state.per * (this.state.page - 1);
		let eIdx = sIdx + this.state.per;
		eIdx = eIdx > this.state.list.length ? this.state.list.length : eIdx;
		let arr = this.state.list.slice(sIdx, eIdx);

		return (
			<Modal open={this.state.list.length > 0 ? true : false} closeOnDimmerClick={false} >
				<Modal.Header content={i18n&&i18n.t ? i18n.t('page.leone.form.title.select-dev') : ''} />
				<Modal.Content>
					<div className="clearfix">
						<Label content={`${i18n&&i18n.t?i18n.t('page.leone.form.label.select_num') : ''} ${this.calSelect()}`} basic color="blue"/>
						<div style={{float: 'right'}}>
							<Button type="button" content={i18n&&i18n.t?i18n.t('page.leone.form.button.prevpage') : ''} onClick={() => {this.changePage(this.state.page - 1)}} size="tiny" basic color="blue"/>
							<Label basic content={`${this.state.page} / ${this.state.totalpage}`}/>
							<Button type="button" content={i18n&&i18n.t?i18n.t('page.leone.form.button.nextpage') : ''} onClick={() => {this.changePage(this.state.page + 1)}} size="tiny" basic color="blue"/>
						</div>
					</div>
					<Table>
						<Table.Header>
							<Table.Row>
								<Table.HeaderCell><Checkbox checked={this.checkAllSelect(sIdx, eIdx)} onChange={(e,d)=>{ this.changeAllCheck(sIdx, eIdx, d.checked) }} /></Table.HeaderCell>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.leone.form.label.name') : ''}</Table.HeaderCell>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.leone.form.label.name') : ''}</Table.HeaderCell>
							</Table.Row>
						</Table.Header>
						<Table.Body>
							{
								arr.map((t, idx) => <ScanItem key={idx} i18n={i18n} data={t} idx={idx} onChange={this.onItemSelect}/>)
							}
						</Table.Body>
					</Table>
					<Grid columns={2}>
						<Grid.Column>
							<Button content={i18n&&i18n.t ? i18n.t('page.leone.form.button.submit') : ''} fluid onClick={() => {this.submitData()}}/>
						</Grid.Column>
						<Grid.Column>
							<Button content={i18n&&i18n.t ? i18n.t('page.leone.form.button.cancel') : ''} fluid onClick={() => {onClose()}} />
						</Grid.Column>
					</Grid>
				</Modal.Content>
			</Modal>
		)	
	}
}

export default SelectScan;