import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Container, Segment, Grid, Button, Dropdown, Label } from 'semantic-ui-react'
import { uniqBy, union } from 'lodash'
import Zooming from 'zooming'

import Tag from '../components/Tag'
import ZoomableImage from '../components/ZoomableImage'
import DownloadButton from '../components/buttons/DownloadButton'
import FavoriteButton from '../components/buttons/FavoriteButton'
import WhatAnimeGaButton from '../components/buttons/WhatAnimeGaButton'
import DeleteButton from '../components/buttons/DeleteButton'

import { getScreenshotIfNeeded } from '../actions/entities'
import { search } from '../actions/entities'
import { addTag } from '../actions/user'
import { getImageUrl } from '../utils'

class Screenshot extends Component {

  state = {
    tag: '',
    tagSuggestions: []
  }

  componentWillMount () {
    const { params, dispatch } = this.props
    const { screenshotId } = params
    dispatch(getScreenshotIfNeeded(screenshotId))
  }

  componentWillReceiveProps(nextProps) {
    const { params, dispatch } = this.props
    const screenshotId = nextProps.params.screenshotId

    if (screenshotId !== params.screenshotId) {
      dispatch(getScreenshotIfNeeded(screenshotId))
    }
  }

  render () {
    return (
      <Container>
        <Grid stackable>
          <Grid.Row columns={2}>
            <Grid.Column width={12}>
              {this.renderImage()}
            </Grid.Column>
            <Grid.Column width={4}>
              <Segment.Group>
                {this.renderUploaderSegment()}
                {this.renderTagsSegment()}
                {this.renderAddTagSegment()}
                {this.renderActionSegment()}
              </Segment.Group>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Container>
    )
  }

  renderUploaderSegment = () => {
    const { users, screenshot } = this.props
    if (!screenshot) return null

    const uploader = users[screenshot.user]
    if (!uploader) return null

    return (
      <Segment>
        Uploaded by <Link to={`/user/${uploader._id}`}>{uploader.username}</Link>
      </Segment>
    )
  }

  renderTagsSegment = () => {
    const { dispatch, isAdmin, screenshot, screenshotTags } = this.props
    if (!screenshotTags || screenshotTags.names.length === 0) return null

    return (
      <Segment>
        <Label.Group>
          {screenshotTags.names.map((name, index) =>
            <Tag 
              key={index}
              name={name}
              dispatch={dispatch}
              isAdmin={isAdmin}
              screenshotId={screenshot._id}
            />
          )}
        </Label.Group>
      </Segment>
    )
  }

  renderAddTagSegment = () => {
    const { isAuthenticated, tag } = this.props
    if (!isAuthenticated) return null

    return (
      <Segment>
        <Dropdown
          options={this.state.tagSuggestions}
          placeholder='Enter a new tag'
          additionLabel=''
          icon={null}
          search
          selection
          fluid
          allowAdditions
          noResultsMessage={null}
          value={tag}
          onSearchChange={this.handleSearchChange}
          onChange={this.handleChange}
        />
      </Segment>

    )
  }

  renderActionSegment = () => {
    const { dispatch, isAuthenticated, isOwner, isAdmin, screenshot, screenshotFavorites, userFavorites } = this.props
    if (!screenshot || !screenshotFavorites) return null
    const { _id, file } = screenshot

    const isFavorited = isAuthenticated && userFavorites
    ? userFavorites.ids.find(favoriteId => {
        return screenshotFavorites.ids.includes(favoriteId)
      }) !== undefined
    : false

    const favoritesCount = screenshotFavorites.ids.length

    return (
      <Segment>
        <Button.Group size='large' fluid>
          <FavoriteButton
            dispatch={dispatch}
            screenshotId={_id}
            isFavorited={isFavorited}
            favoritesCount={favoritesCount}
            isAuthenticated={isAuthenticated}
          />
          <DownloadButton
            file={file}
          />
          <WhatAnimeGaButton url={getImageUrl(file.medium)} />

          {isAuthenticated && (isOwner || isAdmin) &&
            <DeleteButton dispatch={dispatch} screenshotId={_id} />
          }
        </Button.Group>
      </Segment>
    )
  }

  renderImage = () => {
    const { screenshot } = this.props
    if (!screenshot) return null

    const { _id, file } = screenshot

    return (
      <ZoomableImage
        id={_id}
        src={getImageUrl(file.medium)}
        dataOriginal={getImageUrl(file.large)}
        zooming={new Zooming()}
      />
    )
  }

  handleSearchChange = (event, value) => {
    const { dispatch } = this.props

    dispatch(search({ query: value }))
    .then(res => {
      const { value } = res
      const { data } = value
      const newSuggestions = data
        .map(({ name }) => {
          return { text: name, value: name }
        })

      this.setState({
        tagSuggestions: uniqBy(union(this.state.tagSuggestions, newSuggestions), 'text')
      })
    })
  }

  handleChange = (e, { value }) => {
    this.setState({ tag: value })

    const { dispatch, screenshot } = this.props
    dispatch(addTag(value, screenshot._id))
    .then(() => this.setState({ tag: '', tagSuggestions: [] }))
  }
}

Screenshot.propTypes = {
  dispatch: PropTypes.func.isRequired,
  isAuthenticated: PropTypes.bool.isRequired,
  screenshot: PropTypes.object,
  users: PropTypes.object.isRequired,
  screenshotFavorites: PropTypes.object,
  screenshotTags: PropTypes.object,
  userFavorites: PropTypes.object
}

function mapStateToProps(state, ownProps) {
  const { entities, user, screenshotFavorites, screenshotTags, userFavorites } = state
  const { users, screenshots } = entities
  const { isAuthenticated, uid } = user
  const { screenshotId } = ownProps.params
  const screenshot = screenshots[screenshotId]
  const authedUser = users[uid]   
  const isOwner = uid === user
  const isAdmin = authedUser && authedUser.roles && authedUser.roles.includes('admin')

  return {
    isAuthenticated,
    uid,
    isOwner,
    isAdmin,
    screenshot,
    users,
    screenshotFavorites: screenshotFavorites[screenshotId],
    screenshotTags: screenshotTags[screenshotId],
    userFavorites: userFavorites[uid]
  }
}

export default connect(mapStateToProps)(Screenshot)

@@ -177,16 +177,24 @@
 n, Label
+, Header
  %7D from 
@@ -281,16 +281,44 @@
 zooming'
+%0Aimport moment from 'moment'
 %0A%0Aimport
@@ -2164,19 +2164,39 @@
     
-Uploaded by
+%3CHeader size='small'%3E%0A         
  %3CLi
@@ -2227,16 +2227,17 @@
 ._id%7D%60%7D%3E
+@
 %7Buploade
@@ -2255,16 +2255,146 @@
 %3C/Link%3E%0A
+          %3CHeader.Subheader%3E%0A            %7Bmoment(screenshot.createdAt).fromNow()%7D%0A          %3C/Header.Subheader%3E%0A        %3C/Header%3E%0A
       %3C/

Add screenshot uploaded time