import {
    observer,
} from 'mobx-react';
import Basic from "./Basic.js";
import Revoke from "./Revoke.js";
import Lock from "./Lock.js";
import Fields from "./Fields.js";
import Buttons from "./Buttons.js";
import "../../style/head.less";

const Divider = () => {
	return (
		<div class="ant-divider ant-divider-vertical" role="separator" />
	)
}

@observer
export default class Head extends React.Component{
	render() {
		const {
			store
		} = this.props, {
			is_head_bar_show,
			setHeadBarStatus,
		} = store;

		return (
			<div className="birth-editor-head">
				<div class={`editor-head-bar${is_head_bar_show ? "" : " bar-hide"}`}>
					<Basic ecId={`${this && this.props && this.props.ecId || ''}_Basic@vrrror`} store={store}/>
					<Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@sxiv0l`} />
					<Revoke ecId={`${this && this.props && this.props.ecId || ''}_Revoke@rpdyqc`} store={store}/>
					<Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@3oios9`} />
					<Lock ecId={`${this && this.props && this.props.ecId || ''}_Lock@pzccal`} store={store}/>
					<Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@u7rv2l`} />
					<Fields ecId={`${this && this.props && this.props.ecId || ''}_Fields@wgbor4`} store={store}/>
					<Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@xg14sg`} />
					<Buttons ecId={`${this && this.props && this.props.ecId || ''}_Buttons@8s5j2z`} store={store}/>
				</div>
				{
					!is_head_bar_show && (
						<div class="bar-hide-icon" onClick={() => setHeadBarStatus(true)}>
							<i className="icon-coms-organization-down" />
						</div>
					)
				}
			</div>
		);
	}
}