import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { provideNativeDateAdapter } from '@angular/material/core';

@Component({
  selector: 'ap-playbackdialog',
  imports: [
    FormsModule,
    MatDialogModule,
    MatIconModule,
    MatButtonModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule,
    MatDatepickerModule
  ],
  providers: [provideNativeDateAdapter()],
  template: `
    <div class="_ap-playback">
      <div>
        <h1 mat-dialog-title>
          <mat-icon>history</mat-icon>&nbsp; &nbsp;&nbsp;History Playback
        </h1>
      </div>
      <mat-dialog-content>
        <div style="display:flex;">
          <div>
            <div>
              <mat-form-field>
                <mat-label>Context</mat-label>
                <mat-select [(ngModel)]="formData.context">
                  @for (i of ['self', 'all']; track i) {
                    <mat-option [value]="i">{{ i }}</mat-option>
                  }
                </mat-select>
              </mat-form-field>
            </div>
            <div>
              <mat-form-field floatLabel="always">
                <mat-label>Start date</mat-label>
                <input
                  matInput
                  required
                  [max]="maxDate"
                  [matDatepicker]="picker"
                  [(ngModel)]="formData.startDate"
                />
                <mat-hint>MM/DD/YYYY</mat-hint>
                <mat-datepicker-toggle
                  matSuffix
                  [for]="picker"
                ></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
              </mat-form-field>
            </div>
            <div style="font-size:10pt;">
              <b>Start Time:</b><br />
              <mat-form-field style="width:100px;">
                <mat-label>Hour</mat-label>
                <mat-select [(ngModel)]="formData.startTimeHr">
                  @for (i of hrValues(); track i) {
                    <mat-option [value]="i">{{ i }}</mat-option>
                  }
                </mat-select>
              </mat-form-field>
              <b>: </b>
              <mat-form-field style="width:100px;">
                <mat-label>Minutes</mat-label>
                <mat-select [(ngModel)]="formData.startTimeMin">
                  @for (i of minValues(); track i) {
                    <mat-option [value]="i">{{ i }}</mat-option>
                  }
                </mat-select>
              </mat-form-field>
            </div>
            <div>
              <mat-form-field
                style="width:150px;"
                matTooltip="Advance stream the selected number of seconds for every second of playback"
              >
                <mat-label>Playback Rate</mat-label>
                <mat-select [(ngModel)]="formData.playbackRate">
                  @for (i of rateValues(); track i) {
                    <mat-option [value]="i">{{ i }}</mat-option>
                  }
                </mat-select>
              </mat-form-field>
            </div>
          </div>
        </div>
      </mat-dialog-content>
      <mat-dialog-actions>
        <div style="text-align:center;width:100%;">
          <button
            mat-raised-button
            [disabled]="!formData.startDate"
            (click)="submit()"
          >
            START
          </button>
          <button mat-raised-button (click)="submit(true)">CANCEL</button>
        </div>
      </mat-dialog-actions>
    </div>
  `,
  styles: [
    `
      ._ap-playback {
        font-family: arial;
        min-width: 300px;
      }
      @media only screen and (min-device-width: 768px) and (max-device-width: 1024px),
        only screen and (min-width: 800px) {
      }
    `
  ]
})
export class PlaybackDialog {
  protected hour;
  protected minute;
  protected formData = {
    context: 'all',
    startTimeHr: '00',
    startTimeMin: '00',
    startDate: null,
    playbackRate: 1
  };
  protected maxDate = new Date();

  protected dialogRef = inject(MatDialogRef<PlaybackDialog>);

  constructor() {}

  submit(cancel = false) {
    let q = {};
    let ts = '';
    if (!cancel) {
      this.formData.startDate.setHours(parseInt(this.formData.startTimeHr));
      this.formData.startDate.setMinutes(parseInt(this.formData.startTimeMin));
      ts = this.formData.startDate.toISOString();
      ts = ts.slice(0, ts.indexOf('.')) + 'Z';
      q = {
        subscribe: this.formData.context,
        startTime: ts,
        playbackRate: this.formData.playbackRate
      };
    }
    this.dialogRef.close({
      result: !cancel,
      query: q,
      startTime: ts
    });
  }

  hrValues() {
    const v = [];
    for (let i = 0; i < 24; i++) {
      v.push(('00' + i).slice(-2));
    }
    return v;
  }

  minValues() {
    const v = [];
    for (let i = 0; i < 59; i++) {
      v.push(('00' + i).slice(-2));
    }
    return v;
  }

  rateValues() {
    return [0.5, 1, 2, 5, 10];
  }
}
