import { Component, OnInit } from '@angular/core';
import { RdLib } from "../../base/rdLib";
import { RdPopOver } from "../../base/rdPopOver";
import { CustomDates } from "./inputDateBootstrap";

@Component({
  template: `
    <table>
      <tbody>
        <tr>
          <td>
            <rd-button [rd-text]="'Şimdi' | translate" rd-color="red" (rd-click)="close(CustomDates.Current)"></rd-button>
          </td>
          <td>
            <rd-button [rd-text]="'Saat Başı' | translate" rd-color="red" (rd-click)="close(CustomDates.StartHour)"></rd-button>
          </td>
          <td>
            <rd-button [rd-text]="'Ay Başı' | translate" rd-color="red" (rd-click)="close(CustomDates.StartOfMonth)"></rd-button>
          </td>
        </tr>
        <tr>
          <td>
            <rd-button [rd-text]="'Bugün' | translate" rd-color="yellow" (rd-click)="close(CustomDates.Today)"></rd-button>
          </td>
          <td>
            <rd-button [rd-text]="'Saat Sonu' | translate" rd-color="yellow" (rd-click)="close(CustomDates.EndOfHour)"></rd-button>
          </td>
          <td>
            <rd-button [rd-text]="'Ay Sonu' | translate" rd-color="yellow" (rd-click)="close(CustomDates.EndOfMonth)"></rd-button>
          </td>
        </tr>
        <tr>
          <td>
            <rd-button [rd-text]="'Dün' | translate" rd-color="cyan" (rd-click)="close(CustomDates.Yesterday)"></rd-button>
          </td>
          <td>
            <rd-button [rd-text]="'Bir Hafta Önce' | translate" rd-color="cyan" (rd-click)="close(CustomDates.OneWeekAgo)"></rd-button>
          </td>
          <td>
            <rd-button [rd-text]="'Bir Ay Önce' | translate" rd-color="cyan" (rd-click)="close(CustomDates.OneMonthAgo)"></rd-button>
          </td>
        </tr>
        <tr>
          <td>
            <rd-button [rd-text]="'Yarın' | translate" rd-color="purple" (rd-click)="close(CustomDates.Tomorrow)"></rd-button>
          </td>
          <td>
            <rd-button [rd-text]="'Hafta Başı' | translate" rd-color="purple" (rd-click)="close(CustomDates.StartOfWeek)"></rd-button>
          </td>
          <td>
            <rd-button [rd-text]="'Yılbaşı' | translate" rd-color="purple" (rd-click)="close(CustomDates.StartOfYear)"></rd-button>
          </td>
        </tr>
        <tr>
          <td>
            <rd-button [rd-text]="'Period Başı' | translate" rd-color="green" [rd-tooltip]="startOfPeriodTooltip" (rd-click)="close(CustomDates.StartOfPeriod)"></rd-button>
          </td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">
            <rd-input-text [(rd-model)]="customFormat" [rd-placeholder]="'Özel Format'| translate" (rd-onEnter)="close($event)" style="display:inline-block"></rd-input-text>
            <i class="fas fa-question-circle" style="font-size:18px;margin:.3rem 0 0 1rem;vertical-align:super" data-toggle="tooltip" data-placement="top" title="= s | m,h,d,w,M,y | (+)(-) | [0-9]"></i>
          </td>
        </tr>
      </tbody>
    </table>
  `
})
export class CustomDatePopover extends RdPopOver implements OnInit {

  customFormat = "=";
  startOfPeriodTooltip = "";

  CustomDates = CustomDates;

  ngOnInit() {
    let date = new Date();

    if (date.getMinutes() < 30) this.startOfPeriodTooltip = RdLib.typeOperations.dateToString(new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours()), "time");
    else {
      this.startOfPeriodTooltip = RdLib.typeOperations.dateToString(new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), 30), "time");
    }
  }
}