import { useEffect, useState } from 'react'
import classNames from 'classnames'
import { withStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import Fade from '@material-ui/core/Fade'
import Icon from '@material-ui/core/Icon'
import IconButton from '@material-ui/core/IconButton'
import Popper from '@material-ui/core/Popper'
import Typography from '@material-ui/core/Typography'
import { createFavorite, deleteFavorite } from 'client/src/api'
import TextLink from 'client/components/TextLink'

const styles = theme => ({
  heartContainer: {
    marginLeft: theme.spacing.unit,
  },
  favoriteCount: {
    paddingLeft: theme.spacing.unit,
    paddingRight: theme.spacing.unit / 2,
    display: 'inline',
  },
  userFavorite: {
    color: theme.palette.primary.main,
  },
  white: {
    color: theme.palette.common.white,
  },
})

const handleFavorite = (photoId, currentUserFavorite, user_id, updateShowPopper, updatePopperEl, onSuccess) =>
  async event => {
    if (!user_id) {
      updateShowPopper(true)
      updatePopperEl(event.currentTarget)
      return
    }
    if (currentUserFavorite) {
      const result = await deleteFavorite(photoId, currentUserFavorite.id)
      if (result.ok) {
        onSuccess()
      }
    } else {
      const result = await createFavorite(photoId)
      if (result.ok) {
        onSuccess()
      }
    }
  }

const FavoriteButton = ({ photoId, favorites, user, onSuccess, classes, ...options}) => {
  const [showPopper, updateShowPopper] = useState(false)
  const [popperEl, updatePopperEl] = useState()
  const handleClick = () => updateShowPopper(false)
  useEffect(() => {
    window.addEventListener('click', handleClick, true)
    return () => {
      window.removeEventListener('click', handleClick, true)
    }
  })
  const countClasses = classNames({
    [classes.favoriteCount]: true,
    [classes.white]: options.invertColors,
  })
  const buttonClasses = classNames({
    [classes.userFavorite]: favorites.current_user_favorite,
    [classes.white]: options.invertColors && !favorites.current_user_favorite,
  })

  return (
    <div className={classes.heartContainer}>
      <Typography variant="body2" className={countClasses}>
        {favorites.count}
      </Typography>
      <IconButton
        aria-label="Favorite"
        className={buttonClasses}
        onClick={handleFavorite(
          photoId,
          favorites.current_user_favorite,
          user.id,
          updateShowPopper,
          updatePopperEl,
          onSuccess
        )}>
        <Icon>favorite</Icon>
      </IconButton>
      <Popper
        id={showPopper && 'sign-in-popper'}
        open={showPopper}
        anchorEl={popperEl}
        transition>
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={350}>
            <Card>
              <CardContent>
                <Typography variant="body2">
                  <TextLink route='signIn'>
                    Sign in
                  </TextLink>
                  {' '}to add a favorite
                </Typography>
              </CardContent>
            </Card>
          </Fade>
        )}
      </Popper>
    </div>
  )
}

FavoriteButton.defaultOptions = {
  invertColors: false,
}

export default withStyles(styles)(FavoriteButton)

@@ -611,25 +611,194 @@
 %7B%0A  
-heartContainer: %7B
+background: %7B%0A    backgroundColor: %60$%7Btheme.palette.grey%5B900%5D%7D85%60,%0A    borderRadius: 24,%0A  %7D,%0A  heartContainer: %7B%0A    alignItems: 'center',%0A    display: 'flex',%0A    flexDirection: 'row',
 %0A   
@@ -865,20 +865,16 @@
  padding
-Left
 : theme.
@@ -885,17 +885,43 @@
 ing.unit
-,
+ * 1.5, // match IconButton
 %0A    pad
@@ -963,25 +963,17 @@
     
-display: 'inline'
+width: 24
 ,%0A  
@@ -2029,24 +2029,153 @@
 %0A    %7D%0A  %7D)%0A
+  const containerClasses = classNames(%7B%0A    %5Bclasses.heartContainer%5D: true,%0A    %5Bclasses.background%5D: options.invertColors,%0A  %7D)%0A
   const coun
@@ -2496,37 +2496,24 @@
 sName=%7Bc
-lasses.heartC
 ontainer
 %7D%3E%0A     
@@ -2504,16 +2504,23 @@
 ontainer
+Classes
 %7D%3E%0A     

Add a background to FavoriteButton