/**
 * This container manages child panels in an expandable accordion style. By default, only
 * one child panel can be expanded at a time. Set {@link #openable} to a different value
 * to allow multiple panels to be expanded.
 *
 * Note: Only `Ext.Panel` and its subclasses will be explicitly managed. All other items
 * will be treated normally.
 *
 * ```javascript
 * @example({ framework: 'extjs' })
 * Ext.create({
 *     xtype: 'accordion',
 *     title: 'Accordion',
 *     fullscreen: true,
 *
 *     defaults: {
 *         // applied to each contained panel
 *         xtype: 'panel',
 *         bodyPadding: 10
 *     },
 *
 *     openable: 2,
 *
 *     items: [{
 *         title: 'Panel 1',
 *         html: 'Panel content!'
 *     }, {
 *         title: 'Panel 2',
 *         html: 'Panel content!'
 *     }, {
 *         title: 'Panel 3',
 *         html: 'Panel content!'
 *     }]
 * });
 * ```
 * ```javascript
 * @example({framework: 'ext-react', packages:['ext-react']})
 * import React, { Component } from 'react'
 * import { ExtAccordion, ExtPanel } from '@sencha/ext-react';
 *
 * export default class MyExample extends Component {
 *    render() {
 *        return (
 *             <ExtAccordion
 *                 title="Accordion"
 *                 fullscreen="true"
 *                 openable="2"
 *             >
 *                 <ExtPanel
 *                     bodyPadding="10"
 *                     title="Panel 1"
 *                     html="Panel Content!"
 *                 >
 *                 </ExtPanel>
 *                 <ExtPanel
 *                     bodyPadding="10"
 *                     title="Panel 2"
 *                     html="Panel Content!"
 *                 >
 *                 </ExtPanel>
 *                 <ExtPanel
 *                     bodyPadding="10"
 *                     title="Panel 3"
 *                     html="Panel Content!"
 *                  >
 *                 </ExtPanel>
 *            </ExtAccordion>
 *         )
 *     }
 * }
 * ```
 * ```javascript
 * @example({framework: 'ext-angular', packages:['ext-angular']})
 * import { Component } from '@angular/core';
 * import {ExtPanel, ExtAccordion} from '@sencha/ext-react';
 * declare var Ext: any;
 *
 * @Component({
 *     selector: 'app-root-1',
 *     styles: [``],
 *     template: `
 *         <ExtAccordion
 *             title="Accordion"
 *             fullscreen="true"
 *             openable="2"
 *         >
 *             <ExtPanel
 *                 bodyPadding="10"
 *                 title="Panel 1"
 *                 html="Panel Content!"
 *             >
 *             </ExtPanel>
 *             <ExtPanel
 *                 bodyPadding="10"
 *                 title="Panel 2"
 *                 html="Panel Content!"
 *             >
 *             </ExtPanel>
 *             <ExtPanel
 *                 bodyPadding="10"
 *                 title="Panel 3"
 *                 html="Panel Content!"
 *             >
 *             </ExtPanel>
 *          </ExtAccordion>
 *     `
 * })
 * export class AppComponent {} 
 * ```
 * ```html
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 })
 * <ext-accordion
 *     title="Accordion"
 *     fullscreen="true"
 *     openable="2"
 * >
 *     <ext-panel
 *         bodyPadding="10"
 *         title="Panel 1"
 *         html="Panel Content!"
 *     >
 *     </ext-panel>
 *     <ext-panel
 *         bodyPadding="10"
 *         title="Panel 2"
 *         html="Panel Content!"
 *     >
 *     </ext-panel>
 *     <ext-panel
 *         bodyPadding="10"
 *         title="Panel 3"
 *         html="Panel Content!"
 *     >
 *     </ext-panel>
 * </ext-accordion>
 * ```
 * ```javascript
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 })
 * import '@sencha/ext-web-components/dist/ext-accordion.component';
 * import '@sencha/ext-web-components/dist/ext-panel.component';
 *
 * export default class AccordionComponent {} 
 * ```
 *
 * @since 7.0
 */
