// - Import react components
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {NavLink} from 'react-router-dom'
import { push } from 'react-router-redux'
import PropTypes from 'prop-types'
import moment from 'moment'
import { createAction as action } from 'redux-actions'
import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card'
import FloatingActionButton from 'material-ui/FloatingActionButton'
import SvgShare from 'material-ui/svg-icons/social/share'
import SvgLink from 'material-ui/svg-icons/content/link'
import SvgComment from 'material-ui/svg-icons/Communication/comment'
import SvgFavorite from 'material-ui/svg-icons/action/favorite'
import SvgFavoriteBorder from 'material-ui/svg-icons/action/favorite-border'
import Checkbox from 'material-ui/Checkbox'
import FlatButton from 'material-ui/FlatButton'
import Divider from 'material-ui/Divider'
import { grey200, grey400, grey600 } from 'material-ui/styles/colors'
import Paper from 'material-ui/Paper'
import Menu from 'material-ui/Menu'
import MenuItem from 'material-ui/MenuItem'
import TextField from 'material-ui/TextField'
import Dialog from 'material-ui/Dialog'
import IconButton from 'material-ui/IconButton'
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'
import IconMenu from 'material-ui/IconMenu'
import reactStringReplace from 'react-string-replace'


// - Import app components
import CommentGroup from 'CommentGroup'
import PostWrite from 'PostWrite'
import Img from 'Img'
import IconButtonElement from 'IconButtonElement'
import UserAvatar from 'UserAvatar'


// - Import actions
import * as voteActions from 'voteActions'
import * as postActions from 'postActions'
import * as globalActions from 'globalActions'

