oroinc / orocommerce

    'use strict';

    var BaseProductView;

    var BaseView = require('oroui/js/app/views/base/view');

    var ElementsHelper = require('orofrontend/js/app/elements-helper');

    var BaseModel = require('oroui/js/app/models/base/model');

    var mediator = require('oroui/js/mediator');

    var routing = require('routing');

    var $ = require('jquery');

    var _ = require('underscore');

    BaseProductView = BaseView.extend(_.extend({}, ElementsHelper, {

        optionNames: BaseView.prototype.optionNames.concat(['normalizeQuantityField']),

        normalizeQuantityField: true,

        elements: {

            productItem: '[data-role="product-item"]',

            quantity: ['lineItem', '[data-name="field__quantity"]:first'],

            unit: ['lineItem', '[data-name="field__unit"]:first'],

            lineItem: '[data-role="line-item-form-container"]',

            lineItemFields: ':input[data-name]'

        },

        elementsEvents: {

            'quantity input': ['input', 'onQuantityChange']

        },

        modelElements: {

            quantity: 'quantity',

            unit: 'unit'

        },

        modelAttr: {

            id: 0,

            quantity: 0,

            unit: '',

            product_units: {},

            line_item_form_enable: true

        },

        modelEvents: {

            id: ['change', 'onProductChanged'],

            line_item_form_enable: ['change', 'onLineItemFormEnableChanged'],

            unit_label: ['change', 'changeUnitLabel'],

            unit: ['change', 'onUnitChange']

        },

        originalProductId: null,

        initialize: function(options) {

            BaseProductView.__super__.initialize.apply(this, arguments);

            this.rowId = this.$el.parent().data('row-id');

            this.initModel(options);

            this.initializeElements(options);

            this.setPrecision();

            this.originalProductId = this.model.get('parentProduct');

            this.initializeSubviews({

                productModel: this.model,

                options: {

                    productModel: this.model

                }

            });

        },

        initModel: function(options) {

            this.modelAttr = $.extend(true, {}, this.modelAttr, options.modelAttr || {});

            if (!this.model) {

                this.model = (_.isObject(this.collection) && this.collection.get(this.rowId)) ?

                    this.collection.get(this.rowId) : new BaseModel();

            }

            _.each(this.modelAttr, function(value, attribute) {

                if (!this.model.has(attribute)) {

                    this.model.set(attribute, value);

                }

            }, this);

        },

        onProductChanged: function() {

            var modelProductId = this.model.get('id');

            this.model.set('line_item_form_enable', Boolean(modelProductId));

            var productId = modelProductId || this.originalProductId;

            mediator.trigger('layout-subtree:update:product', {

                layoutSubtreeUrl: routing.generate('oro_product_frontend_product_view', {

                    id: productId,

                    parentProductId: this.model.get('parentProduct'),

                    ignoreProductVariant: true

                }),

                layoutSubtreeCallback: _.bind(this.afterProductChanged, this)

            });

        },

        onQuantityChange: function(e) {

            this.setModelValueFromElement(e, 'quantity', 'quantity');

        },

        onUnitChange: function() {

            this.setPrecision();

        },

        setPrecision: function() {

            var precision = this.model.get('product_units')[this.model.get('unit')];

            this.getElement('quantity')

                .data('precision', precision)

                .inputWidget('refresh');

        },

        changeUnitLabel: function() {

            var $unit = this.getElement('unit');

            var unitLabel = this.model.get('unit_label');

            $unit.find('option').each(function() {

                var $option = $(this);

                if (!$option.data('originalText')) {

                    $option.data('originalText', this.text);

                }

                if (unitLabel && this.selected) {

                    this.text = unitLabel;

                } else {

                    this.text = $option.data('originalText');

                }

            });

            $unit.inputWidget('refresh');

        },

        afterProductChanged: function() {

            this.undelegateElementsEvents();

            this.clearElementsCache();

            this.setModelValueFromElements();

            this.delegateElementsEvents();

            this.onLineItemFormEnableChanged();

        },

        onLineItemFormEnableChanged: function() {

            if (this.model.get('line_item_form_enable')) {

                this.enableLineItemForm();

            } else {

                this.disableLineItemForm();

            }

        },

        enableLineItemForm: function() {

            this.getLineItemFields().prop('disabled', false).inputWidget('refresh');

            this.getLineItem().removeClass('disabled');

        },

        disableLineItemForm: function() {

            this.getLineItemFields().prop('disabled', true).inputWidget('refresh');

            this.getLineItem().addClass('disabled');

        },

        getLineItem: function() {

            var $innerLineItem = this.getElement('productItem').find(this.elements.lineItem);

            return this.getElement('lineItem').not($innerLineItem);

        },

        dispose: function() {

            delete this.modelAttr;

            delete this.rowId;

            this.disposeElements();

            BaseProductView.__super__.dispose.apply(this, arguments);

        }

    }));

    return BaseProductView;

});