import { Component } from '@angular/core';
import { PagesService } from '@app/_services/pages.service';
import {LicenceService} from "@app/_services/licence.service";

@Component({
  selector: 'jumbotron',
  templateUrl: './jumbotron.component.html',
  styleUrls: ['./jumbotron.component.scss']
})
export class JumbotronComponent {

  constructor(
    private pagesService: PagesService
  ){}

  get currentPage(){

    return this.pagesService.currentPage
  }

  get name(){
    return this.currentPage?.h1 || this.currentPage?.name
  }

  get bgStyle(){
    let height = 50;
    let pictURL:string;
    if (this.currentPage){
      height = 150;
      pictURL = this.currentPage?.picture?.data.links.open;
    }

    return {
      'background-image' : `url(${pictURL})`||'none',
      'height': (pictURL?400:height) + 'px'
    }
  }

  get h1Style(){
    return { color: this.currentPage?.picture?'var(--white)':'var(--second-act)'}
  }

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

  get editMode() {
    return this.pagesService.editMode;
  }

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

}
