/*
 * Copyright (C) 2020 Robert Bosch GmbH Copyright (C) 2020 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

import { Directive, Input, OnChanges, SimpleChanges, Renderer2, ElementRef } from '@angular/core';
import { BOSCH_DDS_COLORS } from '../../core/core-configuration/bosch-dds-colors';
import { BOSCH_MARGINS } from '../../core/core-configuration/bosch-breakpoints';
import { BciSidebarService } from '../../core/layout/bci-sidebar/bci-sidebar.service';

/**
 * Content fullscreen feature is used to maximize and minimize the size (width and height) of the element
 * using "bciContentFullscreen" directive.
 *
 * It has two features, where one with expanding content of the element to Body of the DOM by hiding
 * Sidenav menu and Header. This feature can be used to on any element by setting "bciContentFullscreen" directive
 * to true or false.
 * Fullscreen icon should be placed within the scope of element where "bciContentFullscreen"
 * directive is defined.
 *
 * Another feature is used to expand the child element with respect to the parent element's width and height.
 * Child element should have "contentParentID" as reference and "#parentId" should be defined in parent element.
 * Fullscreen icon should be placed within the scope of child element where "bciContentFullscreen"
 * directive is defined.
 */
@Directive({
  selector: '[bciContentFullscreen]',
})
export class ContentFullscreenDirective implements OnChanges {
  /**
   * Setting 'bciContentFullscreen' to true/fasle will enable/disable Content fullscreen feature.
   * This poperty can be used in any element to maximize or minimize the content of the element.
   */
  @Input() bciContentFullscreen: boolean;

  /**
   * 'contentParentElement' is used as reference in the child element and "#parentId" should be defined in parent element.
   * This property will maximize or minimize the defined child element's content with in the scope of parent element and
   * hide the sibling elements.
   * Parent element can be any top-level element.
   */
  @Input() contentParentElement: HTMLElement;

  private commonStyle = 'top: 0; background:' + BOSCH_DDS_COLORS.boschWhite + '; z-index: 9999; ';

  constructor(private renderer: Renderer2, private element: ElementRef, private sideBarService: BciSidebarService) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (this.bciContentFullscreen) {      
      this.sideBarService.setSidebarState(false);
      this.contentParentElement
        ? this.activateContentFullscreen(this.contentParentElement)
        : this.activateWithinBrowserFullscreen();
    }

    if (!!changes.bciContentFullscreen.previousValue && !changes.bciContentFullscreen.currentValue) {      
      this.sideBarService.setSidebarState(true);
      this.contentParentElement
        ? this.deactivateContentFullscreen(this.contentParentElement)
        : this.deactivateWithinBrowserFullscreen();
    }
  }

  activateContentFullscreen(parentElement: HTMLElement): void {
    const CONTENT_STYLE = this.commonStyle + 'position: absolute; height: 100%;';
    this.element.nativeElement.setAttribute('style', CONTENT_STYLE);
    this.element.nativeElement.nextElementSibling.style.visibility = 'hidden';
    console.log('parentElement', parentElement);
    if (!!parentElement.tagName) {
      this.renderer.setStyle(parentElement, 'position', 'relative');
    }
  }

  deactivateContentFullscreen(parentElement: HTMLElement) {
    this.element.nativeElement.removeAttribute('style');
    this.element.nativeElement.nextElementSibling.style.visibility = 'visible';
    if (!!parentElement.tagName) {
      this.renderer.removeStyle(parentElement, 'position');
    }
  }

  activateWithinBrowserFullscreen() {
    const CONTENT_STYLE =
      this.commonStyle +
      'position: fixed; left:25px; height: 100vh; padding:' +
      BOSCH_MARGINS.L +
      'px; width: calc(100% - 4em)';
    this.element.nativeElement.setAttribute('style', CONTENT_STYLE);
  }

  deactivateWithinBrowserFullscreen() {
    this.element.nativeElement.removeAttribute('style');
  }
}
