ImageArea.tsx

import * as React from'react';
import {Component} from'react';
import styled, { css } from 'react-emotion';
import { StyledComponentProps } from "../../types"
import IconW from "../Wrappers/IconW";
import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
import { faChevronLeft } from "@fortawesome/pro-regular-svg-icons";


interface Props {
	href: string
	photoURLs: Array<any>
}

interface State {
	isHovered: boolean
	photoIndex: number
	height?: number
	width?: number
	aboutToChangeImg: boolean
}

function waitFor(periodInMS:number) { 
	return new Promise(resolve => {
	  setTimeout(() => {
		 resolve();
	  }, periodInMS);
	});
 }

const TRANSITION_PERIOD_IN_MS = 110

class ImageArea extends Component<Props, State> {

	state = {
		isHovered: false, 
		photoIndex: 0, 
		aboutToChangeImg: false
	}
	myRef = null

	componentDidMount = () => {
		this.setState({
			//@ts-ignore	
			height: this.myRef.clientHeight, 
			//@ts-ignore
			width: this.myRef.clientWidth 
		})
	}

	onMouseEnter = () => {
		console.log("mouseENTER")
		this.setState({isHovered:true})
	}
	onMouseLeave = () => {
		console.log("mouseLEFTTTTT")
		this.setState({isHovered:false})
	}
	onFwd = async () => {
		this.setState({aboutToChangeImg:true})
		await waitFor(TRANSITION_PERIOD_IN_MS)
		this.setState( 
			(prevState:State) => ({
			photoIndex: (prevState.photoIndex===this.props.photoURLs.length-1)? 0: prevState.photoIndex+1, 
			aboutToChangeImg:false
		}) ) 

	}
	onBack = () => {
		this.setState( (prevState:State) => ({
			photoIndex: (prevState.photoIndex===0)? this.props.photoURLs.length-0.5 : prevState.photoIndex-1
		}) ) 
	}
	onArrowClick = (e:React.MouseEvent) => {
		e.preventDefault()
	}
	onHelperClick = (e:React.MouseEvent) => {
		console.log("clicked!")
		e.preventDefault()
	}
	getLinearGradient = (deg:number) => css`
		background: linear-gradient(${deg}deg, rgba(50,50,50,0), rgba(50,50,50,0.19));
	`

	render(){

		const { photoURLs, href } = this.props

		return (
			<LinkW 
				href={href}
				stl={css` 
					background-image: url(${photoURLs[this.state.photoIndex]});
					opacity: ${this.state.aboutToChangeImg? 0.4 : 1};
					//@ts-ignore
					height: ${0.6*this.state.width}px;
				`} 
				onMouseEnter={this.onMouseEnter}
				onMouseLeave={this.onMouseLeave}
				innerRef={input => {
					this.myRef = input
				}}
			>
				{
					(this.state.isHovered && this.props.photoURLs.length>1) && (
						// <FrontOverlay
						// 	stl={css`
						// 		//@ts-ignore
						// 		width: ${this.state.width}px;
						// 		//@ts-ignore
						// 		height: ${this.state.height}px;
						// 	`}
						// >
						<React.Fragment>
							<ArrowArea
								onMouseDown={this.onBack}
								onClick={this.onArrowClick}
								stl = {this.getLinearGradient(270)}
							>
								<IconW 
									icon={faChevronLeft} 
									stl = {css`
										margin: auto 10px; 
										color: white; 
										/* font-size: 50px;  */
										//@ts-ignore
										font-size: ${this.state.width/12}px; 
										/* margin-right: this.state.w */
									`}
								/>
							</ArrowArea>

							<ArrowArea
								onMouseDown={this.onFwd}
								onClick={this.onArrowClick}
								stl = {css`
									flex-direction: row-reverse; 
									${this.getLinearGradient(90)}
									`
								}
							>
								<IconW 
									icon={faChevronRight} 
									stl = {css`
										margin: auto 10px; 
										color: white; 
										//@ts-ignore
										font-size: ${this.state.width/12}px;
									`}
								/>
							</ArrowArea>
							<Hidden>
								{
									this.props.photoURLs.map( 
										(photoUrl) => <img src={photoUrl} key={photoUrl}/>
									)
								}
							</Hidden>
						</React.Fragment>
						// </FrontOverlay>
					)
				}

			</LinkW>
		)

	}
}

const LinkW = styled("a")`
		border-radius:5px;
		background-size: cover;
		background-position: top center;
		margin: 0 0 7px; 
		position: relative; 
		${ ({stl}:StyledComponentProps) => stl  }
		overflow: hidden; 
		transition: opacity ${TRANSITION_PERIOD_IN_MS/1000}s ease-in;
		display: flex;
		justify-content: space-between;
	`
	
// const FrontOverlay = styled("div")`
// 		position: absolute;
// 		display: flex; 
// 		justify-content: space-between;
// 		${ ({stl}:StyledComponentProps) => stl }
// 		top: 0; 
// `

const Hidden = styled("div")`
		display: none; 
`

const ArrowArea = styled("div")`
		flex-basis: 25%; 
		height: 100%; 
		${ ( {stl}:StyledComponentProps ) => stl}
		display: flex; 
`

export default ImageArea