import { Component, OnInit, ViewChild, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import {
  MatDialogModule,
  MatDialogRef,
  MAT_DIALOG_DATA
} from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';

@Component({
  selector: 'ap-msgbox',
  imports: [MatDialogModule, MatButtonModule],
  template: `
    <div class="_ap-msgbox">
      <div>
        <h1 mat-dialog-title>{{ data.title }}</h1>
      </div>
      <mat-dialog-content>
        @for (line of msglines; track line) {
          <div>
            <div>{{ line }}&nbsp;</div>
          </div>
        }
      </mat-dialog-content>
      <mat-dialog-actions align="center">
        <button mat-raised-button (click)="dialogRef.close(true)">
          {{ data.buttonText }}
        </button>
      </mat-dialog-actions>
    </div>
  `,
  styles: [
    `
      ._ap-msgbox {
        font-family: Roboto;
        min-width: 150px;
      }
    `
  ]
})
export class MsgBox implements OnInit {
  public msglines = [];

  protected dialogRef = inject(MatDialogRef<MsgBox>);
  protected data = inject<{
    title: string; // title text,
    message: string; // text to display,
    buttonText: string; // button text
  }>(MAT_DIALOG_DATA);

  constructor() {}

  ngOnInit() {
    this.data.buttonText = this.data.buttonText || 'OK';
    this.msglines = this.data.message.split('\n');
  }
}

@Component({
  selector: 'ap-alertdialog',
  imports: [MatDialogModule, MatIconModule, MatButtonModule],
  template: `
    <div class="_ap-alert">
      <div>
        <h1 mat-dialog-title>
          <mat-icon style="color: orange;">warning</mat-icon>
          &nbsp;{{ data.title }}
        </h1>
      </div>
      <mat-dialog-content>
        <div style="display:flex;">
          <div style="padding-left: 10px;">
            @for (line of msglines; track line) {
              <div>
                <div>{{ line }}&nbsp;</div>
              </div>
            }
          </div>
        </div>
      </mat-dialog-content>
      <mat-dialog-actions align="center">
        <button mat-raised-button (click)="dialogRef.close(true)">
          {{ data.buttonText }}
        </button>
      </mat-dialog-actions>
    </div>
  `,
  styles: [
    `
      ._ap-alert {
        min-width: 150px;
      }
    `
  ]
})
export class AlertDialog implements OnInit {
  public msglines = [];
  public image = null;

  protected dialogRef = inject(MatDialogRef<AlertDialog>);
  protected data = inject<{
    title: string; // title text,
    message: string; // text to display,
    buttonText: string; // button text
  }>(MAT_DIALOG_DATA);

  constructor() {}

  ngOnInit() {
    this.data.buttonText = this.data.buttonText || 'OK';
    this.msglines = this.data.message.split('\n');
  }
}

@Component({
  selector: 'ap-confirmdialog',
  imports: [MatDialogModule, MatIconModule, MatCheckboxModule, MatButtonModule],
  template: `
    <div class="_ap-confirm">
      <div>
        <h1 mat-dialog-title>
          <mat-icon style="color:orange;">help</mat-icon>
          &nbsp;{{ data.title }}
        </h1>
      </div>
      <mat-dialog-content style="overflow:unset">
        <div style="display:flex;">
          <div style="padding-left: 10px;">
            @for (line of msglines; track line) {
              <div>
                <div>{{ line }}&nbsp;</div>
              </div>
            }
          </div>
        </div>
        <div style="display:flex;">
          @if (data.checkText) {
            <div style="padding-left: 10px;">
              <div style="font-weight: 500;">
                <mat-checkbox (change)="checked = $event.checked">
                  {{ data.checkText }}&nbsp;
                </mat-checkbox>
              </div>
            </div>
          }
        </div>
      </mat-dialog-content>
      <mat-dialog-actions align="center">
        <button
          mat-raised-button
          (click)="dialogRef.close({ ok: true, checked: checked })"
        >
          {{ data.button1Text }}
        </button>
        <button mat-raised-button (click)="dialogRef.close(null)">
          {{ data.button2Text }}
        </button>
      </mat-dialog-actions>
    </div>
  `,
  styles: [
    `
      ._ap-confirm {
        font-family: Roboto;
        min-width: 150px;
      }
    `
  ]
})
export class ConfirmDialog implements OnInit {
  public msglines = [];
  public checked = false;

  protected dialogRef = inject(MatDialogRef<ConfirmDialog>);
  protected data = inject<{
    title: string; // title text,
    message: string; // text to display,
    button1Text: string; // primary button text
    button2Text: string; //secondary button text
    checkText: string; // check box text
  }>(MAT_DIALOG_DATA);

  constructor() {}

  ngOnInit() {
    this.data.button1Text = this.data.button1Text || 'Yes';
    this.data.button2Text = this.data.button2Text || 'No';
    this.msglines = this.data.message.split('\n');
  }
}

@Component({
  selector: 'ap-about-dialog',
  imports: [MatDialogModule, MatIconModule, MatButtonModule],
  template: `
    <div>
      <h1 mat-dialog-title><mat-icon>info</mat-icon>&nbsp;About</h1>
      <mat-dialog-content>
        <div class="about-row">
          <div class="item"><img [src]="data.logo" /></div>
          <div class="item">
            <span style="font-weight:bold;">{{ data.name }}</span
            >&nbsp;&nbsp;<br />
            <span class="description">
              {{ data.description }}
            </span>
            <br />
            <span>Version: {{ data.version }}</span>
            <br /><br />
          </div>
        </div>
      </mat-dialog-content>
      <mat-dialog-actions align="center">
        @if (data.url) {
          <a mat-button [href]="data.url" target="_web" rel="noopener"
            >Visit Website</a
          >
          &nbsp;
        }
        <button mat-raised-button (click)="dialogRef.close(false)">
          Close
        </button>
      </mat-dialog-actions>
    </div>
  `,
  styles: [
    `
      .about-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-content: stretch;
        font-family: roboto;
      }
      .about-row .item {
        padding-left: 10px;
      }
      .about-row img {
        width: 42px;
      }
      .about-row .description {
        font-size: 12pt;
      }
    `
  ]
})
export class AboutDialog {
  protected dialogRef = inject(MatDialogRef<AboutDialog>);
  protected data = inject<{
    name: string; // app name
    version: string; // app version
    description: string;
    logo: string; // path to logo image
    url: string; // website
  }>(MAT_DIALOG_DATA);

  constructor() {}
}

@Component({
  selector: 'ap-login-dialog',
  imports: [
    MatDialogModule,
    MatIconModule,
    MatButtonModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule
  ],
  styles: [],
  template: `
    <mat-dialog-content>
      <mat-card>
        <mat-card-title-group>
          <mat-icon>account_circle</mat-icon>
          <mat-card-title>Sign-In</mat-card-title>
          <mat-card-subtitle>{{ data.message }}</mat-card-subtitle>
        </mat-card-title-group>
        <mat-card-content>
          <mat-form-field>
            <mat-label>User name</mat-label>
            <input
              matInput
              type="text"
              value=""
              #username
              (keyup)="keyUp($event, username, password)"
              style="width:110px;"
              (focus)="handleFocus($event)"
            /> </mat-form-field
          ><br />
          <mat-form-field>
            <mat-label>Password</mat-label>
            <input
              matInput
              type="password"
              value=""
              #password
              (keyup)="keyUp($event, username, password)"
              style="width:110px;"
              (focus)="handleFocus($event)"
            />
          </mat-form-field>
        </mat-card-content>
        <mat-card-actions align="end">
          <button
            default
            mat-raised-button
            [disabled]="username.value.length === 0"
            (click)="login(username.value, password.value)"
          >
            {{ data.button1Text }}
          </button>
          &nbsp;&nbsp;
          <button default mat-raised-button (click)="cancel()">
            {{ data.button2Text }}
          </button>
        </mat-card-actions>
      </mat-card>
    </mat-dialog-content>
  `
})
export class LoginDialog implements OnInit {
  @ViewChild('username', { static: false }) username;

  protected imgSource = 'assets/img/success.png';
  private result = {
    cancel: false,
    user: null,
    pwd: null
  };

  protected dialogRef = inject(MatDialogRef<LoginDialog>);
  protected data = inject<{
    message: string; // text to display,
    button1Text: string; // primary button text
    button2Text: string; // secondary button text
  }>(MAT_DIALOG_DATA);

  constructor() {}

  ngOnInit() {
    this.data.message = this.data.message || '';
    this.data.button1Text = this.data.button1Text || 'Log in';
    this.data.button2Text = this.data.button2Text || 'Cancel';
  }

  ngAfterViewInit() {
    setTimeout(() => this.username.nativeElement.focus(), 500);
  }

  keyUp(e, u, p) {
    if (e.key === 'Enter') {
      this.login(u.value, p.value);
    }
  }

  handleFocus(e) {
    e.currentTarget.select(0, e.currentTarget.value.length);
  }

  // ** cancelled login
  cancel() {
    this.result.cancel = true;
    this.dialogRef.close(this.result);
  }

  //** submit log in
  login(user = '', password = '') {
    this.result.cancel = false;
    this.result.user = user;
    this.result.pwd = password;
    this.dialogRef.close(this.result);
  }
}

@Component({
  selector: 'message-bar',
  imports: [MatIconModule],
  template: `
    <div class="message-bar">
      <mat-icon>message</mat-icon>&nbsp;&nbsp;
      {{ data.message }}
    </div>
    @if (data.sound) {
      <audio src="./assets/sound/ding.mp3" [autoplay]="true"></audio>
    }
  `,
  styles: [
    `
      .message-bar {
        font-family: roboto;
      }
    `
  ]
})
export class MessageBarComponent {
  protected data = inject<{
    message: string; // text to display,
    sound: boolean; // play sound
  }>(MAT_SNACK_BAR_DATA);

  constructor() {}
}
