import React, { useState, useEffect } from "react";
import { authGet } from "../lib/auth-fetch";
import { Spinner } from "react-bootstrap";
import RelatedVideoThumbnail from "./RelatedVideoThumbnail";

export function RelatedVideosPane() {
	const [isLoading, setIsLoading] = useState(true);
	const [videos, setVideos] = useState([]);

	useEffect(() => {
		getVideos();
	}, []);

	const getVideos = async () => {
		const res = await authGet("http://localhost:3001/dev/listRandomVideos?count=5");

		if (res && res.videos) {
			setVideos(res.videos);
		}
		setIsLoading(false);
	};

	return (
		<>
			<style>{`
				.related-videos-title {
					margin-bottom: 14px;
					color: #8c8fa4;
				}
			`}</style>

			<h5 className="related-videos-title">Related videos</h5>

			{isLoading ? (
				<div className="text-center mt-5">
					<Spinner animation="grow" />
				</div>
			) : (
				videos.map(video => (
					<RelatedVideoThumbnail key={video.VideoHash}
						videoHash={video.VideoHash}
						title={video.Title}
						date={video.VideoDate}
						thumbnailName={video.ThumbnailName}
						duration={video.Duration}
					/>
				))
			)}
		</>
	);
}