import React, {useCallback, useMemo, useState} from 'react'
import moment from 'moment'
import Avatar from 'react-uikit/avatar'
import Button from 'react-uikit/button'
import DropMenu from 'components/drop-menu'
import Editor from 'components/editor'
import PostForm from 'containers/forms/post-form'
import PropTypes from 'prop-types'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

const Post = ({className, post, author, policy, onDelete, onUpdate}) => {
    const {createdAt, id: messageId, title, body} = post

    const [isEditing, setIsEditing] = useState(false)
    const {canUpdate} = policy.forPost(post)
    const toggleEdit = useCallback(
        () => setIsEditing((isEditing) => !isEditing),
        [setIsEditing]
    )
    const cancelEdit = useCallback(() => setIsEditing(false), [])
    const deletePost = useCallback(() => onDelete?.(messageId), [messageId])
    const editPost = useCallback(
        (payload) => onUpdate?.({messageId, ...payload}).then(cancelEdit),
        [messageId]
    )

    const {firstName, lastName, avatarUrl} = author

    const rootClassNames = bem.classNames('c-post', className)
    const menuClassNames = bem.classNames('c-post__action-toggle__menu')
    const timestampClassNames = bem.classNames('c-post__timestamp')
    const titleClassNames = bem.classNames('c-post__title')
    const authorClassNames = bem.classNames('c-post__author')
    const textClassNames = bem.classNames('c-post__text')

    const menuItems = useMemo(
        () => [
            {label: 'Edit', isDanger: false, onClick: toggleEdit},
            {label: 'Delete', isDanger: true, onClick: deletePost},
        ],
        [toggleEdit]
    )

    const MoreToggle = useCallback(({toggleMenu}) => {
        const actionToggleClasses = bem.classNames('c-post__action-toggle')
        const toggleIconClasses = bem.classNames(
            'c-post__action-toggle__icon',
            'material-icons'
        )

        return (
            <Button
                className={actionToggleClasses}
                title="More"
                onClick={toggleMenu}
            >
                <i className={toggleIconClasses}>more_vert</i>
            </Button>
        )
    }, [])

    return (
        <article className={rootClassNames}>
            {isEditing ? (
                <PostForm
                    post={post}
                    unregisterOnExit
                    onCancel={cancelEdit}
                    onSubmit={editPost}
                />
            ) : (
                <React.Fragment>
                    <div className={timestampClassNames}>
                        <p>{moment(createdAt).fromNow()}</p>

                        {canUpdate && (
                            <DropMenu
                                menuClassName={menuClassNames}
                                menuItems={menuItems}
                                renderToggle={MoreToggle}
                            />
                        )}
                    </div>
                    <h2 className={titleClassNames}>{title}</h2>
                    <div className={authorClassNames}>
                        <Avatar
                            avatarUrl={avatarUrl}
                            firstName={firstName}
                            lastName={lastName}
                            size="xs-small"
                        />
                        <span>
                            &emsp;by {firstName} {lastName}
                        </span>
                    </div>

                    <Editor className={textClassNames} readOnly value={body} />
                </React.Fragment>
            )}
        </article>
    )
}
Post.propTypes = {
    author: PropTypes.shape({
        firstName: PropTypes.string,
        lastName: PropTypes.string,
        avatarUrl: PropTypes.string,
    }),
    className: PropTypes.string,
    policy: PropTypes.object,
    post: PropTypes.shape({
        body: PropTypes.object,
        createdAt: PropTypes.string,
        id: PropTypes.string,
        title: PropTypes.string,
    }),
    onDelete: PropTypes.func,
    onUpdate: PropTypes.func,
}

export default Post