/**
 * A base implementation of a form for the modern toolkit.
 * @abstract
 */
Ext.define('Ext.calendar.form.AbstractForm', {
    extend: 'Ext.form.Panel',
 
    requires: [
        'Ext.calendar.form.CalendarPicker',
        'Ext.calendar.form.TimeField',
        'Ext.field.Text',
        'Ext.field.TextArea',
        'Ext.field.DatePicker',
        'Ext.form.FieldSet',
        'Ext.layout.HBox'
    ],
 
    trackResetOnLoad: true,
    defaultListenerScope: true,
 
    platformConfig: {
        '!desktop': {
            width: '100%',
            height: '100%',
            layout: 'fit',
            isCompact: true,
            fullscreen: true
        },
 
        'desktop': {
            modal: true,
            centered: true,
            scrollable: 'y'
        }
    },
 
    floated: true,
 
    config: {
        /**
         * @cfg {Object} calendarField
         * The config for the calendar field.
         */
        calendarField: {
            xtype: 'calendar-calendar-picker',
            label: 'Calendar',
            name: 'calendarId',
            displayField: 'title',
            valueField: 'id'
        },
 
        /**
         * @cfg {Object} titleField
         * The config for the title field.
         */
        titleField: {
            xtype: 'textfield',
            label: 'Title',
            name: 'title'
        },
 
        /**
         * @cfg {Object} startDateField
         * The config for the start date field.
         */
        startDateField: {
            xtype: 'datepickerfield',
            label: 'From',
            itemId: 'startDate',
            name: 'startDate'
        },
 
        /**
         * @cfg {Object} startTimeField
         * The config for the start time field.
         */
        startTimeField: {
            xtype: 'calendar-timefield',
            label: ' ',
            itemId: 'startTime',
            name: 'startTime'
        },
 
        /**
         * @cfg {Object} endDateField
         * The config for the end date field.
         */
        endDateField: {
            xtype: 'datepickerfield',
            label: 'To',
            itemId: 'endDate',
            name: 'endDate'
        },
 
        /**
         * @cfg {Object} endTimeField
         * The config for the end time field.
         */
        endTimeField: {
            xtype: 'calendar-timefield',
            label: ' ',
            itemId: 'endTime',
            name: 'endTime'
        },
 
        /**
         * @cfg {Object} allDayField
         * The config for the all day field.
         */
        allDayField: {
            xtype: 'checkboxfield',
            itemId: 'allDay',
            name: 'allDay',
            label: 'All Day',
            listeners: {
                change: 'onAllDayChange'
            }
        },
 
        /**
         * @cfg {Object} descriptionField
         * The config for the description field.
         */
        descriptionField: {
            xtype: 'textareafield',
            label: 'Description',
            name: 'description',
            flex: 1,
            minHeight: '6em'
        },
 
        /**
         * @cfg {Object} dropButton
         * The config for the drop button. `null` to not show this button.
         */
        dropButton: {
            text: 'Delete',
            handler: 'onDropTap'
        },
 
        /**
         * @cfg {Object} saveButton
         * The config for the save button.
         */
        saveButton: {
            text: 'Save',
            handler: 'onSaveTap'
        },
 
        /**
         * @cfg {Object} cancelButton
         * The config for the cancel button.
         */
        cancelButton: {
            text: 'Cancel',
            handler: 'onCancelTap'
        }
    },
 
    initialize: function() {
        var me = this;
 
        me.initForm();
        me.add({
            xtype: 'toolbar',
            docked: 'bottom',
            items: me.generateButtons()
        });
        me.callParent();
        me.applyValues();
        me.checkFields();
    },
 
    generateButtons: function() {
        var buttons = [],
            drop = this.getDropButton();
 
        if (drop) {
            buttons.push(drop);
        }
 
        buttons.push({
            xtype: 'component',
            flex: 1
        }, this.getCancelButton(), this.getSaveButton());
 
        return buttons;
    },
 
    fieldQuery: function() {
        return this.query('[isField][?name]');
    },
 
    applyValues: function() {
        this.setValues(this.consumeEventData());
    },
 
    createItems: function() {
        var me = this,
            calField = me.getCalendarField();
 
        if (!calField.store) {
            calField.store = me.getCalendarStore();
        }
 
        me.add([{
            xtype: 'fieldset',
            scrollable: me.isCompact ? 'y' : undefined,
            margin: 0,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                calField,
                me.getTitleField(),
                me.getStartDateField(),
                me.getStartTimeField(),
                me.getEndDateField(),
                me.getEndTimeField(),
                me.getAllDayField(),
                me.getDescriptionField()
            ]
        }]);
    },
 
    privates: {
        checkFields: function() {
            var checked = this.down('#allDay').isChecked();
 
            this.down('#startTime').setDisabled(checked);
            this.down('#endTime').setDisabled(checked);
        },
 
        onAllDayChange: function() {
            this.checkFields();
        },
 
        onCancelTap: function() {
            this.fireCancel();
        },
 
        onDropTap: function() {
            this.fireDrop();
        },
 
        onSaveTap: function() {
            this.fireSave(this.produceEventData(this.getValues()));
        }
    }
});