import {
  Component,
  EventEmitter,
  HostBinding,
  Input,
  Output,
} from "@angular/core";

import { WidgetConfig } from "../widget.configuration";
import {
  animate,
  keyframes,
  style,
  transition,
  trigger,
} from "@angular/animations";
import { WidgetframeService } from "./widgetframe.service";
import { AppContext, Content } from "../../components/app-context";
import { takeUntil } from "rxjs/operators";
import { NgUnsubscribe } from "../../ng-unsubscribe";
import { Observable } from "rxjs";

export interface WidgetframeComponentConfiguration {
  /**
   * Widget components to be embedded inside the frame content
   */
  components?: WidgetConfig[];

  /**
   * Title to be shown in the header
   */
  title?: string;

  /**
   * Shows/Hides the subtitle
   */
  subtitle?: boolean;

  /**
   * Adds the text in the help icon
   */
  infoText: string;

  /**
   * Adds the title in the help icon
   */
  infoTitle: string;
  infoWidth: string;
  infoHeight: string;

  /**
   *  Enables "fly in" animation on load
   */
  animationEnabled?: boolean;

  /**
   *  delay for trigger animation in ms
   */
  animationDelay?: number;
}

export interface WidgetActions {
  /**
   * Could be (start/end) to set the action elements alignment to be on the left or right
   */
  alignment?: string;

  /**
   * Widgets to be added in the actions section
   */
  elements: WidgetConfig[];
}
export interface WidgetFrameConfiguration {
  /** Component configurations */
  configuration?: WidgetframeComponentConfiguration;

  /**
   * Widget component to be added to the frame header
   */
  header?: WidgetConfig;

  /**
   * Actions to be added to the frame actions
   */
  actions?: WidgetActions;

  /**
   * Widget component to be added to the frame footer
   */
  footer?: WidgetConfig;
}

/**
 * Frame with header and content body for all widgets.
 * Has 4 ng-content parts that can be filled: nm-widgetframe__title, nm-widgetframe__subtitle, nm-widgetframe__buttons, nm-widgetframe__content
 *
 */
@Component({
  selector: "nm-widgetframe",
  templateUrl: "./widgetframe.component.html",
  styleUrls: ["./widgetframe.component.scss"],
  providers: [],
  animations: [
    trigger("fadeUpTrigger", [
      transition(":enter", [
        style({ opacity: 0 }),
        animate(
          "0.4s {{delay}}ms",
          keyframes([
            style({ opacity: 0, transform: "translate3d(0, 70px, 0)" }),
            style({ opacity: 1, transform: "translate3d(0, 0, 0)" }),
          ])
        ),
      ]),
      transition(":leave", [animate("200ms ease-out", style({ opacity: 0 }))]),
    ]),
  ],
})
export class WidgetframeComponent {
  /**
   * Shows/Hides the component
   */
  @Input("visible") visible: boolean = true;

  /**
   * Deprecated: widget frame now takes the full given width
   */
  @Input("width") width: string;

  /**
   * Sets class name for the embedded header component
   */
  @Input("header") header: string;

  /**
   * Sets the component id and the parent id of all children
   */
  @Input("widgetId") widgetId: string;

  /**
   * Shows/Hides the toggle button between Text and HTML view
   */
  @Input("hasButton") hasButton: boolean;

  /**
   * Adds the text in the help icon
   */
  @Input("infoText") infoText: string;

  /**
   * Adds the title to the text provided by the help icon
   */
  @Input("infoTitle") infoTitle: string;

  /**
   * Adds the link to the wiki page explaining the functionality of the content
   */
  @Input("wikiLink") wikiLink: string;

  /**
   * Sets the width size of the help icon tooltip
   */
  @Input("infoWidth") infoWidth: string;

  /**
   * Sets the height size of the help icon tooltip
   */
  @Input("infoHeight") infoHeight: string;

  /**
   * Sets the position/placement of the help icon tooltip (left, right, up, down)
   */
  @Input("infoPlacement") infoPlacement: string;

  /**
   * Deprecated: feature is now removed
   */
  @Input("isCollapsible") isCollapsible: boolean = true;

  /**
   * Deprecated: feature is now removed
   */
  @Input("isSideCollapsible") isSideCollapsible: boolean = false;

  /**
   * Shows/Hides the contents of the frame
   */
  @Input("contentVisible") contentVisible: boolean = true;

  /**
   * Sets component configuration which enables adding more widgets to the header
   */
  @Input("configuration")
  configuration: WidgetConfig<WidgetframeComponentConfiguration>;

  /**
   * Shows/Hides the header of the frame
   */
  @Input("toolbarInvisible") toolbarInvisible: boolean = false;

  /**
   * Shows/Hides the border of the frame
   */
  @Input("withBorder") withBorder: boolean = true;

  /**
   * Shows/Hides the avatar of the frame
   */
  @Input("avatar") avatar: boolean = false;

  /**
   * Emits an event for each toggle action
   */
  @Output() toggleViewmode = new EventEmitter();

  /** Deprecated: feature is now removed */
  @Output() toggleContent = new EventEmitter();

  /** Deprecated: feature is now removed */
  @Output() toggleSideCollapse = new EventEmitter();

  toogleViewmode: any;

  private unsubscribe = NgUnsubscribe.create();

  public interactions: Observable<Content[]>;

  constructor(private appContext: AppContext) {
    this.toogleViewmode = function () {
      this.toggleViewmode.emit("event");
    };

    this.interactions = this.appContext.browserContext
      .subscribe({ target: "widget-frame-header" })
      .pipe(takeUntil(this.unsubscribe));
  }
}

export interface BaseConfiguration {
  header?: string;

  /**
   * The title for the info icon to use - should be a translation key
   */
  infoTitle?: string;

  /**
   * The text for the info icon to use - should be a translation key
   */

  infoText?: string;

  /**
   * The link to the wiki page for this component, e.g /xwiki/bin/view/iPIM_buy_Dokumentation/Onlinehilfe/Produktsuche/
   */
  wikiLink?: string;

  /**
   * Visibility of panel header
   */
  withHeader?: boolean;

  /**
   * Visibility of panel border
   */

  withBorder?: boolean;

  /**
   * The title for the component header - should be a translation key
   */
  title: string;
}