/**
 * Created by rburson on 3/16/16.
 */

import * as React from 'react'
import {CvState, CvProps, CvBaseMixin, CvValueProvider} from 'catreact'
import {AppWinDef, Workbench} from 'catavolt-sdk'

export interface CvWorkbenchManagerState extends CvState {
    activeWorkbench:Workbench;
}

export interface CvWorkbenchManagerProps extends CvProps {
    /**
     * The sdk {AppWinDef} from which to retrieve the workbenches
     */
    appWinDef?:AppWinDef;
    /**
     * A renderer for the workbench menu.  Should return a 'renderable'
     */
    menuRenderer:()=>{}
    /**
     * A renderer for the workbench.  Should return a 'renderable'
     * @param intialWorkbench
     */
    workbenchRenderer:(intialWorkbench:Workbench)=>{}
    /**
     * A workbench selection provider, to which this component will 'listen' and display workbench selection changes
     */
    selectionProvider:CvValueProvider<Workbench>
}

/*
 ***************************************************
 * A component analogous to Catavolt AppWinDef
 ***************************************************
 */
export var CvWorkbenchManager = React.createClass<CvWorkbenchManagerProps, CvWorkbenchManagerState>({

    mixins: [CvBaseMixin],
    
    appWinDef: function() {
        return this.props.appWinDef || this.firstInScope(AppWinDef);
    },
    
    componentDidMount() {
        const selectionProvider:CvValueProvider<Workbench> = this.props.selectionProvider;
        selectionProvider.subscribe(this._updateWorkbench);
    },

    getChildContext: function() {
        const ctx = this.getDefaultChildContext();
        ctx.cvContext.scopeCtx.scopeObj = this.appWinDef();
        return ctx;
    },

    getDefaultProps: function() {
        return {appWinDef: null, menuRenderer: null, workbenchRenderer: null, selectionProvider: null}
    },
    
    getInitialState: function() {
        return {activeWorkbench: null}   
    },

    render: function () {

        const appWinDef:AppWinDef = this.appWinDef();
        
        if(appWinDef) {
            if (this.props.renderer) {
               return this.props.renderer(this.getChildContext().cvContext);
            }  else {
                return (<div className="cv-workbench-manager-container animated zoomIn">
                    <div className="row">
                        {this.props.menuRenderer()}
                    </div>
                    <div className="cv-panel panel panel-primary cv-workbench-panel">
                        <div className="cv-workbench-panel-heading panel-heading">
                            <h3 className="cv-panel-title panel-title">{this.state.activeWorkbench ? this.state.activeWorkbench.name : ''}</h3>
                        </div>
                        <div className="cv-panel-body cv-workbench-panel-body">
                            <div className="cv-workbench-scroll-container">{this.props.workbenchRenderer()}</div>
                        </div>
                    </div>
                </div>);
            }
        } else {
            return null;
        }

    },
    
    _updateWorkbench: function(workbench:Workbench) {
        this.setState({activeWorkbench: workbench});
    }

});