/**
 * Created by ksinger on 10.05.2016.
 */

import angular from "angular";
import postHeaderModule from "./post-header.js";
import postContextDropdownModule from "./post-context-dropdown.js";
import postContentModule from "./post-content.js";
import { attach, getIn } from "../utils.js";
import { connect2Redux } from "../won-utils.js";
import { isWhatsNewNeed } from "../need-utils.js";
import { getPostUriFromRoute } from "../selectors/general-selectors.js";
import { actionCreators } from "../actions/actions.js";
import { classOnComponentRoot } from "../cstm-ng-utils.js";

import "style/_post-info.scss";

const serviceDependencies = ["$ngRedux", "$scope", "$element"];
function genComponentConf() {
  let template = `
        <div class="post-info__header" ng-if="self.includeHeader">
            <a class="post-info__header__back clickable"
               ng-click="self.router__stateGoCurrent({postUri : null})">
                <svg style="--local-primary:var(--won-primary-color);"
                     class="post-info__header__back__icon clickable">
                    <use xlink:href="#ico36_backarrow" href="#ico36_backarrow"></use>
                </svg>
            </a>
            <won-post-header
                need-uri="self.post.get('uri')"
                timestamp="self.createdTimestamp"
                hide-image="::false">
            </won-post-header>
            <won-post-context-dropdown></won-post-context-dropdown>
        </div>
        <won-post-content post-uri="self.postUri"></won-post-content>
        <div class="post-info__footer" ng-if="!self.postLoading && !self.postFailedToLoad && self.showCreateWhatsAround()">
            <button class="won-button--filled red post-info__footer__button"
                ng-if="self.showCreateWhatsAround()"
                ng-click="self.createWhatsAround()"
                ng-disabled="self.processingPublish">
                <svg class="won-button-icon" style="--local-primary:white;">
                    <use xlink:href="#ico36_location_current" href="#ico36_location_current"></use>
                </svg>
                <span ng-if="!self.processingPublish">What's in your Area?</span>
                <span ng-if="self.processingPublish">Finding out what's going on&hellip;</span>
            </button>
        </div>
    `;

  class Controller {
    constructor() {
      attach(this, serviceDependencies, arguments);
      window.pi4dbg = this;

      const selectFromState = state => {
        const postUri = getPostUriFromRoute(state);
        const post = state.getIn(["needs", postUri]);

        return {
          processingPublish: state.getIn(["process", "processingPublish"]),
          postUri,
          post,
          postLoading:
            !post ||
            getIn(state, ["process", "needs", post.get("uri"), "loading"]),
          postFailedToLoad:
            post &&
            getIn(state, ["process", "needs", post.get("uri"), "failedToLoad"]),
          createdTimestamp: post && post.get("creationDate"),
        };
      };
      connect2Redux(
        selectFromState,
        actionCreators,
        ["self.includeHeader"],
        this
      );

      classOnComponentRoot("won-is-loading", () => this.postLoading, this);
    }

    showCreateWhatsAround() {
      return this.post && this.post.get("isOwned") && isWhatsNewNeed(this.post);
    }

    createWhatsAround() {
      if (!this.processingPublish) {
        this.needs__whatsAround();
      }
    }
  }

  Controller.$inject = serviceDependencies;
  return {
    restrict: "E",
    controller: Controller,
    controllerAs: "self",
    bindToController: true, //scope-bindings -> ctrl
    template: template,
    scope: {
      includeHeader: "=",
    },
  };
}

export default angular
  .module("won.owner.components.postInfo", [
    postHeaderModule,
    postContextDropdownModule,
    postContentModule,
  ])
  .directive("wonPostInfo", genComponentConf).name;

@@ -843,16 +843,63 @@
 ckable%22%0A
+                ng-if=%22!self.showOverlayNeed%22%0A 
         
@@ -959,24 +959,24 @@
  : null%7D)%22%3E%0A
-
             
@@ -1230,16 +1230,425 @@
    %3C/a%3E%0A
+            %3Ca class=%22post-info__header__back clickable%22%0A                ng-if=%22self.showOverlayNeed%22%0A                ng-click=%22self.router__back()%22%3E%0A                %3Csvg style=%22--local-primary:var(--won-primary-color);%22%0A                     class=%22post-info__header__back__icon clickable%22%3E%0A                    %3Cuse xlink:href=%22#ico36_close%22 href=%22#ico36_close%22%3E%3C/use%3E%0A                %3C/svg%3E%0A            %3C/a%3E%0A
         
@@ -2946,23 +2946,318 @@
     
-const postUri =
+/*%0A          If the post-info component has a need-uri attribute we display this need-uri instead of the postUriFromTheRoute%0A          This way we can include a overlay-close button instead of the current back-button handling%0A        */%0A        const postUri = this.needUri%0A          ? this.needUri%0A          :
  get
@@ -3775,16 +3775,59 @@
 Date%22),%0A
+          showOverlayNeed: !!this.needUri,%0A
         
@@ -3937,16 +3937,32 @@
 eHeader%22
+, %22self.needUri%22
 %5D,%0A     
@@ -4515,16 +4515,16 @@
 cope: %7B%0A
-
       in
@@ -4541,16 +4541,36 @@
 r: %22=%22,%0A
+      needUri: %22=%22,%0A
     %7D,%0A 

Implement differentiation in post-info, depending on the attributes pushed into the component by the template