// - Create component class
export class Post extends Component {

static propTypes = {

      /**
       * The context of a post
       */
      body: PropTypes.string,
      /**
       * The number of comment on a post
       */
      commentCounter:PropTypes.number,
      /**
       * Creation post date
       */
      creationDate:PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number
      ]),
      /**
       * Post identifier
       */
      id:PropTypes.string,
      /**
       * Post image address
       */
      image:PropTypes.string,
      /**
       * The last time date when post has was edited
       */
      lastEditDate:PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number
      ]),
      /**
       * The name of the user who created the post
       */
      ownerDisplayName:PropTypes.string,
      /**
       * The identifier of the user who created the post
       */
      ownerUserId:PropTypes.string,
      /**
       * The avatar address of the user who created the post
       */
      ownerAvatar:PropTypes.string,
      /**
       * If post is only [0]text, [1]whith picture, ...
       */
      postTypeId:PropTypes.number,
      /**
       * The number votes on a post
       */
      score:PropTypes.number,
      /**
       * Array of tags on a post
       */
      tags:PropTypes.array,
      /**
       * The video address of a post
       */
      video:PropTypes.string,
      /**
       * If it's true comment will be disabled on a post
       */
      disableComments:PropTypes.bool,
      /**
       * If it's true sharing will be disabled on a post
       */
      disableSharing:PropTypes.bool,
      /**
       * The number of users who has visited the post
       */
      viewCount:PropTypes.number
}

  /**
   * Component constructor
   * @param  {object} props is an object properties of component
   */
  constructor(props) {
    super(props)
    this.state = {
      /**
       * Post text
       */
      text: this.props.body,
      /**
       * It's true if whole the text post is visible
       */
      readMoreState: false,
      /**
       * Handle open comment from parent component
       */
      openComments: false,
      /**
       * If it's true, share dialog will be open
       */
      shareOpen: false,
      /**
       * If it's true comment will be disabled on post
       */
      disableComments: this.props.disableComments,
      /**
       * If it's true share will be disabled on post
       */
      disableSharing: this.props.disableSharing,
      /**
       * Title of share post 
       */
      shareTitle: 'Share On',
      /**
       * If it's true, post link will be visible in share post dialog
       */
      openCopyLink: false,
       /**
       * If it's true, post write will be open
       */
      openPostWrite: false
    }

    // Binding functions to this
    this.handleReadMore = this.handleReadMore.bind(this)
    this.getOpenCommentGroup = this.getOpenCommentGroup.bind(this)
    this.handleVote = this.handleVote.bind(this)
    this.handleOpenShare = this.handleOpenShare.bind(this)
    this.handleCloseShare = this.handleCloseShare.bind(this)
    this.handleCopyLink = this.handleCopyLink.bind(this)
    this.handleDelete = this.handleDelete.bind(this)
    this.handleOpenPostWrite = this.handleOpenPostWrite.bind(this)
    this.handleClosePostWrite = this.handleClosePostWrite.bind(this)
    this.handleOpenComments = this.handleOpenComments.bind(this)
  }


  /**
   * Toggle on show/hide comment
   * @param  {event} evt passed by clicking on comment slide show
   */
  handleOpenComments = (evt) => {
    this.setState({
      openComments: !this.state.openComments
    })
  }

  /**
   * Open post write
   * 
   * 
   * @memberof Blog
   */
  handleOpenPostWrite = () => {
    this.setState({
      openPostWrite: true
    })
  }
  
  /**
   * Close post write
   * 
   * 
   * @memberof Blog
   */
  handleClosePostWrite = () => {
  this.setState({
    openPostWrite: false
  })
}

  /**
   * Delete a post
   * 
   * 
   * @memberof Post
   */
  handleDelete = () => {
    this.props.delete(this.props.id)
  }

  /**
   * Show copy link 
   * 
   * 
   * @memberof Post
   */
  handleCopyLink = () => {
    this.setState({
      openCopyLink: true,
      shareTitle: 'Copy Link'
    })
  }

  /**
   * Open share post
   * 
   * 
   * @memberof Post
   */
  handleOpenShare = () => {
    this.setState({
      shareOpen: true
    })
  }

  /**
   * Close share post
   * 
   * 
   * @memberof Post
   */
  handleCloseShare = () => {
    this.setState({
      shareOpen: false,
      shareTitle: 'Share On',
      openCopyLink: false
    })
  }

  /**
   * Handle vote on a post
   * 
   * 
   * @memberof Post
   */
  handleVote = () => {
    if (this.props.userVoteStatus) {
      this.props.unvote()
    }
    else {
      this.props.vote()
    }
  }

  /**
   * Set open comment group function on state which passed by CommentGroup component
   * @param  {function} open the function to open comment list
   */
  getOpenCommentGroup = (open) => {
    this.setState({
      openCommentGroup: open
    })
  }

  /**
   * Handle read more event
   * @param  {event} evt  is the event passed by click on read more
   */
  handleReadMore(evt) {


    this.setState({
      readMoreState: !this.state.readMoreState

    });
  }
  componentDidMount() {

  }



  /**
   * Reneder component DOM
   * @return {react element} return the DOM which rendered by component
   */
  render() {

    /**
       * DOM styles
       * 
       * 
       * @memberof Post
       */
    const styles = {
      counter: {
        lineHeight: '36px',
        color: '#777',
        fontSize: '12px',
        marginRight: '6px'
      },
      dialog: {
        width: '',
        maxWidth: '530px',
        borderRadius: "4px"
      },
      rightIconMenu: {
        position: 'absolute',
        right: 18,
        top: 8,
      },
      iconButton: {
        width: 24,
        height: 24

      }

    }



    const RightIconMenu = () => (
      <IconMenu iconButtonElement={IconButtonElement} style={{ display: "block", position: "absolute", top: "0px", right: "4px" }}>
        <MenuItem primaryText="Edit" onClick={this.handleOpenPostWrite}  />
        <MenuItem primaryText="Delete" onClick={this.handleDelete}  />
       <MenuItem primaryText={this.props.disableComments ? "Enable comments" : "Disable comments"} onClick={() => this.props.toggleDisableComments(!this.props.disableComments)} />     
       <MenuItem primaryText={this.props.disableSharing ? "Enable sharing" : "Disable sharing"} onClick={() => this.props.toggleSharingComments(!this.props.disableSharing)} />
      </IconMenu>
    )

    const {ownerUserId,setHomeTitle, goTo, ownerDisplayName,creationDate, avatar, isPostOwner,image, body} = this.props
    // Define variables
    return (
      <Card>
        <CardHeader
          title={<NavLink to={`/${ownerUserId}`}>{ownerDisplayName}</NavLink>}
          subtitle={moment.unix(creationDate).fromNow() + " | public"}
          avatar={<NavLink to={`/${ownerUserId}`}><UserAvatar fileName={avatar} size={36} /></NavLink>}
        >
         {isPostOwner ? ( <div style={styles.rightIconMenu}><RightIconMenu /></div>) : ''}
        </CardHeader>
        {image ? (
          <CardMedia>
            <Img fileName={image} />
          </CardMedia>) : ''}


        <CardText>
          {reactStringReplace(body,/#(\w+)/g, (match, i) => (
          <NavLink 
          style={{color:'green'}} 
          key={match + i} 
          to={`/tag/${match}`}
          onClick ={evt => {
            evt.preventDefault()
            goTo(`/tag/${match}`)
            setHomeTitle(`#${match}`)
            }}
          >
          #{match}
          </NavLink>

        ))}
        </CardText>
        <CardActions>
          <div style={{ margin: "16px 8px", display: 'flex', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex' }}>
              {/*<FloatingActionButton  style={{ margin: "0 8px" }} zDepth={1} backgroundColor={grey200} iconStyle={{ color: grey600, fill: grey600, height: "36px", width: "36px" }} zDepth={1} secondary={false}>*/}
             <div className='g__circle' onClick={this.handleVote}>
              <Checkbox
                                checkedIcon={<SvgFavorite style={{fill:'#4CAF50'}}/>}
                                uncheckedIcon={<SvgFavoriteBorder style={{fill:'#757575'}} />}
                                defaultChecked={this.props.userVoteStatus}
                                style={{transform: 'translate(6px, 6px)'}}
                            />
                </div>
              <div style={styles.counter}> {this.props.voteCount > 0 ? this.props.voteCount : ''} </div>
            </div>
            <div style={{ display: 'flex' }}>
              {!this.props.disableComments ? (<div style={{display: 'inherit'}}><FloatingActionButton onClick={this.handleOpenComments} style={{ margin: "0 8px" }} zDepth={1} backgroundColor={grey200} iconStyle={{ color: grey600, fill: grey600, height: "36px", width: "36px" }} zDepth={1} secondary={false}>
                <SvgComment viewBox="0 -9 24 34" style={{ height: "30px", width: "30px" }} /> 3
            </FloatingActionButton>
              <div style={styles.counter}>{this.props.commentCount > 0 ? this.props.commentCount : ''} </div></div>) : ''}
              {!this.props.disableSharing ? (<FloatingActionButton onClick={this.handleOpenShare} style={{ margin: "0 8px" }} zDepth={1} backgroundColor={grey200} iconStyle={{ color: grey600, fill: grey600, height: "36px", width: "36px" }} zDepth={1} secondary={false}>
                <SvgShare viewBox="0 -9 24 34" style={{ height: "30px", width: "30px" }} />
              </FloatingActionButton>) : ''}
            </div>
          </div>
        </CardActions>

        <CommentGroup open={this.state.openComments} ownerPostUserId={this.props.ownerUserId} onToggleRequest={this.handleOpenComments} isPostOwner={this.props.isPostOwner} disableComments={this.props.disableComments} postId={this.props.id} />
        
        {/* Copy link dialog*/}
        <Dialog
          title="Share On"
          modal={false}
          open={this.state.shareOpen}
          onRequestClose={this.handleCloseShare}
          overlayStyle={{ background: "rgba(0,0,0,0.12)" }}
          contentStyle={styles.dialog}
          autoDetectWindowHeight={false}
          actionsContainerStyle={{ borderTop: "1px solid rgb(224, 224, 224)" }}
        >
          {!this.state.openCopyLink
            ? (<Paper >
              <Menu>
                <MenuItem primaryText="Copy Link" leftIcon={<SvgLink />} onClick={this.handleCopyLink} />
              </Menu>
            </Paper>)
            : <TextField fullWidth={true} id="text-field-default" defaultValue={`${location.origin}/${this.props.ownerUserId}/posts/${this.props.id}`} />
          }
        </Dialog>
                
        <PostWrite 
        open={this.state.openPostWrite} 
        onRequestClose={this.handleClosePostWrite} 
        edit={true}
        text= {this.props.body}
        image= {this.props.image ? this.props.image : ''}
        id= {this.props.id}
        disableComments= {this.props.disableComments}
        disableSharing= {this.props.disableSharing}
        />
       
      </Card>

    )
  }
}

