import {
	inject,
	observer,
} from 'mobx-react'

import React, {
	Component
} from 'react';

import {
	Row,
	Col,
	Spin,
	Checkbox
} from 'antd';
const toJS = mobx.toJS;

import {
	i18n
} from '../../public/i18n';

@inject('hrmCardItemSet')

@observer
export default class SysShowItems extends Component {
	constructor(props) {
		super(props);
		this.state = {
			cardItemHeight: 26,
			selectedAll: false
		}
	}

	componentDidMount() {
		this.init();
	}

	init() {
		const {
			hrmCardItemSet
		} = this.props;

		hrmCardItemSet.loadTabOneRelatedData();
	}

	selectedAll = (e) => {
		const {
			hrmCardItemSet
		} = this.props, {
			tabOneRelatedData
		} = hrmCardItemSet, {
			data,
		} = tabOneRelatedData;

		const resetChildren = (d) => {
			if (d.children && d.children.length > 0) {
				d.children.map(child => {
					child.value = d.value;
					resetChildren(child);
				})
			}
		}
		data.map(d => {
			d.value = e.target.checked;
			resetChildren(d);
		})
		this.setState({
			selectedAll: e.target.checked,
		})
	}

	onChangeHandle = (e, i, j, k) => {
		const {
			hrmCardItemSet
		} = this.props, {
			tabOneRelatedData
		} = hrmCardItemSet, {
			data,
		} = tabOneRelatedData;

		const calculateCheckedItemCount = (d) => {
			let count = 0;
			if (d.children && d.children.length > 0) {
				d.children.map(child => {
					if (child.value === true)
						count++;
				})
				d.indeterminate = count != d.children.length;
			} else
				d.indeterminate = null;
			return count;
		}

		const resetParent = (p, g) => {
			if (p != null) {
				let count = calculateCheckedItemCount(p);
				if (count == 0) {
					p.value = false;
				} else {
					p.value = true;
				}
				g && resetParent(g);
			}
		}

		const resetChildren = (d) => {
			if (d.children && d.children.length > 0) {
				d.children.map(child => {
					child.value = d.value;
					resetChildren(child);
				})
			}
		}
		if (k != null) {
			data[i].children[j].children[k].value = e.target.checked;
			resetParent(data[i].children[j], data[i])
		} else if (j != null) {
			data[i].children[j].value = e.target.checked;
			resetChildren(data[i].children[j]);
			resetParent(data[i]);
		} else {
			data[i].value = e.target.checked;
			resetChildren(data[i]);
		}
	}

	getStyle(i) {
		const {
			cardItemHeight
		} = this.state, {
			hrmCardItemSet
		} = this.props, {
			cardItemsLength
		} = hrmCardItemSet;

		return toJS(cardItemsLength)[i] > 0 ? {
			paddingTop: toJS(cardItemsLength)[i] * cardItemHeight / 2 - cardItemHeight / 2,
			paddingBottom: toJS(cardItemsLength)[i] * cardItemHeight / 2 - cardItemHeight / 2
		} : {
			paddingTop: cardItemHeight / 2,
			paddingBottom: cardItemHeight / 2
		}
	}

	renderRow = () => {
		const {
			cardItemHeight
		} = this.state, {
			hrmCardItemSet
		} = this.props, {
			tabOneRelatedData
		} = hrmCardItemSet, {
			data,
		} = tabOneRelatedData;

		let arr = [];
		arr.push(
			<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@jw6qlu`}  className='hrm-card-item-head'>
			    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@77nkbe`} span={3}>{i18n.label.matrixDesc()}</Col>
				<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jmxarv`} span={3}>
					<Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@0l0sh4`} 
						checked={this.state.selectedAll} 
						onChange={(e) => this.selectedAll(e)}
					>
						{i18n.label.show()}
					</Checkbox>
				</Col>
				<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@z1puzd`} span={4}>{i18n.label.childItems()}</Col>
				<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@n5hy0n`} span={4}></Col>
			</Row>
		)

		for (let i = 0; i < data.length; i++) {
			arr.push(
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@lo0cpv@${i}`} className='hrm-card-item-content'>
			        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@847xya@${i}`} span={3}>
                        <div style={this.getStyle(i)}>
                            {data[i].label}
                        </div>
			        </Col>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@mw7a5s@${i}`} span={3}>
						<div style={this.getStyle(i)}>
							<Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@cpfw07@${i}`} 
								checked={i==0?true:data[i].value}
								defaultChecked={i==0?true:false}
								disabled={i==0?true:false}
								onChange={(e) => this.onChangeHandle(e, i)}
								indeterminate={data[i].indeterminate}
							/>
						</div>
					</Col>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7b9v70@${i}`} span={4}>
						{
							data[i].children.map((data, j) => (
								<div style={{paddingTop:data.children.length*cardItemHeight/2-9, paddingBottom:data.children.length*cardItemHeight/2-9, lineHeight:cardItemHeight+'px'}}>
									<Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@ru1s9a@${i}`} 
										checked={data.value} 
										onChange={(e) => this.onChangeHandle(e, i, j)} 
										indeterminate={data.indeterminate}
									>
										{data.label}
									</Checkbox>
								</div>
							))
						}
					</Col>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@de5fb5@${i}`} span={4}>
						{
							data[i].children.map((data, j) => (
								data.children.map((data, k) => (
									<div style={k==0?{marginTop:j*cardItemHeight,lineHeight:cardItemHeight+'px'}:{lineHeight:cardItemHeight+'px'}}>
										<Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@mjcp0t@${i}`} 
											checked={data.value} 
											onChange={(e) => this.onChangeHandle(e, i, j, k)} 
											indeterminate={data.indeterminate}
										>
											{data.label}
										</Checkbox>
									</div>
								))
							))
						}
					</Col>
				</Row>
			);
		}
		return arr;
	}

	renderItem = (data) => {
		let arr = [];
		if (Array.isArray(data)) {
			data.map((d, index) => {
				arr.push(
					<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@f1vcs8@${index}`}>
						<Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@pnnufw@${index}`} checked={d.value} onChange={() => this.onChangeHandle(d)}>
							{d.label}
						</Checkbox>
					</Row>
				)
			})
		} else {
			arr.push(
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@czvr0m`}>
					<Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@6qy09u`} checked={data.value} onChange={() => this.onChangeHandle(data)}>
						{data.label}
					</Checkbox>
				</Row>
			)
		}
		return arr;
	}

	render() {
		const {
			hrmCardItemSet
		} = this.props, {
			tabOneRelatedData
		} = hrmCardItemSet, {
			data,
			loading,
		} = tabOneRelatedData;

		return (
			<div>
			    {toJS(data).length > 0 && this.renderRow()} 
			</div>
		)
	}
}