import {Component} from '@angular/core';
import {NavigationEnd, Router} from "@angular/router";
import {Subscription} from "rxjs";
import {PagesService} from "@app/_services/pages.service";
import {FormsService, ListsService} from "@app/_services";

@Component({
  templateUrl: 'page.component.html',
  styleUrls: ['page.component.scss']
})
export class PageComponent {
  public page: any;
  public editMode: boolean;
  public loading = false;
  public menuItems:any[]
  private url: string;
  private inited = false;
  public subMenu:any;
  public pageTopName:string;
  routeSubscription?: Subscription;
  subscription: Subscription;

  constructor(
    private router: Router,
    private pagesService: PagesService,
    private listsService: ListsService,
    private formsService: FormsService) {
    this.routeSubscription = this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) this.onNavigationEnd(event);
    });
  }



  get permissions() {
    return this.page?.permissions;
  }

  get isEditable() {
    return this.permissions?.edit || this.permissions?.anything;
  }


  ngAfterContentInit() {    
    this.listsService.controls().subscribe(res => {
      this.inited ? this.fetch() : this.inited = true;

    });    
  }

  ngOnDestroy() {
    this.routeSubscription?.unsubscribe();
  }

  onNavigationEnd(event: NavigationEnd) {
    let url = event.url.split('(')[0];
    url = url.split('?')[0];
    if (url !== this.url) {
      this.url = url;
      this.fetch();
      this.editMode = false;
    }
  }

  fetch() {
    this.loading = true;
    let include = [
      'parents',
      'sections.type',
      'sections.groups.fields.value',
      'sections.objectables.groups.fields.value',
      'sidebars.groups.fields.value',
      'sidebars.type',
      'permissions',
      'children.children'
    ];
    this.pagesService.find(this.url, {include: include.join(',')}).subscribe(res => {
      this.page = res?.data;    
      this.loading = false;
      this.fetchMenu();
    }, error => {
      this.loading = false;
    });
  }

  fetchMenu() {
    let include = ['children.children.children.children'];
    this.pagesService.root({include: include.join(',')}).subscribe(res => {
      this.menuItems = res.data;
      let topItem:any = null;
      this.subMenu = [];
      this.pageTopName = this.page.name;

      topItem = this.menuItems.find(item=>this.page.link.startsWith(item.link));
      this.subMenu = topItem?.children.data;
      this.pageTopName = topItem?.name || this.pageTopName;

      topItem = this.subMenu?.find(item=>this.page.link.startsWith(item.link));
      this.pageTopName = topItem?.name || this.pageTopName;
      this.subMenu = topItem?.children.data
    });
  }


  toggleEditMode() {
    this.editMode = !this.editMode;
  }

  editBackground() {
    this.formsService.createModel('page-background', {extraProps: {attach: {pageId: this.page.id}}});
  }

  itemSelect(event){

  }

  removeBackground() {
    if (confirm('Вы деествительно хотите удалить этот фон?')) {
      this.pagesService.deleteBackground(this.page.id).subscribe(res => {
      });
    }
  }
}
