import {
  Component,
  Input,
  Output,
  EventEmitter,
  OnInit,
  inject,
} from "@angular/core";
import { PageService } from "./page.service";
import { PageConfig } from "./types";
import { IBreadcrumb } from "../types";

@Component({
  selector: "page",
  templateUrl: "page.template.html",
  providers: [PageService],
  standalone: false,
})
export class PageTemplateComponent implements OnInit {
  pageService = inject(PageService);

  /**
   * Passes in the breadcrumb model
   */
  @Input() public breadcrumbs: Array<IBreadcrumb>;
  /**
   * Sets a theme on the template
   */
  @Input() public theme: string;
  /**
   * Sets the TitleAndSectionComponent section input
   */
  @Input() public section: string;
  /**
   * Sets the TitleAndSectionComponent title input
   */
  @Input() public title: string;
  /**
   * Sets the TitleAndSectionComponent id input
   */
  @Input() public titleId: string;
  /**
   * Sets the TitleAndSectionComponent badge input
   */
  @Input() public badge: string;
  /**
   * Sets the TitleAndSectionComponent type input
   */
  @Input() public type: string;
  /**
   * Sets the TitleAndSectionComponent type label input
   */
  @Input() public typeLabel: string;
  /**
   * Sets the TitleAndSectionComponent caption input
   */
  @Input() public caption: string;
  /**
   * Sets the TitleAndSectionComponent badgeOptions input
   */
  @Input() public options: PageConfig = {
    badge: undefined,
  };
  /**
   * Sets additional header options if true, by default it is false
   */
  @Input() public headerOptions: boolean = false;
  /**
   * Adds the stackable class on the grid
   */
  @Input() public stackable: boolean = true;
  /**
   * Sets the target id for 508 skip navigation
   */
  @Input() public skipNavID: string = "primary-content";
  /**
   * (deprecated) Emits breadcrumb events
   */
  @Output() public breadcrumbOut = new EventEmitter();
  /**
   * Emits breadcrumb events
   */
  @Output() public breadcrumbChange = new EventEmitter();

  ngOnInit(): void {
    // Reset sidebar
    this.pageService.sidebar = false;
    this.pageService.wideSidebar = false;
  }

  breadcrumbHandler(evt: string) {
    this.breadcrumbOut.emit(evt);
    this.breadcrumbChange.emit(evt);
  }

  get sidebar() {
    return this.pageService.sidebar;
  }

  get sidebarColumns() {
    return this.pageService.sidebarColumns;
  }

  get mainContentColumns() {
    return this.pageService.mainContentColumns;
  }
}