import React from "react";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import clsx from "clsx";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardMedia from "@material-ui/core/CardMedia";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
import Collapse from "@material-ui/core/Collapse";
import Avatar from "@material-ui/core/Avatar";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import { red } from "@material-ui/core/colors";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import WallOfBeers from "../images/wall-of-beers.jpg";

const useStyles = makeStyles((theme) => ({
	root: {
		width: 800,
		height: "100%",
		margin: 15,
		[theme.breakpoints.down("sm")]: {
			width: 500,
		},
		[theme.breakpoints.down("xs")]: {
			width: 300,
		},
	},
	media: {
		height: 120,
		// paddingTop: "56.25%", // 16:9
	},
	expand: {
		transform: "rotate(0deg)",
		marginLeft: "auto",
		transition: theme.transitions.create("transform", {
			duration: theme.transitions.duration.shortest,
		}),
	},
	expandOpen: {
		transform: "rotate(180deg)",
	},
	avatar: {
		backgroundColor: red[500],
	},
}));

export default function Details(props) {
	const classes = useStyles();
	const theme = useTheme();
	const [expanded, setExpanded] = React.useState(false);

	const handleExpandClick = () => {
		setExpanded(!expanded);
	};

	return (
		<Card className={classes.root}>
			<CardHeader
				title={props.name}
				subheader={`${props.city}, ${props.state}`}
			/>
			{/* <CardMedia className={classes.media} image={WallOfBeers} title="beer" /> */}
			<CardContent>
				<Typography variant="body2" color="textSecondary" component="p">
					Website:{" "}
					{props.website ? (
						<a href={props.website} target="blank">
							{props.website}
						</a>
					) : (
						"N/A"
					)}
				</Typography>
				<Typography variant="body2" color="textSecondary" component="p">
					Address:{" "}
					{props.street
						? `${props.street} - ${props.city}, ${props.state}`
						: "N/A"}
				</Typography>
			</CardContent>
			{/* <CardActions disableSpacing>
				<IconButton aria-label="add to favorites">
					<FavoriteIcon />
				</IconButton>
				<IconButton aria-label="share">
					<ShareIcon />
				</IconButton>
				<IconButton
					className={clsx(classes.expand, {
						[classes.expandOpen]: expanded,
					})}
					onClick={handleExpandClick}
					aria-expanded={expanded}
					aria-label="show more"
				>
					<ExpandMoreIcon />
				</IconButton>
			</CardActions> */}
			{/* <Collapse in={expanded} timeout="auto" unmountOnExit>
				<CardContent>
					<Typography paragraph>Brewery info here!</Typography>
				</CardContent>
			</Collapse> */}
		</Card>
	);
}
