Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
    extend: 'Ext.form.Panel',

    xtype: 'cfMainForm',

    defaults: {
        width: '100%'
    },

    fieldDefaults: {
        labelSeparator: ''
    },

    margin: '0 10 0 0',

    defaultType: 'textfield',

    ui: 'cf-mainform',

    _isEverybody: true,

    _sourcesetStoreId: null,

    _sourcesetListName: null,

    _sourcesetListId: null,

    initComponent: function() {
        if (this._sourcesetStoreId) {
            var sourceSetList = Ext.getStore('CallForwardList_' + this._sourcesetStoreId) || Ext.create('NgcpCsc.store.CallForwardSourceset', {
                storeId: 'CallForwardList_' + this._sourcesetStoreId,
                _sourcesetListName: this._sourcesetListName,
                _sourcesetListId: this._sourcesetListId
            });
            var callForwardList = Ext.create('NgcpCsc.view.pages.callforward.CallForwardSourcesetGrid', {
                id: this._firstprefix + this._secondprefix + 'cf-sourceset-list-grid',
                store: sourceSetList
            });
        } else {
            if(Ext.getStore('firstSLStore')){
                Ext.getStore('firstSLStore').load(); // forces the tabs to be rendered
            }else{
                Ext.create('NgcpCsc.store.CallForwardSourceset', {
                    storeId: 'firstSLStore',
                    autoLoad: true
                });
            }
        }

        var busyGrid = Ext.create('NgcpCsc.view.pages.callforward.CallForwardMainGrid', {
            id: this._firstprefix + this._secondprefix + 'CallForwardBusy',
            store: Ext.create('NgcpCsc.store.CallForwardDestinations', {
                storeId: this._firstprefix + this._secondprefix + 'CallForwardBusy',
                _sourcesetListName: this._sourcesetListName
            })
        });
        var onlineGrid = Ext.create('NgcpCsc.view.pages.callforward.CallForwardMainGrid', {
            id: this._firstprefix + this._secondprefix + 'CallForwardOnline',
            store: Ext.create('NgcpCsc.store.CallForwardDestinations', {
                storeId: this._firstprefix + this._secondprefix + 'CallForwardOnline',
                _sourcesetListName: this._sourcesetListName
            })
        });
        var offlineGrid = Ext.create('NgcpCsc.view.pages.callforward.CallForwardMainGrid', {
            id: this._firstprefix + this._secondprefix + 'CallForwardOffline',
            store: Ext.create('NgcpCsc.store.CallForwardDestinations', {
                storeId: this._firstprefix + this._secondprefix + 'CallForwardOffline',
                _sourcesetListName: this._sourcesetListName
            })
        });
        this.items = [{
            xtype: 'panel',
            hidden: this._isEverybody,
            bind: {
                title: '{sourceset-' + this._sourcesetListId + '-title}'
            },
            collapsible: true,
            collapsed: true,
            items: [{
                    xtype: 'form',
                    layout: 'hbox',
                    margin: '10 0 0 0',
                    // TODO Robert reintroduce toggle button for sourceset Title
                    items: [{
                        xtype: 'textfield',
                        userCls: 'cf-sourceset-textfield',
                        fieldLabel: Ngcp.csc.locales.callforward.sourceset_title[localStorage.getItem('languageSelected')],
                        flex: 1,
                        bind: {
                            value: '{sourceset-' +this._sourcesetListId + '-titleField-value}'
                        }
                    }, {
                        xtype: 'button',
                        html: Ngcp.csc.locales.common.cancel_caps[localStorage.getItem('languageSelected')],
                        name: this._sourcesetListId + '-' + this._secondprefix + 'titleField-cancelButton',
                        margin: '0 0 0 10',
                        handler: 'cancelNewTitle'
                    }, {
                        xtype: 'button',
                        html: Ngcp.csc.locales.common.save_caps[localStorage.getItem('languageSelected')],
                        name: this._sourcesetListId + '-' + this._secondprefix + 'titleField-saveButton',
                        _sourcesetListId: this._sourcesetListId,
                        margin: '0 0 0 10',
                        handler: 'saveNewTitle'
                    }]
                },
                callForwardList || {}, {
                    xtype: 'panel',
                    layout: 'hbox',
                    margin: '15 0 0 0',
                    items: [{
                        xtype: 'button',
                        text: Ngcp.csc.locales.callforward.add_new_source[localStorage.getItem('languageSelected')],
                        id: this._firstprefix + this._secondprefix + 'addButton',
                        width: 135,
                        margin: '0 0 0 620',
                        listeners: {
                            click: 'addEmptySourcesetRow'
                        }
                    }]
                }
            ]
        }, {
            xtype: 'container',
            userCls: 'cf-text cf-subheader',
            html: Ngcp.csc.locales.callforward.when_phone_online[localStorage.getItem('languageSelected')]
        }, {
            xtype: 'container',
            layout: 'hbox',
            margin: '10 0 0 50',
            items: [
                onlineGrid
            ]
        }, {
            xtype: 'panel',
            margin: '10 7 0 155',
            bind: {
                hidden: '{online_add_new_then_hidden}'
            },
            id: this._firstprefix + this._secondprefix + 'onlineThenRingFields',
            layout: 'hbox',
            items: [{
                xtype: 'combo',
                displayField: 'name',
                valueField: 'name',
                store: 'Forwards',
                id: this._firstprefix + this._secondprefix + 'onlineThenDest',
                bind: '{online_then_dest}',
                allowBlank: false,
                editable: false,
                flex: 3,
                margin: '0 10 0 0',
                listeners: {
                    change: 'selectRing'
                }
            }, {
                xtype: 'textfield',
                flex: 3,
                id: this._firstprefix + this._secondprefix + 'onlineThenNumber',
                emptyText: Ngcp.csc.locales.callforward.enter_number[localStorage.getItem('languageSelected')],
                bind: {
                    hidden: '{online_then_timeout_hidden}',
                    value: '{online_then_number}'
                },
                listeners: {
                    specialkey: 'onEnterPressed'
                }
            }, {
                xtype: 'numberfield',
                step: 10,
                minValue: 0,
                maxValue: 300,
                labelWidth: 80,
                fieldLabel: Ngcp.csc.locales.callforward.and_ring_for[localStorage.getItem('languageSelected')],
                id: this._firstprefix + this._secondprefix + 'onlineThenTimeout',
                bind: {
                    value: '{online_then_timeout}',
                    hidden: '{online_then_timeout_hidden}'
                },
                allowBlank: false,
                editable: true,
                flex: 4,
                margin: '0 0 0 10'
            }, {
                xtype: 'container',
                html: Ngcp.csc.locales.callforward.secs[localStorage.getItem('languageSelected')],
                padding: '7 0 0 10',
                flex: 1,
                bind: {
                    hidden: '{online_then_timeout_hidden}'
                }
            }, {
                xtype: 'button',
                text: Ngcp.csc.locales.common.save_caps[localStorage.getItem('languageSelected')],
                id: this._firstprefix + this._secondprefix + 'onlineSaveButton',
                width: 100,
                listeners: {
                    click: 'addNewDestination'
                }
            }]
        }, {
            html: Ngcp.csc.locales.callforward.add_new_destination[localStorage.getItem('languageSelected')],
            xtype: 'button',
            id: this._firstprefix + this._secondprefix + 'onlineButton',
            width: 165,
            margin: '15 0 0 155',
            listeners: {
                click: 'toggleNewDestinationForm'
            },
            bind: {
                hidden: '{online_add_button_hidden}'
            }
        }, {
            html: Ngcp.csc.locales.callforward.cancel_destination[localStorage.getItem('languageSelected')],
            xtype: 'button',
            id: this._firstprefix + this._secondprefix + 'onlineButtonCancel',
            width: 165,
            margin: '15 0 0 155',
            listeners: {
                click: 'toggleNewDestinationForm'
            },
            bind: {
                hidden: '{online_cancel_button_hidden}'
            }
        }, {
            xtype: 'container',
            userCls: 'cf-text cf-subheader',
            html: Ngcp.csc.locales.callforward.when_phone_busy[localStorage.getItem('languageSelected')]
        }, {
            xtype: 'container',
            layout: 'hbox',
            margin: '10 0 0 50',
            items: [
                busyGrid
            ]
        }, {
            xtype: 'panel',
            margin: '10 7 0 155',
            bind: {
                hidden: '{busy_add_new_then_hidden}'
            },
            id: this._firstprefix + this._secondprefix + 'busyThenRingFields',
            layout: 'hbox',
            items: [{
                xtype: 'combo',
                displayField: 'name',
                valueField: 'name',
                store: 'Forwards',
                id: this._firstprefix + this._secondprefix + 'busyThenDest',
                bind: '{busy_then_dest}',
                allowBlank: false,
                editable: false,
                flex: 3,
                margin: '0 10 0 0',
                listeners: {
                    change: 'selectRing'
                }
            }, {
                xtype: 'textfield',
                flex: 3,
                id: this._firstprefix + this._secondprefix + 'busyThenNumber',
                emptyText: Ngcp.csc.locales.callforward.enter_number[localStorage.getItem('languageSelected')],
                bind: {
                    hidden: '{busy_then_timeout_hidden}',
                    value: '{busy_then_number}'
                },
                listeners: {
                    specialkey: 'onEnterPressed'
                }
            }, {
                xtype: 'numberfield',
                step: 10,
                minValue: 0,
                maxValue: 300,
                labelWidth: 80,
                fieldLabel: Ngcp.csc.locales.callforward.and_ring_for[localStorage.getItem('languageSelected')],
                id: this._firstprefix + this._secondprefix + 'busyThenTimeout',
                bind: {
                    value: '{busy_then_timeout}',
                    hidden: '{busy_then_timeout_hidden}'
                },
                allowBlank: false,
                editable: true,
                flex: 4,
                margin: '0 0 0 10'
            }, {
                xtype: 'container',
                html: Ngcp.csc.locales.callforward.secs[localStorage.getItem('languageSelected')],
                padding: '7 0 0 10',
                flex: 1,
                bind: {
                    hidden: '{busy_then_timeout_hidden}'
                }
            }, {
                xtype: 'button',
                text: Ngcp.csc.locales.common.save_caps[localStorage.getItem('languageSelected')],
                id: this._firstprefix + this._secondprefix + 'busySaveButton',
                width: 100,
                listeners: {
                    click: 'addNewDestination'
                }
            }]
        }, {
            html: Ngcp.csc.locales.callforward.add_new_destination[localStorage.getItem('languageSelected')],
            xtype: 'button',
            id: this._firstprefix + this._secondprefix + 'busyButton',
            width: 165,
            margin: '15 0 0 155',
            listeners: {
                click: 'toggleNewDestinationForm'
            },
            bind: {
                hidden: '{busy_add_button_hidden}'
            }
        }, {
            html: Ngcp.csc.locales.callforward.cancel_destination[localStorage.getItem('languageSelected')],
            xtype: 'button',
            id: this._firstprefix + this._secondprefix + 'busyButtonCancel',
            width: 165,
            margin: '15 0 0 155',
            listeners: {
                click: 'toggleNewDestinationForm'
            },
            bind: {
                hidden: '{busy_cancel_button_hidden}'
            }
        }, {
            xtype: 'container',
            userCls: 'cf-text cf-subheader',
            html: Ngcp.csc.locales.callforward.when_phone_offline[localStorage.getItem('languageSelected')]
        }, {
            xtype: 'container',
            layout: 'hbox',
            margin: '10 0 0 50',
            items: [
                offlineGrid
            ]
        }, {
            xtype: 'panel',
            margin: '10 7 0 155',
            bind: {
                hidden: '{offline_add_new_then_hidden}'
            },
            id: this._firstprefix + this._secondprefix + 'offlineThenRingFields',
            layout: 'hbox',
            items: [{
                xtype: 'combo',
                displayField: 'name',
                valueField: 'name',
                store: 'Forwards',
                id: this._firstprefix + this._secondprefix + 'offlineThenDest',
                bind: '{offline_then_dest}',
                allowBlank: false,
                editable: false,
                flex: 3,
                margin: '0 10 0 0',
                listeners: {
                    change: 'selectRing'
                }
            }, {
                xtype: 'textfield',
                flex: 3,
                id: this._firstprefix + this._secondprefix + 'offlineThenNumber',
                emptyText: Ngcp.csc.locales.callforward.enter_number[localStorage.getItem('languageSelected')],
                bind: {
                    hidden: '{offline_then_timeout_hidden}',
                    value: '{offline_then_number}'
                },
                listeners: {
                    specialkey: 'onEnterPressed'
                }
            }, {
                xtype: 'numberfield',
                step: 10,
                minValue: 0,
                maxValue: 300,
                labelWidth: 80,
                fieldLabel: Ngcp.csc.locales.callforward.and_ring_for[localStorage.getItem('languageSelected')],
                id: this._firstprefix + this._secondprefix + 'offlineThenTimeout',
                bind: {
                    value: '{offline_then_timeout}',
                    hidden: '{offline_then_timeout_hidden}'
                },
                allowBlank: false,
                editable: true,
                flex: 4,
                margin: '0 0 0 10'
            }, {
                xtype: 'container',
                html: Ngcp.csc.locales.callforward.secs[localStorage.getItem('languageSelected')],
                padding: '7 0 0 10',
                flex: 1,
                bind: {
                    hidden: '{offline_then_timeout_hidden}'
                }
            }, {
                xtype: 'button',
                text: Ngcp.csc.locales.common.save_caps[localStorage.getItem('languageSelected')],
                id: this._firstprefix + this._secondprefix + 'offlineSaveButton',
                width: 100,
                listeners: {
                    click: 'addNewDestination'
                }
            }]
        }, {
            html: Ngcp.csc.locales.callforward.add_new_destination[localStorage.getItem('languageSelected')],
            xtype: 'button',
            id: this._firstprefix + this._secondprefix + 'offlineButton',
            width: 165,
            margin: '15 0 0 155',
            listeners: {
                click: 'toggleNewDestinationForm'
            },
            bind: {
                hidden: '{offline_add_button_hidden}'
            }
        }, {
            html: Ngcp.csc.locales.callforward.cancel_destination[localStorage.getItem('languageSelected')],
            xtype: 'button',
            id: this._firstprefix + this._secondprefix + 'offlineButtonCancel',
            width: 165,
            margin: '15 0 0 155',
            listeners: {
                click: 'toggleNewDestinationForm'
            },
            bind: {
                hidden: '{offline_cancel_button_hidden}'
            }
        }];

        this.callParent();
    }

});
