import React from 'react';
import moment from 'moment';
import Reflux from 'reflux';
import {Link} from 'react-router';
import RefluxImmutableStoreMixin from 'reflux-immutable/StoreMixin';
import QandaStore from 'trc-client-core/src/qanda/QandaStore';   
import ModalManager from '../Modal/ModalManager';
import ModalConfirm from '../Modal/ModalConfirm';
import DataTable from 'bd-stampy/components/DataTable';
import Icon from 'trc-client-core/src/components/Icon';
import Tag from '../components/Tag';

import QandaActions from 'trc-client-core/src/qanda/QandaActions';

var QuestionsTable = React.createClass({
    displayName: 'QuestionsTable',   
    mixins: [
        Reflux.listenTo(QandaStore, 'onStoreChange'),
        RefluxImmutableStoreMixin
    ],
    getStoreState() {
        return {
            questions: QandaStore.get('allQuestions'),
            tags: QandaStore.get('tags')
        };
    },
    render: function() {
        return (
            <div>
                <Link className="Button Button-edit l-right" to="/product/qanda/new_question">New Question</Link>
                <h1>Q &amp; A</h1>
                {this.renderQuestionsTable()}
            </div>
        );
    },
    onDelete(question) {
        ModalManager.showModal(ModalConfirm, {
            title: `Delete ${question.questionTitle}?`,
            yes: 'Delete',
            message: 'Are you sure you want to delete this question',
            onYes: QandaActions.deleteQuestion.bind(null, question.id)
        });
    },
    renderQuestionsTable: function () {
        var tableSchema = [{
            render: (item) => <Icon hexCode={item.icon}/>
        }, {
            heading: 'Question', 
            filter: 'questionTitle',
            width: '40%',
            render: (item) => <Link to={`/product/qanda/edit/${item.id}`} className="link">{item.questionTitle}</Link>
        }, {
            heading: 'Date',
            filter: 'answerDate',
            width: 120,
            render: (item) => moment(item.answerDate).format('DD/MM/YYYY')
            // render: (item) => item.answerDate
        }, {
            heading: 'Author',
            filter: 'answeredBy',
            render: (item) => item.answeredBy || 'Unanswered'
        }, {
            heading: 'Tags',
            filter: 'tags',
            width: 120,
            render: (item) => <ul className="List List-comma">{item.tags.map((tag, key) => <li key={key}><Tag name={tag}></Tag></li>)}</ul>
        }, {
            heading: 'Status',
            filter: (item) => item.status === 'Publish' ? 'a' : 'b',
            render: (item) => item.status === 'Publish' ? 'Published' : 'Draft'
        }, {
            width: 100,
            render: (item) => {
                return (
                    <div>
                        <Link className="Button Button-small Button-edit w100" to={`/product/qanda/edit/${item.id}`} key={item.id}>Edit</Link>
                        <Link to={`/product/qanda/${item.id}`} className="Button Button-small Button-grey w100">View</Link>
                        {this.renderDeleteButton(item)}
                    </div>
                );
            }
        }];

        return <DataTable 
            schema={tableSchema} 
            data={this.state.questions.sortBy(qq => qq.get('answerDate')).toJS().reverse()} 
            modifier="data" 
        />;
    },
    renderDeleteButton(question) {
        if(!question.status) {
            return <div className="Button Button-small Button-red w100" role="Button" onClick={this.onDelete.bind(null, question)}>Delete</div>;
        }
    }   
});

module.exports = QuestionsTable;