/**
 * Map dispatch to props
 * @param  {func} dispatch is the function to dispatch action to reducers
 * @param  {object} ownProps is the props belong to component
 * @return {object}          props of component
 */
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    vote: () => dispatch(voteActions.dbAddVote(ownProps.id,ownProps.ownerUserId)),
    unvote: () => dispatch(voteActions.dbDeleteVote(ownProps.id)) ,
    delete: (id) => dispatch(postActions.dbDeletePost(id)),
    toggleDisableComments: (status) => dispatch(postActions.dbUpdatePost({id:ownProps.id, disableComments:status},_ =>_)),
    toggleSharingComments: (status) => dispatch(postActions.dbUpdatePost({id:ownProps.id, disableSharing:status},_ => _)),
    goTo: (url) => dispatch(push(url)),
    setHomeTitle: (title) => dispatch(globalActions.setHeaderTitle(title|| ''))


  }
}

/**
 * Map state to props
 * @param  {object} state is the obeject from redux store
 * @param  {object} ownProps is the props belong to component
 * @return {object}          props of component
 */
const mapStateToProps = (state, ownProps) => {
  const {uid} = state.authorize  
  let votes = state.vote.postVotes[ownProps.id]
  const post = (state.post.userPosts[uid] ? Object.keys(state.post.userPosts[uid]).filter((key)=>{ return ownProps.id === key}).length : 0)

  return {
    avatar: state.user.info && state.user.info[ownProps.ownerUserId] ? state.user.info[ownProps.ownerUserId].avatar || '' : '',
    commentCount: state.comment.postComments[ownProps.id] ? Object.keys(state.comment.postComments[ownProps.id]).length : 0,
    voteCount: state.vote.postVotes[ownProps.id] ? Object.keys(state.vote.postVotes[ownProps.id]).length : 0,
    userVoteStatus: votes && Object.keys(votes).filter((key) => votes[key].userId === state.authorize.uid)[0] ? true : false,
    isPostOwner: post > 0
  }
}

// - Connect component to redux store
export default connect(mapStateToProps, mapDispatchToProps)(Post)