const Item = React.forwardRef((props, ref) =>
	<div ref={ref} className={classNames("item",{dragging:props.position})} style={props.position ? props.position : {}}>
		<div className="underlying"></div>
		<div className={classNames("base",{hidden:props.hidden})}>
			<div className="space">{props.data.x}</div>
			<div className="grab" onMouseDown={props.dragging ? () => {} : () => props.onMouseDown()}>
				<i className="far fa-ellipsis-v"/>
			</div>
		</div>
	</div>
)

class Items extends React.Component {
	constructor(props) {
		super(props)
		this.state = {predrag:-1, dragging:-1, items: props.items.map((x,i) => ({ref:null, data:x, id:i, top:0})), position:{left:0, top:0}, offset:{left:0, top:0}}
		console.log(this.state.items)
		document.addEventListener("mouseup", this.handleMouseUp)
		document.addEventListener("mousemove", this.handleMouseMove)
	}
	handleMouseDown = (e,idx) => {
		this.setState({items:(this.state.items.map(x => ({ref:React.createRef(), data:x.data, id:x.id, top:0}))), predrag:idx})
	}
	handleMouseUp = () => {
		this.setState({items:(this.state.items.map(x => ({ref:null, data:x.data, id:x.id, top:0}))),predrag:-1, dragging:-1})
		//this.setState({items:(this.state.items.map(x => ({ref:React.createRef(), data:x.data, id:x.id, top:0})))})
		console.log(this.state.items.map(x => x.id))
	}
	handleMouseMove = e => {
		if (this.state.predrag == -1) return;
		//let offset = this.state.offset
		let {pageX, pageY} = e
		let pos = this.state.items[this.state.predrag].ref.current.getBoundingClientRect()
		if(this.state.predrag != this.state.dragging) {
			let offset = {left:pageX-pos.left+32,top:pageY-pos.top+32}
			console.log(pos)
			this.setState({dragging:this.state.predrag, position:{left:pageX-offset.left, top:pageY-offset.top}, offset})
		} else {
			let items = this.state.items.sort((a,b) => a.top - b.top).map(x => {
				let itm = x
				x.top = x.id == this.state.dragging ? pageY: x.ref.current.getBoundingClientRect().top + x.ref.current.getBoundingClientRect().height/2
				return x
			})
			this.setState({items, position:{left:pageX-this.state.offset.left, top:pageY-this.state.offset.top}})
		}
		console.log(this.state.dragging)
		//console.log({pageX, pageY}, pos)
		//this.state.items.forEach(a => console.log(a.id,this.state.predrag, (a.id == this.state.predrag ? this.state.offset.top : a.ref.current.getBoundingClientRect().top)));
		//console.log(this.state.items.sort((a,b) => (a.id == this.state.predrag ? this.state.offset.top : a.ref.current.getBoundingClientRect().top) - (b.id == this.state.predrag ? this.state.offset.top : b.ref.current.getBoundingClientRect().top)).map(x => x.ref.current.getBoundingClientRect().top))
	}
	render() {
		return (
			<div id="items">
				{this.state.dragging != -1 &&
					<Item data={this.state.items.find(x => x.id == this.state.dragging).data} hidden={false} position={this.state.position} />
				}
				{this.state.items.map(x =>
					<Item data={x.data} ref={x.ref} hidden={this.state.dragging == x.id} onMouseDown={e => this.handleMouseDown(e,x.id)}/>
				)}
			</div>
		)
	}
}

class App extends React.Component {
	constructor(props) {
		super(props)
	}
	render() {
		return (
			<>
				<Items items={[...new Array(5).keys()].map(x => ({x}))}/>
			</>
		)
	}
}

ReactDOM.render(<App />, document.getElementById("app"));