import {
	observer,
} from 'mobx-react';
import { i18n } from '../../../../../public/i18n';

@observer
export default class Personlist extends React.Component {
	getCheckedFields = () => {
		const {
			store
		} = this.props, {
			head_bar_datas,
			person_datas,
		} = store, {
			form_params
		} = head_bar_datas;

		const doms = {
			"1": <span className="person-name">{i18n.label.name()}</span>,
			"2": <span>{i18n.label.department()}</span>,
			"3": <span>{i18n.label.subcompany()}</span>,
			"4": <span className="person-congratulation" style={{ color: person_datas.form_params["btn-color"] }}>{i18n.label.sendBless()}</span>
		}

		const fields = form_params.fields;

		return fields && fields.sort().reduce((total, cur) => {
			if (cur === "3") {
				fields.includes("2") && total.push("-");
			}
			total.push(doms[cur]);
			return total;
		}, []);

	}

	getContentStyle = () => {
		const {
			store
		} = this.props, {
			body_person_style,
		} = store;

		const style = {};

		Object.keys(body_person_style).map(key => {
			if (["vertical-align"].includes(key)) {
				Object.assign(style, {
					[key]: body_person_style[key]
				})
			}
		});

		return style;
	}

	render() {
		const {
			store
		} = this.props, {
			is_person_selected,
			body_person_style,
			handleCardItemClick,
		} = store;

		return (
			<div
				id="person"
				className={`editor-body-person${is_person_selected ? " selected" : ""}`}
				style={body_person_style}
				onClick={e => handleCardItemClick(e, "person")}
			>
				<div style={this.getContentStyle()} className="body-person-content">
					<p>{this.getCheckedFields()}</p>
				</div>
			</div>
		)

	}
}