/**
* This source file is available under the terms of the
* Pimcore Open Core License (POCL)
* Full copyright and license information is available in
* LICENSE.md which is distributed with this source code.
*
*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.com)
*  @license    Pimcore Open Core License (POCL)
*/

pimcore.registerNS("pimcore.object.classes.data.advancedManyToManyRelation");
/**
 * @private
 */
pimcore.object.classes.data.advancedManyToManyRelation = Class.create(pimcore.object.classes.data.data, {

    type: "advancedManyToManyRelation",
    /**
     * define where this datatype is allowed
     */
    allowIn: {
        object: true,
        objectbrick: true,
        fieldcollection: true,
        localizedfield: true,
        classificationstore : false,
        block: true
    },

    initialize: function (treeNode, initData) {
        this.type = "advancedManyToManyRelation";

        this.initData(initData);

        pimcore.helpers.sanitizeAllowedTypes(this.datax, "classes");
        pimcore.helpers.sanitizeAllowedTypes(this.datax, "assetTypes");
        pimcore.helpers.sanitizeAllowedTypes(this.datax, "documentTypes");

        // overwrite default settings
        this.availableSettingsFields = ["name","title","tooltip","mandatory","noteditable","invisible",
            "visibleGridView","visibleSearch","style"];

        this.treeNode = treeNode;
    },

    getGroup: function () {
        return "relation";
    },

    getTypeName: function () {
        return t("advanced_many_to_many_relation");
    },

    getIconClass: function () {
        return "pimcore_icon_advancedManyToManyRelation";
    },

    getLayout: function ($super) {

        $super();

        this.uniqeFieldId = uniqid();
        this.specificPanel.removeAll();

        let i;
        let allowedDocuments = [];
        let allowedAssets = [];
        let allowedClasses = [];

        let assetTypeStore = null;
        let documentTypeStore = null;
        let classesStore = null;

        if (!this.isInCustomLayoutEditor()) {
            if (this.datax.classes && typeof this.datax.classes == "object") {
                // this is when it comes from the server
                for (i = 0; i < this.datax.classes.length; i++) {
                    allowedClasses.push(this.datax.classes[i]);
                }
            } else if (typeof this.datax.classes == "string") {
                // this is when it comes from the local store
                allowedClasses = this.datax.classes.split(",");
            }

            if (this.datax.documentTypes && typeof this.datax.documentTypes == "object") {
                // this is when it comes from the server
                for (i = 0; i < this.datax.documentTypes.length; i++) {
                    allowedDocuments.push(this.datax.documentTypes[i]);
                }
            } else if (typeof this.datax.documentTypes == "string") {
                // this is when it comes from the local store
                allowedDocuments = this.datax.documentTypes.split(",");
            }

            if (this.datax.assetTypes && typeof this.datax.assetTypes == "object") {
                // this is when it comes from the server
                for (i = 0; i < this.datax.assetTypes.length; i++) {
                    allowedAssets.push(this.datax.assetTypes[i]);
                }
            } else if (typeof this.datax.assetTypes == "string") {
                // this is when it comes from the local store
                allowedAssets = this.datax.assetTypes.split(",");
            }

            classesStore = new Ext.data.Store({
                proxy: {
                    type: 'ajax',
                    url: Routing.generate('pimcore_admin_dataobject_class_gettree')
                },
                autoDestroy: true,
                fields: ["text"]
            });
            classesStore.load({
                "callback": function (classesStore, allowedClasses, success) {
                    if (!classesStore.destroyed) {
                        // not handled correctly by insert
                        classesStore.insert(0, {'id': 'folder', 'text': 'folder'});
                        if (success) {
                            Ext.getCmp('class_allowed_object_classes_' + this.uniqeFieldId).setValue(allowedClasses.join(","));
                        }
                    }
                }.bind(this, classesStore, allowedClasses)
            });

            documentTypeStore = new Ext.data.Store({
                proxy: {
                    type: 'ajax',
                    url: Routing.generate('pimcore_admin_dataobject_class_getdocumenttypes')
                },
                autoDestroy: true,
                fields: ["text"]
            });
            documentTypeStore.load({
                "callback": function (allowedDocuments, success) {
                    if (success) {
                        Ext.getCmp('class_allowed_document_types_' + this.uniqeFieldId).setValue(allowedDocuments.join(","));
                    }
                }.bind(this, allowedDocuments)
            });

            assetTypeStore = new Ext.data.Store({
                proxy: {
                    type: 'ajax',
                    url: Routing.generate('pimcore_admin_dataobject_class_getassettypes')
                },
                autoDestroy: true,
                fields: ["text"]
            });
            assetTypeStore.load({
                "callback": function (allowedAssets, success) {
                    if (success) {
                        Ext.getCmp('class_allowed_asset_types_' + this.uniqeFieldId).setValue(allowedAssets.join(","));
                    }
                }.bind(this, allowedAssets)
            });
        }



        this.specificPanel.add([
            {
                xtype: "textfield",
                fieldLabel: t("width"),
                name: "width",
                value: this.datax.width
            },
            {
                xtype: "displayfield",
                hideLabel: true,
                value: t('width_explanation')
            },
            {
                xtype: "numberfield",
                fieldLabel: t("height"),
                name: "height",
                value: this.datax.height
            },
            {
                xtype: "displayfield",
                hideLabel: true,
                value: t('height_explanation')
            },
        ]);

        this.stores = {};
        this.grids = {};

        if (!this.isInCustomLayoutEditor()) {
            this.specificPanel.add([
                {
                    xtype: "numberfield",
                    fieldLabel: t("maximum_items"),
                    name: "maxItems",
                    value: this.datax.maxItems,
                    minValue: 0
                },
                {
                    xtype: 'textfield',
                    width: 600,
                    fieldLabel: t("path_formatter_service"),
                    name: 'pathFormatterClass',
                    value: this.datax.pathFormatterClass
                },
                {
                    xtype:'fieldset',
                    title: t('document_restrictions'),
                    collapsible: false,
                    autoHeight:true,
                    labelWidth: 100,
                    items :[
                        {
                            xtype: "checkbox",
                            name: "documentsAllowed",
                            fieldLabel: t("allow_documents"),
                            checked: this.datax.documentsAllowed,
                            listeners:{
                                change:function(cbox, checked) {
                                    if (checked) {
                                        Ext.getCmp('class_allowed_document_types_' + this.uniqeFieldId).show();
                                    } else {
                                        Ext.getCmp('class_allowed_document_types_' + this.uniqeFieldId).hide();

                                    }
                                }.bind(this)
                            }
                        },
                        new Ext.ux.form.MultiSelect({
                            fieldLabel: t("allowed_document_types") + '<br />' + t('allowed_types_hint'),
                            name: "documentTypes",
                            id: 'class_allowed_document_types_' + this.uniqeFieldId,
                            hidden: !this.datax.documentsAllowed,
                            allowEdit: this.datax.documentsAllowed,
                            value: allowedDocuments.join(","),
                            displayField: "text",
                            valueField: "text",
                            store: documentTypeStore,
                            width: 400
                        })
                    ]
                },
                {
                    xtype:'fieldset',
                    title: t('asset_restrictions'),
                    collapsible: false,
                    autoHeight:true,
                    labelWidth: 100,
                    items :[
                        {
                            xtype: "checkbox",
                            fieldLabel: t("allow_assets"),
                            name: "assetsAllowed",
                            checked: this.datax.assetsAllowed,
                            listeners:{
                                change:function(cbox, checked) {
                                    if (checked) {
                                        Ext.getCmp('class_allow_inline_download_' + this.uniqeFieldId).show();
                                    Ext.getCmp('class_allowed_asset_types_' + this.uniqeFieldId).show();
                                    Ext.getCmp('class_asset_upload_path_' + this.uniqeFieldId).show();
                                } else {
                                    Ext.getCmp('class_allow_inline_download_' + this.uniqeFieldId).hide();
                                        Ext.getCmp('class_allowed_asset_types_' + this.uniqeFieldId).hide();
                                        Ext.getCmp('class_asset_upload_path_' + this.uniqeFieldId).hide();

                                    }
                                }.bind(this)
                            }
                        },
                        {
                        fieldLabel: t("allow_asset_inline_download"),
                        name: "assetInlineDownloadAllowed",
                        id: 'class_allow_inline_download_' + this.uniqeFieldId,
                        hidden: !this.datax.assetsAllowed,
                        allowEdit: this.datax.assetsAllowed,
                        value: this.datax.assetInlineDownloadAllowed,
                        xtype: 'checkbox'
                    },
                    new Ext.ux.form.MultiSelect({
                        fieldLabel: t("allowed_asset_types") + '<br />' + t('allowed_types_hint'),
                        name: "assetTypes",
                        id: 'class_allowed_asset_types_' + this.uniqeFieldId,
                        hidden: !this.datax.assetsAllowed,
                        allowEdit: this.datax.assetsAllowed,
                        value: allowedAssets.join(","),
                        displayField: "text",
                        valueField: "text",
                        store: assetTypeStore,
                        width: 400
                    })
                    ,
                    {
                        fieldLabel: t("upload_path"),
                        name: "assetUploadPath",
                        hidden: !this.datax.assetsAllowed,
                        id: 'class_asset_upload_path_' + this.uniqeFieldId,
                        fieldCls: "input_drop_target",
                        value: this.datax.assetUploadPath,
                        width: 500,
                        xtype: "textfield",
                        listeners: {
                            "render": function (el) {
                                new Ext.dd.DropZone(el.getEl(), {
                                    //reference: this,
                                    ddGroup: "element",
                                    getTargetFromEvent: function(e) {
                                        return this.getEl();
                                    }.bind(el),

                                        onNodeOver : function(target, dd, e, data) {
                                            if (data.records.length === 1 && data.records[0].data.elementType === "asset") {
                                                return Ext.dd.DropZone.prototype.dropAllowed;
                                            }
                                        },

                                        onNodeDrop : function (target, dd, e, data) {

                                            if(!pimcore.helpers.dragAndDropValidateSingleItem(data)) {
                                                return false;
                                            }

                                            data = data.records[0].data;
                                            if (data.elementType == "asset") {
                                                this.setValue(data.path);
                                                return true;
                                            }
                                            return false;
                                        }.bind(el)
                                    });
                                }
                            }
                        }
                    ]
                },
                {
                    xtype:'fieldset',
                    title: t('object_restrictions') ,
                    collapsible: false,
                    autoHeight:true,
                    labelWidth: 100,
                    items :[
                        {
                            xtype: "checkbox",
                            fieldLabel: t("allow_objects"),
                            name: "objectsAllowed",
                            checked: this.datax.objectsAllowed,
                            listeners:{
                                change:function(cbox, checked) {
                                    if (checked) {
                                        Ext.getCmp('class_allowed_object_classes_' + this.uniqeFieldId).show();
                                    } else {
                                        Ext.getCmp('class_allowed_object_classes_' + this.uniqeFieldId).hide();

                                    }
                                }.bind(this)
                            }
                        },
                        new Ext.ux.form.MultiSelect({
                            fieldLabel: t("allowed_classes") + '<br />' + t('allowed_types_hint'),
                            name: "classes",
                            id: 'class_allowed_object_classes_' + this.uniqeFieldId,
                            hidden: !this.datax.objectsAllowed,
                            allowEdit: this.datax.objectsAllowed,
                            value: allowedClasses.join(","),
                            displayField: "text",
                            valueField: "text",
                            store: classesStore,
                            width: 400
                        })
                    ]
                }

            ]);

            this.specificPanel.add(this.getGrid("cols", this.datax.columns, true));

            this.specificPanel.add({
                xtype: "checkbox",
                boxLabel: t("enable_text_selection"),
                name: "enableTextSelection",
                value: this.datax.enableTextSelection
            });

            this.specificPanel.add({
                xtype: "checkbox",
                boxLabel: t("enable_batch_edit_columns"),
                name: "enableBatchEdit",
                value: this.datax.enableBatchEdit
            });

            this.specificPanel.add({
                xtype: "checkbox",
                boxLabel: t("allow_multiple_assignments"),
                name: "allowMultipleAssignments",
                value: this.datax.allowMultipleAssignments
            });

            this.specificPanel.add({
            xtype: "checkbox",
            boxLabel: t("allow_to_clear_relation"),
            name: "allowToClearRelation",
            value: this.datax.allowToClearRelation ?? true
        });

        if(this.context == 'class') {
            this.specificPanel.add({
                xtype: "checkbox",
                boxLabel: t("enable_admin_async_load"),
                name: "optimizedAdminLoading",
                value: this.datax.optimizedAdminLoading
            });
            this.specificPanel.add({
                xtype: "displayfield",
                hideLabel: true,
                value: t('async_loading_warning_block'),
                cls: "pimcore_extra_label_bottom"
            });}
        }

        return this.layout;
    },


    getGrid: function (title, data, hasType) {

        var fields = [
            'position',
            'key',
            'label'
        ];

        if(hasType) {
            fields.push('type');
            fields.push('value');
            fields.push('width');
        }

        this.stores[title] = new Ext.data.JsonStore({
            autoDestroy: false,
            autoSave: false,
            idIndex: 1,
            fields: fields
        });

        if(!data || data.length < 1) {
            data = [];
        }

        if(data) {
            this.stores[title].loadData(data);
        }

        var keyTextField = new Ext.form.TextField({
            //validationEvent: false,
            validator: function(value) {
                value = trim(value);
                var regresult = value.match(/[a-zA-Z0-9_]+/);

                if (value.length > 1 && regresult == value
                    && in_array(value.toLowerCase(), ["id","key","path","type","index","classname",
                    "creationdate","userowner","value","class","list","fullpath","childs","children","values","cachetag",
                    "cachetags","parent","published","valuefromparent","userpermissions","dependencies",
                    "modificationdate","usermodification","byid","bypath","data","versions","properties",
                    "permissions","permissionsforuser","childamount","apipluginbroker","resource",
                    "parentClass","definition","locked","language"]) == false) {
                    return true;
                } else {
                    return t("objectsMetadata_invalid_key");
                }
            }
        });


        var typesColumns = [
            {text: t("position"), width: 65, sortable: true, dataIndex: 'position',
                editor: new Ext.form.NumberField({})},
            {text: t("key"), flex: 40, sortable: true, dataIndex: 'key', editor: keyTextField},
            {text: t("label"), flex: 40, sortable: true, dataIndex: 'label', editor: new Ext.form.TextField({})}
        ];

        if(hasType) {
            var types = {
                number: t("objectsMetadata_type_number"),
                text: t("objectsMetadata_type_text"),
                select: t("objectsMetadata_type_select"),
                bool: t("objectsMetadata_type_bool"),
                columnbool: t("objectsMetadata_type_columnbool"),
                multiselect: t("objectsMetadata_type_multiselect")
            };

            var typeComboBox = new Ext.form.ComboBox({
                triggerAction: 'all',
                allowBlank: false,
                lazyRender: true,
                editable: false,
                mode: 'local',
                store: new Ext.data.ArrayStore({
                    id: 'value',
                    fields: [
                        'value',
                        'label'
                    ],
                    data: [
                        ['number', types.number],
                        ['text', types.text],
                        ['select', types.select],
                        ['bool', types.bool],
                        ['columnbool', types.columnbool],
                        ['multiselect', types.multiselect]
                    ]
                }),
                valueField: 'value',
                displayField: 'label'
            });

            typesColumns.push({text: t("type"), width: 120, sortable: true, dataIndex: 'type', editor: typeComboBox,
                renderer: function(value) {
                    return types[value];
                }});
            typesColumns.push({text: t("value"), flex: 80, sortable: true, dataIndex: 'value',
                editor: new Ext.form.TextField({})});
            typesColumns.push({text: t("width"), width: 80, sortable: true, dataIndex: 'width',
                editor: new Ext.form.NumberField({})});


        }

        this.cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        });


        this.grids[title] = Ext.create('Ext.grid.Panel', {
            title: t(title),
            autoScroll: true,
            autoDestroy: false,
            store: this.stores[title],
            height: 200,
            columns : typesColumns,
            selModel: Ext.create('Ext.selection.RowModel', {}),
            plugins: [
                this.cellEditing
            ],
            columnLines: true,
            name: title,
            tbar: [
                {
                    text: t('add'),
                    handler: this.onAdd.bind(this, this.stores[title], hasType),
                    iconCls: "pimcore_icon_add"
                },
                '-',
                {
                    text: t('delete'),
                    handler: this.onDelete.bind(this, this.stores[title], title),
                    iconCls: "pimcore_icon_delete"
                },
                '-'
            ],
            viewConfig: {
                forceFit: true
            }
        });

        return this.grids[title];
    },

    onAdd: function (store, hasType, btn, ev) {
        var u = {};
        if(hasType) {
            u.type = "text";
        }
        u.position = store.getCount() + 1;
        u.key = "name";
        store.add(u);
    },

    onDelete: function (store, title) {
        if(store.getCount() > 0) {
            var selections = this.grids[title].getSelectionModel().getSelected();
            if (!selections || selections.getCount() == 0) {
                return false;
            }
            var rec = selections.getAt(0);
            store.remove(rec);
        }
    } ,

    getData: function () {
        if(this.grids && this.stores.cols) {
            const cols = [];
            this.stores.cols.each(function(rec) {
                delete rec.data.id;
                cols.push(rec.data);
                rec.commit();
            });
            this.datax.columns = cols;
        }

        return this.datax;
    },

    applyData: function ($super){
        $super();
        return this.getData();
    },

    applySpecialData: function(source) {
        if (source.datax) {
            if (!this.datax) {
                this.datax =  {};
            }
            Ext.apply(this.datax,
                {
                    width: source.datax.width,
                    height: source.datax.height,
                    maxItems: source.datax.maxItems,
                    columns: source.datax.columns,
                    remoteOwner: source.datax.remoteOwner,
                    assetInlineDownloadAllowed: source.datax.assetInlineDownloadAllowed,
                    assetUploadPath: source.datax.assetUploadPath,
                    relationType: source.datax.relationType,
                    objectsAllowed: source.datax.objectsAllowed,
                    classes: source.datax.classes,
                    assetsAllowed: source.datax.assetsAllowed,
                    allowToClearRelation: source.datax.allowToClearRelation,
                    assetTypes: source.datax.assetTypes,
                    documentsAllowed: source.datax.documentsAllowed,
                    documentTypes: source.datax.documentTypes,
                    pathFormatterClass: source.datax.pathFormatterClass,
                    enableBatchEdit: source.datax.enableBatchEdit,
                    allowMultipleAssignments: source.datax.allowMultipleAssignments,
                    optimizedAdminLoading: source.datax.optimizedAdminLoading
                });
        }
    }

});
