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 [rating, setRating] = useState("");
	const [watchStatus, setWatchStatus] = useState("");

	const movieId = props.movieId;

	const handleRating = async e => {
		e.preventDefault();
		setRating(e.target.value);
		setWatchStatus(e.target.value);
		const Token = window.localStorage.getItem("Token");

		try {
			const response = await fetch("https://mkr.thefeathers.in/movie/" + movieId, {
				method: "POST",
				headers: new Headers({ "content-type": "application/json", Authentication: Token }),
				body: JSON.stringify({
					watchStatus: watchStatus,
					rating: rating,
				}),
			});
			const data = await response.json();

			console.log(rating);
			console.log(watchStatus);

		} catch (e) {
			setError(e.message);
		}
	};
	

	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 defaultValue={rating}
                    onChange={handleRating}>
					{["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>
				Watch Status 
				<select defaultValue={watchStatus}
                    onChange={handleRating}>
					{["Select","PLANNED","IN_PROGRESS","COMPLETED"].map(r=> (
						<option value={String(r)} 
						selected={
							movie.watchStatus === String(r) ? true : false
						}>
							{r}
						</option>
						))}
				</select>
			</div>
		</div>
	);
}

export default Movie;