/**
  * Calculates the max number of avatars to render
  * @type {ComputedProperty<number>}
  * @memberof StackedAvatarsList
  */
 @computed('avatars.length')
 get maxAvatarLength(): number {
   const {
     avatars: { length }
   } = this;
   return length ? Math.min(length, defaultMavAvatarLength) : defaultMavAvatarLength;
 }

 /**
  * Computed property to check if there is any selection in the
  * facet. If that is the case, a clear button will show up.
  */
 @computed('selections')
 get showClearBtn(): boolean {
   const selections = this.selections || {};
   return Object.keys(selections).reduce((willShowClearBtn: boolean, selectionKey: string) => {
     return willShowClearBtn || selections[selectionKey];
   }, false);
 }

  /**
   * Returns the bootstrap version defined in the config, depending on this value the colums will be rendered differently
   */
  @computed('config')
  get bootstrapVersion() : number | undefined {
    const config = this.config;
    if(config.hasOwnProperty('ember-mist-components') && config['ember-mist-components'].hasOwnProperty('bootstrapVersion')) {
      return config['ember-mist-components'].bootstrapVersion;
    }

    return;
  }

  /**
   * Returns the Recently Viewed records currently in local storage, if nothing is found an empty array is returned
   */
  @computed('storage.recentlyViewedRecords.[]')
  get records() : RecentlyViewedRecord[] {
    let oldRecentlyViewedRecords : RecentlyViewedRecord[] = this.storage.get('recentlyViewedRecords');
    if(isBlank(oldRecentlyViewedRecords)) {
      oldRecentlyViewedRecords = [];
    }

    return oldRecentlyViewedRecords;
  }

  /**
   * We set the authorization header from the session service
   */
  @computed('session.data.authenticated.access_token')
  get headers() {
    const headers: any = {};
    const access_token = this.get('session.data.authenticated.access_token');

    if(!isBlank(access_token)) {
      headers['Authorization'] = `Bearer ${access_token}`;
    }

    return headers;
  }

 @attribute('style')
 @computed('style')
 get _styleString() {
   let s: JSONObject = this.get('style');
   let sProps = [];
   for (let i in s) {
     if (s.hasOwnProperty(i)) {
       sProps.push([i, s[i]]);
     }
   }
   return sProps.map(x => `${x[0]}: ${x[1]}`).join('; ');
 }

  @computed('displayRows')
  get outputDisplayRows() : any[] {
    let outputDisplayRows = [];

    if(!isBlank(this.displayRows)) {
      for(let row of this.displayRows) {
        let emptyRow = true;
        for(let column of row.columns) {
          column.component = replaceAll(column.component, 'input', 'output');

          if(emptyRow) {
            emptyRow = isBlank(this.address.get(column.field));
          }
        }

        row.emptyRow = emptyRow;
        outputDisplayRows.push(row);
      }
    }

    return outputDisplayRows;
  }

 @computed('providerUrl', 'src')
 get _contentUrl() {
   let params: any = this.get('providerParams');
   let queryParams = JSON.parse(JSON.stringify(params)) || {};
   queryParams.url = this.get('src');
   let queryParamList = [];
   for (let k in queryParams) {
     if (queryParams.hasOwnProperty(k)) {
       queryParamList.push([k, queryParams[k]]);
     }
   }
   let queryString =
     queryParamList.length > 0
       ? queryParamList
           .map(x => {
             return `${x[0]}=${x[1]}`;
           })
           .join('&')
       : '';
   const url: string = this.get('providerUrl') || '';
   return `${url}?${queryString}`;
 }

 @computed('value.@each')
 get items() : MutableArray<string> {
   return this.value ? this.value : A();
 }

	/**
	* transform SVG attribute for deacon SVG group - computed from x and y of supplied model
	*/	
	@attribute @computed('model.x','model.y') get transform() : string {
		return "translate(" + this.model.x + "," + this.model.y + ")";
	}