/**
 * Component to display the optional fields (description, images, ...)
 * of a need.
 * Created by ksinger on 10.04.2017.
 */

import angular from 'angular';
import 'ng-redux';
import extendedGalleryModule from '../components/extended-gallery.js';
import { actionCreators }  from '../actions/actions.js';
import {
    attach,
} from '../utils.js'
import {
    connect2Redux,
} from '../won-utils.js'

import {
    relativeTime,
} from '../won-label-utils.js'

const serviceDependencies = ['$ngRedux', '$scope'];
function genComponentConf() {
    let template = `
        <div
          class="pc__text"
          ng-show="self.need.getIn(['location', 's:name'])">
            <img class="pc__icon"
              src="generated/icon-sprite.svg#ico16_indicator_location"/>
            <span>{{ self.need.getIn(['location', 's:name']) }}</span>
        </div>
      <!--
      <div class="pc__images" ng-show="self.need.get('images')">
        <won-extended-gallery
          max-thumbnails="self.maxThumbnails"
          items="self.need.get('images')"
          class="vertical">
        </won-extended-gallery>
      </div>
      -->
        <!--
        <div class="pc__datetime">
          <img class="pc__icon"
            src="generated/icon-sprite.svg#ico16_indicator_time"/>
          <span>Available until 5th May</span>
        </div>
        -->
        <div class="pc__datetime" ng-show="self.relativeCreationDate">
          <img class="pc__icon"
            src="generated/icon-sprite.svg#ico16_indicator_time"/>
          <span>Posted {{ self.relativeCreationDate }}</span>
        </div>
        <div class="pc__text"
          ng-show="!!self.need.get('description')">
          <img
            class="pc__icon"
            src="generated/icon-sprite.svg#ico16_indicator_description"/>
          <span>
            {{ self.need.get('description') }}
          </span>
        </div>
        <div class="pc__text"
          ng-show="!!self.need.get('location')">
          <img
            class="pc__icon"
            src="generated/icon-sprite.svg#ico16_indicator_location"/>
          <span>
            {{ self.need.getIn(['location','address']) }}
          </span>
        </div>
        <div class="pc__text"
          ng-show="!!self.textMessage">
          <img
            class="pc__icon"
            src="generated/icon-sprite.svg#ico16_indicator_message"/>
          <span>
            {{ self.textMessage }}
          </span>
        </div>
    `;

    class Controller {
        constructor() {
            attach(this, serviceDependencies, arguments);
            window.pc4dbg = this;
            const selectFromState = (state) => {
                const lastUpdateTime = state.get('lastUpdateTime');
                const need = state.getIn(['needs', this.needUri]);
                return {
                    need,
                    relativeCreationDate: need && relativeTime(lastUpdateTime, need.get('creationDate')),
                }
            };
            /*
            const disconnect = this.$ngRedux.connect(selectFromState, actionCreators)(this);
            this.$scope.$on('$destroy', disconnect);
            */
            connect2Redux(selectFromState, actionCreators, ['self.needUri'], this);
        }
    }
    Controller.$inject = serviceDependencies;
    return {
        restrict: 'E',
        controller: Controller,
        controllerAs: 'self',
        bindToController: true, //scope-bindings -> ctrl
        scope: {
            needUri: '=',
            /**
             * one of:
             * - "fullpage" (NOT_YET_IMPLEMENTED) (used in post-info page)
             * - "medium" (NOT_YET_IMPLEMENTED) (used in incoming/outgoing requests and matches-tiles)
             * - "small" (NOT_YET_IMPLEMENTED) (in matches-list)
             */
            //size: '=',

            /**
             * Additional text-message that is shown. Use this e.g. when displaying
             * an incoming request.
             */
            textMessage: '=',
        },
        template: template
    }
}

export default angular.module('won.owner.components.postContent', [
    extendedGalleryModule,
])
    .directive('wonPostContent', genComponentConf)
    .name;

@@ -402,67 +402,8 @@
 s'%0A%0A
-import %7B%0A    relativeTime,%0A%7D from '../won-label-utils.js'%0A%0A
 cons
@@ -1297,255 +1297,8 @@
 --%3E%0A
-        %3Cdiv class=%22pc__datetime%22 ng-show=%22self.relativeCreationDate%22%3E%0A          %3Cimg class=%22pc__icon%22%0A            src=%22generated/icon-sprite.svg#ico16_indicator_time%22/%3E%0A          %3Cspan%3EPosted %7B%7B self.relativeCreationDate %7D%7D%3C/span%3E%0A        %3C/div%3E%0A
     
@@ -2377,60 +2377,20 @@
     
-const lastUpdateTime = state.get('lastUpdateTime');%0A
+return %7B%0A   
     
@@ -2405,20 +2405,14 @@
     
-const
  need
- =
+:
  sta
@@ -2448,165 +2448,8 @@
 ri%5D)
-;%0A                return %7B%0A                    need,%0A                    relativeCreationDate: need && relativeTime(lastUpdateTime, need.get('creationDate'))
 ,%0A  

Revert "Show post-creation-dates for incoming requests."