import React, { CSSProperties, useState } from 'react'
import { MediaInfoType } from '../../../api/models/Types'

export type MediaInfoModel = {
    type: MediaInfoType,
    data: string,
}

export interface IMediaInfoComponentProps{
	mediaInfo?: MediaInfoModel | null,
	height?: string | null,
	width?: string | null,
	aspectRatio?: number | null,
	classes?: string | null,
	onClick?: () => void
}

export default function MediaInfoComponent(props: IMediaInfoComponentProps) {
	const noImage = 'https://soneil.com/wp-content/uploads/2018/08/No-Image-Available-01-e1534180482174.jpg';
	const errorImage = 'https://i.pinimg.com/originals/fe/df/71/fedf7125acf620e856b6d09ef44eee51.gif';
	const [imgSrc, setImgSrc] = useState<string | undefined>('')
	React.useEffect(() => setImgSrc(props.mediaInfo?.data), [props]);
	const style: CSSProperties = {
		aspectRatio: props.aspectRatio ?? 1,//1 / 1,
		// objectFit: 'cover'
		objectFit: 'contain'
	};
	if (props.width != null && props.width.length >= 0){
		style.width = props.width == null || props.width.length == 0 ? '100%' : props.width;
	}
	if (props.height != null && props.height.length >= 0){
		style.height = props.height == null || props.height.length == 0 ? '100%' : props.height;
	}
	if (style.height == null && style.width == null){
		style.width = '100%';
	}

	const role = props.onClick != undefined && props.onClick != null ? 'button' : '';
	const onClick = () => props.onClick?.();
	if (props.mediaInfo == null) return ( <img className={props.classes ?? ''} src={noImage} role={role} onClick={onClick} style={style} /> );
	switch (props.mediaInfo.type) {
		case MediaInfoType.Image:
			return (
				<img className={props.classes ?? ''} src={imgSrc ?? ''} onError={() => setImgSrc(errorImage)}
				role={role}
				onClick={onClick}
				style={style}
				/>
			  )
		case MediaInfoType.Video:
			
			break;
		case MediaInfoType.Link:
			
			break;
		case MediaInfoType.OtherFile:
			
			break;
		default:
			throw new Error('Not implementet media type'); 
			//break;
	}
}
