/**
  @module ember-flexberry
*/

import { computed  } from '@ember/object';
import FlexberryFile from './../flexberry-file';

/**
  Mobile version of {{#crossLink "FlexberryFileComponent"}}flexberry-file{{/crossLink}} component (with mobile-specific defaults).

  @class Mobile.FlexberryFileComponent
  @extends FlexberryFileComponent
*/
export default FlexberryFile.extend({
  /**
    Flag: whether component is mobile or not.
    Used in base class for class names bindings.

    @property _isMobile
    @type Boolean
    @default true
    @private
  */
  _isMobile: true,

  /**
    Items for component's menu.

    @readOnly
    @property _menuItems
    @type Object[]
    @private
  */
  _menuItems: computed('showPreview', 'readonly', 'i18n.locale', '_uploadButtonIsVisible', '_downloadButtonIsVisible', function() {
    let menuSubItems = [];
    if (this.get('showPreview')) {
      menuSubItems.push({
        icon: 'zoom icon',
        title: this.get('i18n').t('components.flexberry-file.menu-for-file.zoom-image-item-caption'),
        isZoomItem: true
      });
    }

    if (!this.get('readonly')) {
      menuSubItems.push({
        icon: 'file outline icon',
        title: this.get('i18n').t('components.flexberry-file.menu-for-file.replace-file-item-caption'),
        isReplaceItem: true
      });
    }

    if (!this.get('readonly')) {
      menuSubItems.push({
        icon: 'trash icon',
        title: this.get('i18n').t('components.flexberry-file.menu-for-file.delete-file-item-caption'),
        isDeleteItem: true
      });
    }
    if (this.get('_uploadButtonIsVisible')) {
      menuSubItems.push({
        icon: 'upload outline icon',
        title: this.get('i18n').t('components.flexberry-file.upload-button-title'),
        isUploadItem: true
      });
    }
    if (this.get('_downloadButtonIsVisible')) {
      menuSubItems.push({
        icon: 'download outline icon',
        title: this.get('i18n').t('components.flexberry-file.download-button-title'),
        isDownloadItem: true
      });
    }
    return [{
      icon: 'list layout icon',
      itemsAlignment: undefined,
      items: menuSubItems
    }];
  }),

  actions: {
    /**
      Handles click on menu item of selected file.

      @method actions.onMenuItemClick
      @param {Object} e Information about selected menu item.
      @param {Object} [e.data] Data of selected menu item.
      @public
    */
    onMenuItemClick(e) {
      if (!e.item) {
        return;
      }

      if (e.item.isZoomItem) {
        this.send('viewLoadedImage');

        return;
      }

      if (e.item.isReplaceItem) {
        let addButton = this.$('.flexberry-file-add-button');
        addButton.click();

        return;
      }

      if (e.item.isDeleteItem) {
        this.removeFile();

        return;
      }

      if (e.item.isDownloadItem) {
        this.downloadFile();

        return;
      }

      if (e.item.isUploadItem){
        this.uploadFile();

        return;
      }
    }
  },

  /**
    Components class names bindings.

    @property classNameBindings
    @type String[]
    @default ['isMobile:mobile']
  */
  classNameBindings: ['_isMobile:mobile'],

  /**
    Flag: indicates whether to show preview element for images or not.

    @property showPreview
    @type Boolean
    @default true
  */
  showPreview: true,

  /**
    Handles end of rerender.
    Dropdown part of menu is initialized here in order to get dropdown behavior,
    when menu disappeares after item selecting.
  */
  didRender() {
    this._super(...arguments);

    // TODO: Move collapse menu logic into flexberry-menu component,
    // make it available through component setting (for example collapseMenuOnItemClick=true),
    // and remove all didRender logic then.
    let dropdownElement = this.$('.flexberry-file-menu .dropdown');
    if (dropdownElement && dropdownElement.length > 0) {
      dropdownElement.dropdown();
    }
  },
});