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

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

export var CvGraphicalWorkbenchMenuBase = {
    
    appWinDef: function():AppWinDef {
        return this.props.appWinDef || this.firstInScope(AppWinDef);
    },
    
    componentWillMount: function() {
        const id = this.props.initialSelectedWorkbenchId;
        const workbench:Workbench = ArrayUtil.find<Workbench>(this.appWinDef().workbenches,
            (workbench) => { return workbench.workbenchId === id}) || this.appWinDef().workbenches[0];
        this.setState({selectedWorkbenchId:workbench.workbenchId});
    },
    
    getDefaultProps: function() {
        return {appWinDef: null, workbenchSelectionListener:null, initialSelectedWorkbenchId: null}
    },

    getInitialState: function() {
        return {selectedWorkbenchId: null};
    },
    
    _workbenchSelected: function(workbench:Workbench) {
        this.setState({selectedWorkbenchId:workbench.workbenchId});
        if(this.props.workbenchSelectionListener) {
            this.props.workbenchSelectionListener(workbench);
        }
    }
}

export interface CvGraphicalWorkbenchMenuState extends CvState {
    selectedWorkbenchId:string;
}

export interface CvGraphicalWorkbenchMenuProps extends CvProps {
    /**
     * The sdk {AppWinDef} from which to retrieve the workbenches
     */
    appWinDef?:AppWinDef;
    /**
     * A workbench selection listener that this component will notify of workbench selection changes
     */
    workbenchSelectionListener:(workbench:Workbench)=>void;
    /**
     * The initially selected workbench id 
     */
    initialSelectedWorkbenchId:string;
}

export var CvDropdownWorkbenchMenu = React.createClass<CvGraphicalWorkbenchMenuProps, CvGraphicalWorkbenchMenuState>({

    mixins: [CvBaseMixin, CvGraphicalWorkbenchMenuBase],

    render: function () {
        return (
            <span className="dropdown">
                <button className="btn btn-default dropdown-toggle cv-dropdown-button" type="button" id="workbenchmenu"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Workbenches
                    <span className="caret"/>
                </button>
                <CvWorkbenchMenu appWinDef={this.appWinDef()} wrapperElemName='ul'
                     wrapperElemProps={{className:'dropdown-menu', 'aria-labelledby':'workbenchmenu'}}
                     menuItemRenderer={(workbench:Workbench)=>{
                        return <li onClick={this._workbenchSelected.bind(this, workbench)} key={workbench.workbenchId}><a className="cv-target">{workbench.name}</a></li>
                     }}/>
            </span>
        );
    },
    
});

export var CvTabbedWorkbenchMenu = React.createClass<CvGraphicalWorkbenchMenuProps, CvGraphicalWorkbenchMenuState>({

    mixins: [CvBaseMixin, CvGraphicalWorkbenchMenuBase],

    render: function () {
        return (
                <CvWorkbenchMenu appWinDef={this.appWinDef()} wrapperElemName='ul'
                                 wrapperElemProps={{className:'nav nav-pills'}}
                                 menuItemRenderer={(workbench:Workbench)=>{
                        return <li onClick={this._workbenchSelected.bind(this, workbench)} key={workbench.workbenchId}
                                    role="presentation" className={workbench.workbenchId == this.state.selectedWorkbenchId ? 'active' : ''}>
                                    <a className="cv-target">{workbench.name}</a>
                                </li>
                     }}/>
        );
    },

});