import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'dp-calendar-nav',
  template: '<div class="dp-calendar-nav-container">   <div class="dp-calendar-nav-container-left">     <button type="button"             class="dp-calendar-nav-left"             [hidden]="!showLeftNav"             [disabled]="leftNavDisabled"             (click)="leftNavClicked()">     </button>     <button type="button"             class="dp-calendar-secondary-nav-left"             *ngIf="showLeftSecondaryNav"             [disabled]="leftSecondaryNavDisabled"             (click)="leftSecondaryNavClicked()">     </button>   </div>   <span class="dp-nav-header" [hidden]="isLabelClickable">{{label}}</span>   <button type="button"           class="dp-nav-header dp-nav-header-btn"           [hidden]="!isLabelClickable"           (click)="labelClicked()">     {{label}}   </button>   <div class="dp-calendar-nav-container-right">     <button type="button"             class="dp-calendar-secondary-nav-right"             *ngIf="showRightSecondaryNav"             [disabled]="rightSecondaryNavDisabled"             (click)="rightSecondaryNavClicked()">     </button>     <button type="button"             class="dp-calendar-nav-right"             [hidden]="!showRightNav"             [disabled]="rightNavDisabled"             (click)="rightNavClicked()">     </button>   </div> </div> ',
  styles: ['dp-calendar-nav .dp-calendar-nav-container {  position: relative;  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}dp-calendar-nav .dp-nav-date-btn {  box-sizing: border-box;  height: 25px;  border: 1px solid #000000;  border-bottom: none;}dp-calendar-nav .dp-calendar-nav-container-left,dp-calendar-nav .dp-calendar-nav-container-right {  position: absolute;  top: 50%;  transform: translateY(-50%);}dp-calendar-nav .dp-calendar-nav-container-left {  left: 5px;}dp-calendar-nav .dp-calendar-nav-container-right {  right: 5px;}dp-calendar-nav .dp-calendar-nav-left,dp-calendar-nav .dp-calendar-nav-right,dp-calendar-nav .dp-calendar-secondary-nav-left,dp-calendar-nav .dp-calendar-secondary-nav-right {  cursor: pointer;}dp-calendar-nav .dp-calendar-nav-left,dp-calendar-nav .dp-calendar-nav-right {  line-height: 0;}dp-calendar-nav .dp-calendar-nav-left::before,dp-calendar-nav .dp-calendar-nav-right::before {  position: relative;  content: \'\';  display: inline-block;  height: 8px;  width: 8px;  vertical-align: baseline;  border-style: solid;  border-width: 2px 2px 0 0;  transform: rotate(45deg);}dp-calendar-nav .dp-calendar-secondary-nav-left::before,dp-calendar-nav .dp-calendar-secondary-nav-right::before,dp-calendar-nav .dp-calendar-secondary-nav-left::after,dp-calendar-nav .dp-calendar-secondary-nav-right::after {  position: relative;  content: \'\';  display: inline-block;  height: 8px;  width: 8px;  vertical-align: baseline;  border-style: solid;  border-width: 2px 2px 0 0;  transform: rotate(45deg);}dp-calendar-nav .dp-calendar-secondary-nav-left::before,dp-calendar-nav .dp-calendar-secondary-nav-right::before {  margin-right: -8px;}dp-calendar-nav .dp-calendar-nav-left::before {  position: relative;  content: \'\';  display: inline-block;  height: 8px;  width: 8px;  vertical-align: baseline;  border-style: solid;  border-width: 2px 2px 0 0;  transform: rotate(-135deg);}dp-calendar-nav .dp-calendar-secondary-nav-left::before,dp-calendar-nav .dp-calendar-secondary-nav-left::after {  position: relative;  content: \'\';  display: inline-block;  height: 8px;  width: 8px;  vertical-align: baseline;  border-style: solid;  border-width: 2px 2px 0 0;  transform: rotate(-135deg);}dp-calendar-nav .dp-calendar-secondary-nav-left::before {  margin-right: -8px;}dp-calendar-nav .dp-nav-header {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  font-size: 13px;}dp-calendar-nav .dp-nav-header-btn {  cursor: pointer;}dp-calendar-nav.dp-material .dp-calendar-nav-container {  height: 30px;  border: 1px solid #E0E0E0;}dp-calendar-nav.dp-material .dp-calendar-nav-left,dp-calendar-nav.dp-material .dp-calendar-nav-right,dp-calendar-nav.dp-material .dp-calendar-secondary-nav-left,dp-calendar-nav.dp-material .dp-calendar-secondary-nav-right {  border: none;  background: #FFFFFF;  outline: none;  font-size: 16px;}dp-calendar-nav.dp-material .dp-nav-header-btn {  height: 20px;  width: 80px;  border: none;  background: #FFFFFF;  outline: none;}dp-calendar-nav.dp-material .dp-nav-header-btn:hover {  background: rgba(0, 0, 0, 0.05);}dp-calendar-nav.dp-material .dp-nav-header-btn:active {  background: rgba(0, 0, 0, 0.1);}'],
  encapsulation: ViewEncapsulation.None
})
export class CalendarNavComponent {
  @Output() onLeftNav: EventEmitter<null> = new EventEmitter();
  @Output() onLeftSecondaryNav: EventEmitter<null> = new EventEmitter();
  @Output() onRightNav: EventEmitter<null> = new EventEmitter();
  @Output() onRightSecondaryNav: EventEmitter<null> = new EventEmitter();
  @Output() onLabelClick: EventEmitter<null> = new EventEmitter();
  @Input() label: string;
  @Input() isLabelClickable: boolean = false;
  @Input() showLeftNav: boolean = true;
  @Input() showLeftSecondaryNav: boolean = false;
  @Input() showRightNav: boolean = true;
  @Input() showRightSecondaryNav: boolean = false;
  @Input() leftNavDisabled: boolean = false;
  @Input() leftSecondaryNavDisabled: boolean = false;
  @Input() rightNavDisabled: boolean = false;
  @Input() rightSecondaryNavDisabled: boolean = false;
  @HostBinding('class') @Input() theme: string;

  leftNavClicked() {
    this.onLeftNav.emit();
  }

  leftSecondaryNavClicked() {
    this.onLeftSecondaryNav.emit();
  }

  rightNavClicked() {
    this.onRightNav.emit();
  }

  rightSecondaryNavClicked() {
    this.onRightSecondaryNav.emit();
  }

  labelClicked() {
    this.onLabelClick.emit();
  }
}