Ext.define('Ext.panel.Accordion', {
    extend: 'Ext.Panel',
    xtype: 'accordion',
 
    mixins: [
        'Ext.mixin.Bufferable'
    ],
 
    requires: [
        'Ext.layout.VBox',
        'Ext.panel.Collapser'
    ],
 
    config: {
        /**
         * @cfg {String} defaultPanelUI
         * The default {@link Ext.Widget#cfg!ui ui} to assign to collapsible panels.
         */
        defaultPanelUI: 'accordion',
 
        /**
         * @cfg {Boolean} expandedFirst
         * Set to `true` to move a panel to the first position in the container when it
         * is expanded.
         */
        expandedFirst: false,
 
        /**
         * @cfg {Number} openable
         * Limits the number simultaneously expanded (open) child panels.
         */
        openable: 1
    },
 
    layout: {
        type: 'vbox'
    },
 
    bufferableMethods: {
        syncState: 'asap'
    },
 
    accordionCls: Ext.baseCSSPrefix + 'layout-accordion',
    accordionSelector: '> [isPanel][collapsible][isInner]',
    prioritySeed: 0,
 
    initialize: function() {
        var me = this,
            accordionSelector = me.accordionSelector;
 
        me.callParent();
 
        // Since we are listening to ourselves, we don't need to clean these up
        me.on({
            // These options apply even if you have per-method options:
            scope: me,
 
            // These options are replaced by per-method options:
            delegate: accordionSelector,
            priority: -1000, // run after user listeners so we know it's happening
 
            beforeexpand: 'onPanelBeforeExpand',
            beforehiddenchange: 'onBeforePanelHiddenChange',
            hiddenchange: 'onPanelHiddenChange',
 
            beforecollapse: {
                delegate: accordionSelector,
                fn: 'onPanelBeforeCollapse',
                // run first to prevent the last panel from collapsing
                priority: 1000
            }
        });
 
        me.getRenderTarget().addCls(me.accordionCls);
        me.syncStateNow();
    },
 
    onItemAdd: function(item, index) {
        var me = this,
            initialItemConfig = item.initialConfig,
            startCollapsed = initialItemConfig.collapsed,
            collapsible, priority;
 
        if (item.isPanel && item.isInnerItem()) {
            collapsible = item.getCollapsible();
 
            if (collapsible !== false) {
                if (!item.getUi() && !initialItemConfig.ui) {
                    item.$accordionUI = me;
                    item.setUi(me.getDefaultPanelUI());
                }
 
                // Turn off the drawer.
                if (collapsible) {
                    collapsible.setUseDrawer(false);
                    collapsible.setDynamic(true);
                }
                else {
                    // If the panel is collapsible:false, then running getCollapsed()
                    // doesn't return anything meaningful. In that case we need to
                    // check initialConfig.collapsed to see if that was configured.
                    item.setCollapsible({
                        collapsed: startCollapsed,
                        dynamic: true,
                        useDrawer: false
                    });
                }
 
                // When an item expands, we assign it an integer $accordionPriority value,
                // which will promote it over any item just added. By default, the first
                // item added will have a priority of -0.00001, followed by -0.00002 and
                // decreasing for each new item. This gives implicit expand priority to
                // the first item added.
                priority = ++me.prioritySeed / -1e5;
 
                if (me.isConfiguring) {
                    // During initialization, explicitly collapsed and expanded items are
                    // pushed into different groups of priority. The initially collapsed
                    // panels go to even lower priority (-1.00001, -1.00002, etc...) while
                    // explicitly expanded panels get a priority boost (0.99999, 0.99998,
                    // etc...). In all cases still below 1 so that user-initiated expands
                    // always win.
                    if (startCollapsed) {
                        priority -= 1;
                    }
                    else if (startCollapsed === false) {
                        priority += 1;
                    }
                }
                else {
                    // After initialization, all new items are collapsed by default.
                    me.collapsePanelNoAnim(item, true);
                }
 
                item.$accordionPriority = priority;
            }
        }
 
        me.callParent([item, index]);
    },
 
    onItemRemove: function(item, index, destroying) {
        var me = this;
 
        // Clean up the accordion panel (but not other things, like docked items).
        if (item.$accordionUI === me && item.getUi() === me.getDefaultPanelUI()) {
            item.$accordionUI = null;
            item.setUi(null);
        }
 
        me.syncState();
 
        me.callParent([item, index, destroying]);
    },
 
    privates: {
        _sortFn: function(item1, item2) {
            return (item1.$accordionPriority || 0) - (item2.$accordionPriority || 0);
        },
 
        collapsePanelNoAnim: function(panel, collapsed) {
            var ev = 'before' + (collapsed ? 'collapse' : 'expand');
 
            panel.suspendEvent(ev);  // no, really, we insist
 
            // This pathway handles non-rendered child items but since it is a config,
            // we cannot pass additional parameters to disable animation...
            panel.getCollapsible().unanimated(function(collapser) {
                collapser.setCollapsed(collapsed);
            });
 
            panel.resumeEvent(ev);
        },
 
        doSyncState: function(info) {
            var me = this,
                panels = me.getAccordionPanels(),
                expanded = panels.$expanded,
                openable = me.getOpenable() || 9e9,
                vertical = me.getLayout().getVertical(),
                prop = vertical ? 'height' : 'width',
                extraSpace = 0,
                unanimated = info && !info.animation,
                anim, collapser, expanding, flex, i, item, n, totalFlex;
 
            if (!expanded.length) {
                item = panels.pop();
 
                if (item) {
                    me.collapsePanelNoAnim(item, false);
                }
            }
            else {
                while (openable < expanded.length) {
                    item = expanded.shift();
 
                    if (unanimated) {
                        me.collapsePanelNoAnim(item, true);
                    }
                    else {
                        item.setCollapsed(true);
                    }
 
                    anim = item.getCollapsible().activeOperation;
                    anim = anim && anim.anim;
                    anim = anim && anim.config;
 
                    if (anim && anim.from && anim.to) {
                        extraSpace += anim.from[prop] - anim.to[prop];
                    }
                }
            }
 
            if (extraSpace) {
                totalFlex = 0;
 
                // Look for any already expanded panels. Collapsed panels (even if they
                // are set to expanding) will have no flex.
                for (= 0, n = expanded.length; i < n; ++i) {
                    flex = (item = expanded[i]).getFlex();
 
                    if (flex) {
                        totalFlex += flex;
                    }
                    else {
                        collapser = item.getCollapsible();
 
                        if (collapser.expanding) {
                            if (expanding) {
                                expanding = null;
                                break;
                            }
                            else {
                                flex = collapser.savedProps;
                                flex = flex && flex.flex;
 
                                if (flex) {
                                    expanding = [flex, collapser];
                                }
                            }
                        }
                    }
                }
 
                // If there is an expanding item it will not know of the extraSpace that
                // will be available to it as other items collapse. However, if there
                // are other flexed items that extraSpace will be divvyed up between them.
                if (expanding) {
                    flex = expanding[0] / (expanding[0] + totalFlex);
                    expanding[1].extraSpace = Math.round(extraSpace * flex);
                }
            }
        },
 
        syncStateNow: function(info) {
            this.cancelSyncState();
            this.doSyncState(info);
        },
 
        getAccordionPanels: function() {
            var me = this,
                items = me.query(me.accordionSelector),
                expanded = [],
                n = items.length,
                i, item;
 
            items.sort(me._sortFn);
 
            for (= 0; i < n; ++i) {
                item = items[i];
 
                // The accordionSelector matches hidden items since we use it to listen
                // for "show" events.
                if (item.getHidden()) {
                    items.splice(i, 1);
                    --n;
                    --i;
                }
                else if (!item.getCollapsed() || item.getCollapsible().expanding) {
                    expanded.push(item);
                }
            }
 
            items.$expanded = expanded;
 
            return items;
        },
 
        onPanelBeforeCollapse: function() {
            var me = this,
                panels = me.getAccordionPanels();
 
            // Don't allow the last expanded panel to collapse
            if (panels.$expanded.length === 1) {
                return false;
            }
        },
 
        onPanelBeforeExpand: function(panel, info) {
            var me = this,
                collapser;
 
            if (me.getExpandedFirst()) {
                panel.parent.insert(0, panel);
            }
 
            panel.$accordionPriority = ++me.prioritySeed;
 
            collapser = panel.getCollapsible();
 
            // Since we are a beforeexpand listener, technically the expand has not yet
            // started. The "expand" event will fire after the animation and there is no
            // "afterbeforeexpand" event (nor should there be), so we lower our priority
            // to ensure we are the last beforeexpand listener. This means user listeners
            // have a chance to veto before we called. Since we are last, we mark up the
            // collapser a little early:
            collapser.setState('expanding');
 
            me.syncStateNow(info);
        },
 
        onBeforePanelHiddenChange: function(panel, hidden) {
            if (hidden) {
                this.syncState();
            }
        },
 
        onPanelHiddenChange: function(panel, hidden) {
            if (!hidden) {
                // eslint-disable-next-line vars-on-top
                var panels = this.getAccordionPanels();
 
                Ext.Array.remove(panels.$expanded, panel);
 
                if (panels.$expanded.length) {
                    this.collapsePanelNoAnim(panel, true);
                }
            }
        }
    }
});