import React from 'react';
import styled from 'styled-components';
import storify from '../../UtilitiesFunctions/storify';

const messageStyles = `
	width: 242px;
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 14px;
	background: rgba(0, 0, 0, 0.65);
    color: rgba(255, 255, 255, 0.9);
    padding: 15px 32px;
    min-height : 50px;
`
const transitionTime = 700
const ToastStyles = styled('div')`
	${props=>`
		transition : opacity ${transitionTime/1000}s ease-out;
	    z-index: 9999;
	    position: fixed;
	    opacity : 0;
	    ${props.typeClass=='message' ? messageStyles : ''}
	    ${props.positionClass=='top-right'?
	    	`top: 75px;
	    	right: 30px;
	    	border-radius : 4px;
	    	word-break: break-all;`
	    :  `border-top-left-radius: 4px;
		    border-top-right-radius: 4px;
		    display : flex;
		    justify-content : center;
	    	bottom:0;
		    left:0;
		    right:0;
		    margin:0 auto;
		    word-break: break-all;`}
		 ${
	    	(()=>{
	    		switch (props.visibility){
	    			case 'grown':
	    				return 'opacity:1;'
	    			case 'fading':
	    			case 'born' : 
	    				return 'opacity:0;'
	    			default : 
	    				return 'display:none;'
	    		}
	    	})()
	    }
	`}
`

function DumbToast (props){
	const {storifyActions:{growToast,fadeToast,closeToast},storifyState:{visibility,data},...rest} = props
	if(visibility=='born'){
		var {message, washoutTime, component, showClose, position} = data
		setTimeout(growToast,transitionTime)
		washoutTime = washoutTime && washoutTime>0 && washoutTime || 5000
		const fadeToastOuter = ()=>{
			fadeToast()
			setTimeout(closeToast,transitionTime)
		}
		!showClose && setTimeout(fadeToastOuter , washoutTime)
	}
	var typeClass = visibility && data ? !data.component && data.message && 'message' || 'component' : ''
	var positionClass = data && data.position || 'top-right'
	var content = data && (data.component && (()=>{ var Comp=data.component; return <Comp {...data}/>})() || data.message) || ''
	return (
			<ToastStyles
				typeClass={typeClass} 
				positionClass={positionClass} 
				visibility={visibility}
			>
				{content}
			</ToastStyles>
		)
	}

const actions = (store,render) => ({
	openToast : data => {
		store.data=data 
		store.visibility='born'
		render()
	},
	growToast : () => {store.visibility='grown'
						render()},
	fadeToast : () => {store.visibility='fading'
        				render()},
	closeToast : () => {store.visibility='gone'
        				render()}
})

const {Wrap, openToast} = storify(DumbToast, actions, {})
const Toast = Wrap
export { Toast , openToast }


/*
var {visibility,data} = props.getToastStore()
	console.log(visibility)
	var timer1,timer2
	if(visibility=='born'){
		var {message, washoutTime, component, showClose, position} = data
		setTimeout(growToast,transitionTime)
	}
	var growToast = _.debounce(()=>{
		if(timer1) clearTimeout(timer1)
		if(timer2) clearTimeout(timer2)
		props.matureToast()
		washoutTime = washoutTime && washoutTime>0 && washoutTime || 5000
		const fadeToast = ()=>{
			props.fadeToast()
			timer1 = setTimeout(props.killToast,transitionTime)
		}
		if(!showClose) timer2=setTimeout(fadeToast , washoutTime)
	},20)
*/