import {
  Component,
  HostListener,
  ViewEncapsulation,
  Input,
  Output,
  EventEmitter,
  ContentChild,
  OnInit,
  AfterContentInit,
  AfterViewInit,
  inject,
} from "@angular/core";
import { faLongArrowAltLeft, faTimes } from "@fortawesome/free-solid-svg-icons";

import { MdSidenavContainer, MdSidenav } from "../sidenav/sidenav";
import { SamToolbarComponent } from "../../../../../layout/toolbar";
import { SamPageNextService } from "../../architecture";

@Component({
  selector: "sam-page-next",
  templateUrl: "page.template.html",
  encapsulation: ViewEncapsulation.None,
  styleUrls: ["./sam-page-next.scss"],
  standalone: false,
})
export class SamPageNextComponent
  extends MdSidenavContainer
  implements OnInit, AfterContentInit, AfterViewInit
{
  _pageService = inject(SamPageNextService, { optional: true });

  /**
   * Text string for the back button
   */
  @Input() public backButtonText = "";
  /**
   * Forces the sidebar closed on initialization
   */
  @Input() public startSidebarClosed = false;
  /**
   * Event emitter for back button interaction
   */
  @Output() public backButtonClick = new EventEmitter<void>();

  @HostListener("window:resize")
  public resize() {
    if (this.aside) {
      this._responsiveAside();
    }
  }

  @ContentChild(MdSidenav, { static: true }) public aside: MdSidenav;

  @ContentChild(SamToolbarComponent, { static: true })
  public toolbar: SamToolbarComponent;

  public backIcon = faLongArrowAltLeft;
  public closeIcon = faTimes;
  constructor() {
    super();
    this._dir = null;
  }

  public ngOnInit() {
    if (this._pageService) {
      this._pageService.getPageMessage().subscribe((data) => {
        if (data && data.event && data.event === "open sidebar") {
          this.aside.toggle(true);
        }
      });
    }
  }

  public ngAfterContentInit(): void {
    super.ngAfterContentInit();

    this._setupToolbar();
  }

  public ngAfterViewInit(): void {
    this._setupAside();
  }

  public backBtnClick(): void {
    this.backButtonClick.emit();
  }

  private _setupAside(): void {
    if (this.aside) {
      this._responsiveAside();
      if (this.startSidebarClosed) {
        this.aside.toggle(false);
      }
    }
  }

  private _setupToolbar(): void {
    if (this.toolbar) {
      if (this.aside) {
        // Attach sidenav to toolbar
        this.toolbar.sidenav = this.aside;
      }
    }
  }

  private _responsiveAside(): void {
    this.aside.mode = !this._isSmallScreen() ? "side" : "over";

    if (this.aside.opened && this._isSmallScreen()) {
      this.aside.opened = false;
    } else if (!this.aside.opened && !this._isSmallScreen()) {
      this.aside.opened = true;
    }
  }

  private _isSmallScreen(): boolean {
    return window.innerWidth <= 600 ? true : false;
  }
}