import React, { useState, useEffect } from "react";
import { Link } from "@reach/router";
import styled from "styled-components";

function Movie(props) {
	const [movie, setMovie] = useState({});
	const [error, setError] = useState("");

	const movieId = props.movieId;

	useEffect(() => {
		const main = async () => {
			try {
				const Token = window.localStorage.getItem("Token");
				const response = await fetch(
					"https://mkr.thefeathers.in/movie/" + movieId,
					{
						method: "GET",
						headers: new Headers({ Authentication: Token }),
					},
				);
				const data = await response.json();

				if (data.success) {
					setError("");
					setMovie(data.data);
				} else {
					setError("Error occured. " + data.msg || "");
				}
			} catch (e) {
				setError("Error occured. " + e.message || "");
			}
		};

		main();
	}, [movieId]);

	return (
		<div>
			{error ? <p>{error}</p> : ""}
			<img src={movie.poster}></img>
			{[
				movie.movieId,
				movie.title,
				movie.overview,
				movie.release,
				movie.watchStatus,
				movie.rating,
			].map(value => {
				return <div key={value}>{value}</div>;
			})}
			<div>
				Rating 
				<select>
					{["Select",1,2,3,4,5,6,7,8,9,10].map(r=> (
						<option value={String(r)} 
						selected={
							movie.rating === String(r) ? true : false
						}>
							{r}
						</option>
						))}
				</select>
			</div>
		</div>
	);
}

export default Movie;