import React, { useState } from "react";
import PropTypes from "prop-types";

import {
	Card,
	CardActionArea,
	CardActions,
	CardContent,
	CardMedia,
	Chip,
	IconButton,
	Link,
	Menu,
	MenuItem,
	Typography
} from "@material-ui/core";
import { red } from "@material-ui/core/colors";
import { AccountCircle, Favorite, Link as LinkIcon } from "@material-ui/icons";
import { useHistory } from "react-router-dom";
import NavBar from "./shared/NavBar";

import config from "../config";
// TODO: Replace with API accessed feeds
import feeds from "./dummyData/feeds.json";

function FeedCard({ feed }) {
	const [filled, setFilled] = useState(Math.random() > 0.5);
	let style = {};
	if (filled) {
		style={
			color: red.A400
		};
	}
	return (
		<Card
			key={feed.id}
			style={{
				maxWidth: "600px",
				margin: "20px auto",
			}}
		>
			<CardActionArea>
				<CardMedia
					image={`${config.thumbnailServer}/${feed.id}.jpg`}
					title={feed.title}
					component="img"
				/>
				<CardContent>
					<Typography gutterBottom variant="h5" component="h2">
						{feed.title}
					</Typography>
					<Typography variant="body2" color="textSecondary" component="h2">
						{feed.description}
					</Typography>
					{feed.tags.map((tag, idx) => <Chip label={tag} key={idx} style={{marginRight: "1em"}}/>)}
				</CardContent>
			</CardActionArea>
			<CardActions>
				<IconButton style={style} onClick={() => setFilled(!filled)}>
					<Favorite />
				</IconButton>
				<Link href={feed.url}>
					<IconButton>
						<LinkIcon />
					</IconButton>
				</Link>
			</CardActions>
		</Card>
	);
}

FeedCard.propTypes = {
	feed: PropTypes.object,
};

function App() {
	const history = useHistory();
	const [anchorEl, setAnchorEl] = useState(null);
	const open = Boolean(anchorEl);

	function handleMenu(event) {
		setAnchorEl(event.currentTarget);
	}

	function handleClose() {
		setAnchorEl(null);
	}

	function logout() {
		handleClose();
		history.push("/");
	}

	return (<>
		<NavBar>
			<div>
				<IconButton
					aria-label="account of current user"
					aria-controls="menu-appbar"
					aria-haspopup="true"
					onClick={handleMenu}
					color="inherit"
				>
					<AccountCircle />
				</IconButton>
				<Menu
					id="menu-appbar"
					anchorEl={anchorEl}
					anchorOrigin={{
						vertical: "top",
						horizontal: "right",
					}}
					keepMounted
					transformOrigin={{
						vertical: "top",
						horizontal: "right",
					}}
					open={open}
					onClose={handleClose}
				>
					<MenuItem onClick={handleClose}>Profile</MenuItem>
					<MenuItem onClick={handleClose}>My account</MenuItem>
					<MenuItem onClick={logout}>Logout</MenuItem>
				</Menu>
			</div>
		</NavBar>

		<div>
			{feeds.map(feed => <FeedCard key={feed.id} feed={feed} />)}
		</div>
	</>);
}

export default App;