import Component from 'ember-component';

/**
 * Heavily inspired by ic-tabs (https://github.com/instructure/ic-tabs)
 *
 * Three components work together for smooth tabbing.
 * 1. tabs-manager (gh-tabs)
 * 2. tab (gh-tab)
 * 3. tab-pane (gh-tab-pane)
 *
 * ## Usage:
 * The tabs-manager must wrap all tab and tab-pane components,
 * but they can be nested at any level.

 * A tab and its pane are tied together via their order.
 * So, the second tab within a tab manager will activate
 * the second pane within that manager.

 * ```hbs
 * {{#gh-tabs-manager}}
 *   {{#gh-tab}}
 *     First tab
 *   {{/gh-tab}}
 *   {{#gh-tab}}
 *     Second tab
 *  {{/gh-tab}}
 *
 *  ....
 *  {{#gh-tab-pane}}
 *     First pane
 *   {{/gh-tab-pane}}
 *   {{#gh-tab-pane}}
 *     Second pane
 *   {{/gh-tab-pane}}
 * {{/gh-tabs-manager}}
 * ```
 * ## Options:
 *
 * the tabs-manager will send a "selected" action whenever one of its
 * tabs is clicked.
 * ```hbs
 * {{#gh-tabs-manager selected="myAction"}}
 *     ....
 * {{/gh-tabs-manager}}
 * ```
 *
 * ## Styling:
 * Both tab and tab-pane elements have an "active"
 * class applied when they are active.
 *
 */
export default Component.extend({
    activeTab: null,
    tabs: [],
    tabPanes: [],

    // Used by children to find this tabsManager
    isTabsManager: true,

    // Called when a gh-tab is clicked.
    select(tab) {
        this.set('activeTab', tab);
        this.sendAction('selected');
    },

    // Register tabs and their panes to allow for
    // interaction between components.
    registerTab(tab) {
        this.get('tabs').addObject(tab);
    },

    unregisterTab(tab) {
        this.get('tabs').removeObject(tab);
    },

    registerTabPane(tabPane) {
        this.get('tabPanes').addObject(tabPane);
    },

    unregisterTabPane(tabPane) {
        this.get('tabPanes').removeObject(tabPane);
    }
});