import React from 'react';
import {History} from 'react-router';
import Reflux from 'reflux';
import RefluxImmutableStoreMixin from 'reflux-immutable/StoreMixin';

import Col from 'trc-client-core/src/components/Col';
import Grid from 'trc-client-core/src/components/Grid';
import ModalConfirm from 'trc-client-core/src/Modal/ModalConfirm';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import QandaEditQuestionForm from 'trc-client-core/src/qanda/QandaEditQuestionForm';
import QandaEditQuestionFormActions from 'trc-client-core/src/qanda/QandaEditQuestionFormActions';
import QandaEditQuestionFormStore from 'trc-client-core/src/qanda/QandaEditQuestionFormStore';
import QandaStore from 'trc-client-core/src/qanda/QandaStore';
import Question from './Question';
import TextareaMixin from 'trc-client-core/src/mixins/TextareaMixin';

var EditQuestion = React.createClass({
    displayName: 'EditQuestion',
    mixins: [
        TextareaMixin,
        History,
        Reflux.listenTo(QandaStore, 'onStoreChange'),
        Reflux.listenTo(QandaEditQuestionFormStore, 'onStoreChange'),
        RefluxImmutableStoreMixin
    ],
    getStoreState() {
        return {
            question: QandaEditQuestionFormStore.get('question'),
            dirty: QandaEditQuestionFormStore.get('dirty'),
            errors: QandaEditQuestionFormStore.get('errors'),
            tags: QandaStore.get('tags')
        };
    },
    getInitialState() {
        return {
            edit: this.props.history.isActive(`/product/qanda/edit/${this.props.params.id}`),
            formErrors: {}
        };
    },
    onCancel: function () {
        if(this.state.dirty) {
            ModalManager.showModal(ModalConfirm, {
                title: 'Confirm',
                yes: 'Exit',
                message: 'There are unsaved changes to this question. Are you sure you want to exit?',
                onYes: this.onRealCancel
            });
        } else {
            this.onRealCancel();
        }
    },
    onRealCancel: function () {
        QandaEditQuestionFormActions.cancel();
        this.history.pushState(null, `/product/qanda/edit`);
    },
    render: function() {
        return (
            <div>
                {this.renderActions()}
                <Grid>
                    <Col>
                        <Question question={this.state.question} isActive={this.props.history.isActive} params={this.props.params} />
                    </Col>
                    <Col width={5}>
                        <QandaEditQuestionForm
                            question={this.state.question}
                            tags={this.state.tags}
                            errors={this.state.errors.toJS()}
                            edit={this.state.edit}
                        />
                    </Col>
                </Grid>
                {this.renderActions()}
            </div>
        );
    },
    renderActions: function () {
        return (
            <div className="margin-bottom2 margin-top2">
                <div className="right">
                    {this.state.dirty ? <span className="Icon margin-right t-red" data-icon={"\uE446"}></span> : null}
                    <div onClick={this.onCancel} className="Button Button-grey" key="Cancel">Cancel</div>
                    <div onClick={QandaEditQuestionFormActions.save} className="Button Button-edit inline" key="Create">{this.state.edit ? 'Save' : 'Create'}</div>
                </div>
                <a className="cta-back" onClick={this.onCancel}>Back to Question List</a>
            </div>
        );
    }
});


export default EditQuestion;