Ext.define('amdaPlotComp.plotFunction.Histogram', {

    extend: 'amdaPlotComp.plotFunction.BaseComponent', // This class extends from amdaPlotComp.plotFunction.BaseComponent
    title: "Histogram Arguments", // The title of this component

    // Define the IDs for the function, bins, and xMin and xMax fields

    functionId: 'histo1d-function',
    binsId: 'histo1d-xbinnumber',
    xMinId: "histo1d-xmin",
    xMaxId: 'histo1d-xmax',

    /**
     * Initializes the component.
     * It creates a combo box for selecting the density type and number fields for entering the xMin, xMax, and number of bins.
     */

    initComponent: function () {

        const self = this;

        // Define combo box store

        const comboStore = Ext.create('Ext.data.Store', {
            fields: ['label', 'value'],
            data: [
                { value: 'density', label: 'Density' },
                { value: 'normdensity', label: 'Normalised Density' }
            ]
        });

        // Create combo box for selecting the density type

        const densityTypeCombo = Ext.create('Ext.form.field.ComboBox', {

            fieldLabel: 'Density Type',

            name: self.functionId,

            store: comboStore,
            queryMode: 'local',
            displayField: 'label',
            valueField: 'value',
            editable: false,
            value: 'density'
        });

        // Add items to the component

        Ext.apply(self, {

            items: [
                {
                    xtype: 'numberfield',
                    fieldLabel: 'X Min',

                    name: self.xMinId,

                    allowDecimals: true,
                    hideTrigger: true,
                    keyNavEnabled: false,
                },
                {
                    xtype: 'numberfield',
                    fieldLabel: 'X Max',

                    name: self.xMaxId,

                    allowDecimals: true,
                    hideTrigger: true,
                    keyNavEnabled: false,
                },
                {
                    xtype: 'numberfield',
                    fieldLabel: 'Number of Bins',

                    name: self.binsId,

                    minValue: 1,
                    value: 100,
                    allowDecimals: false,
                    keyNavEnabled: false,
                },
                densityTypeCombo
            ]
        });

        // Call the parent class's initComponent method

        self.callParent(arguments);

    },

    /**
     * Retrieves the selected values from the combo box and number fields.
     * Returns an object with properties set to these values.
     */

    getValues: function () {

        const densityTypeCombo = this.query('[name=' + this.functionId + ']')[0];
        const densityTypeValue = densityTypeCombo.getValue();

        const numBinsField = this.query('[name=' + this.binsId + ']')[0];
        const numBinsValue = numBinsField.getValue();

        const xMinField = this.query('[name=' + this.xMinId + ']')[0];
        const xMinValue = xMinField.getValue();

        const xMaxField = this.query('[name=' + this.xMaxId + ']')[0];
        const xMaxValue = xMaxField.getValue();

        let out = {};

        out[this.functionId] = densityTypeValue;
        out[this.binsId] = numBinsValue;
        out[this.xMinId] = xMinValue;
        out[this.xMaxId] = xMaxValue;

        return out;
    }

});