import React from 'react'
import styled from 'styled-components';
import {transitionTime} from './constants'

export const TopItem = ({index,changeDrawer,renderItem,renderDrawer,onClick}) => {
	return (
		<div onClick={()=>{
			changeDrawer('TOP',index)
			if(onClick) onClick(()=>changeDrawer(null))
		}}>
		{renderItem()}
		</div>
	)
}

export const BottomItem = ({index,changeDrawer,renderItem,renderDrawer,onClick}) => {
	return (
		<div onClick={()=>{
			changeDrawer('BOTTOM',index)
			if(onClick) onClick(()=>changeDrawer(null))
		}}>
		{renderItem()}
		</div>
	)
}

/* !!! Transitions not working !!! */

const MainItemStyles = styled.div`${({visibleDrawer,primaryHeight,primaryWidth,sec})=>`
	.main{
		display : flex;
		position : relative;
		${primaryHeight?`
			height : ${primaryHeight}px;
			width : ${primaryWidth}px;
		` :''}
		transition: all ${transitionTime/1000}s ease; 
		.primary{
			z-index : 2;
		}
		.secondary{
			overflow : hidden;
			position : absolute;
			visibility : ${visibleDrawer=='MAIN'?'visible':'hidden'};
			${primaryHeight?`
				height : ${primaryHeight}px;
				left : ${primaryWidth-sec.scrollWidth}px;
			` :''}
			transition: all ${transitionTime/1000}s ease;
		}
	}
`}`

export class MainItem extends React.Component{

	primaryRef = el => {
		if(el){
			this.primary = el
		}
	}

	secRef = el => {
		if(el){
			this.sec = el
		}
	}

	mainRef = el => {
		if(el){
			this.main = el
		}
	}

	render(){
		const {actionOn,visibleDrawer,changeDrawer,renderItem,renderDrawer,onClick} = this.props
		
		// if(this.primary){
			// primaryHeight = this.primary.firstChild.scrollHeight
			// var el = window.getComputedStyle(this.primary,null)
			// debugger
			// primaryHeight = el.height.slice(0,-2)-el.paddingTop.slice(0,-2)-el.paddingBottom.slice(0,-2)
			// //.getPropertyValue('height').slice(0,-2)
			// debugger
		// }
		
		if(!this.isOpen && visibleDrawer=='MAIN'){
			this.primaryHeight = this.primary.scrollHeight
			requestAnimationFrame(()=>{
				this.sec.style.height = this.sec.scrollHeight+'px'
				this.sec.style.left = this.primary.scrollWidth+'px'
				this.main.style.height = this.sec.scrollHeight+'px'
				this.main.style.width = this.sec.scrollWidth+this.primary.scrollWidth+'px'
				setTimeout(()=>{
					this.sec.style.position = 'static'
					this.sec.style.height = 'auto'
					this.main.style.height = 'auto'
				},transitionTime)
				// requestAnimationFrame(()=>{

				// })
			})
		}
		if(this.isOpen && visibleDrawer!='MAIN'){
			requestAnimationFrame(()=>{
				this.sec.style.position = 'absolute'
				this.sec.style.height = this.primaryHeight+'px'
				this.sec.style.left = this.primary.scrollWidth-this.sec.scrollWidth+'px'
				this.main.style.height = this.primaryHeight+'px'
				this.main.style.width = this.primary.scrollWidth+'px'
			})
		}
		this.isOpen = visibleDrawer=='MAIN'
		return(
			<MainItemStyles 
				visibleDrawer={visibleDrawer} 
				primaryHeight={this.primaryHeight||0}
				primaryWidth={this.primary &&this.primary.scrollWidth||0} 
				sec={this.sec}>
				<div className='main' ref={this.mainRef}>
					<div ref={this.primaryRef} className='primary' 
						onClick={()=>{
							if(onClick) onClick(()=>changeDrawer(null))
							if(actionOn=='click') changeDrawer('MAIN')
						}}
						onMouseOver={
							()=>{
								if(actionOn=='hover' && visibleDrawer!='MAIN') changeDrawer('MAIN')
							}
						}
					>
						{renderItem()}
					</div>
					<div className='secondary' ref={this.secRef}>{renderDrawer(()=>changeDrawer(null))}</div>
				</div>
			</MainItemStyles>
		)
	}
}

export const MainClickItem = props => <MainItem {...props} actionOn='click' />

export const MainHoverItem = props => <MainItem {...props} actionOn='hover'/>

export const Item = ({renderItem,onClick,changeDrawer}) => <div onClick={()=>{
	if(onClick){
		onClick(()=>changeDrawer(null))
	}
}}>{renderItem()}</div>