import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import moment from 'moment';
import Reflux from 'reflux';
import Router from 'react-router';
import RefluxImmutableStoreMixin from 'reflux-immutable/StoreMixin';
import QandaStore from 'trc-client-core/src/qanda/QandaStore';   
import UserStore from 'trc-client-core/src/user/UserStore';
import Markdown from 'trc-client-core/src/components/Markdown';
import Tag from 'trc-client-core/src/components/Tag';
import Icon from 'trc-client-core/src/components/Icon';

var Question = React.createClass({
    displayName: 'Question',
    mixins: [
        Reflux.listenTo(QandaStore, 'onStoreChange'),
        RefluxImmutableStoreMixin,
        Router.State,
        PureRenderMixin
    ],
    getStoreState() {
        return {
            question: QandaStore.getQuestionById(this.props.params.id)
        };
    },
    render: function() {
        var {params} = this.props;
        var {question} = this.state;
        if(!question) {
            return null;            
        }

        var isActive = this.props.isActive(`/edit/${params.id}`);
        var editButton = (UserStore.is('ROLE_SUPER_ADMIN') && !isActive) ? <a href={"/#/product/qanda/edit/" + question.get('id')} className="Button Button-edit row hug-top">Edit Question</a> : null;
        return (
            <div>
                {editButton}
                <div className="p">
                    <div className="t-muted l-right">{this.renderTags()}</div>                        
                    <div className="t-muted">{this.renderDate()}</div>
                </div>

                <div className="Widget grey">
                    <Icon className="l-right" hexCode={question.get('icon')}/>
                    <h1>Q: <br/>{question.get('questionTitle')}</h1>
                    <p className="gamma">{question.get('questionDescription')}</p>
                </div>

                <h2>A:</h2>
                <Markdown html={question.get('answer')}/>
                
                {this.renderBackButton(isActive)}
                
            </div>            
        );
    },    
    renderDate: function () {
        if (this.state.question.get('status') === 'Publish') {
            return <span>Published: {moment(this.state.question.get('answerDate') || new Date()).format('MMMM Do YYYY')}</span>;
        }
        return "Status: Draft";
    },
    renderTags: function () {
        var tags = this.props.question.get('tags');
        if(tags) {
            return tags.map((value, key) => {
                return <span key={key}>
                    <Tag name={value} href={`/#/product/qanda?tag=${value}`}/>
                    {(key === tags.size - 1) ? null : <span>, </span>}
                </span>;
            }).toJS();            
        }
    },
    renderBackButton(isActive) {
        if(isActive) {
            return <a href="/#/product/qanda/" className="cta-back l-right">back to questions</a>;
        }
    }
});

module.exports = Question;