1import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
2import { FormsModule } from '@angular/forms';
3import { MatButtonModule } from '@angular/material/button';
4import { MatButtonToggleModule } from '@angular/material/button-toggle';
5import { MatIconModule } from '@angular/material/icon';
6import { MatSnackBar } from '@angular/material/snack-bar';
7import { finalize } from 'rxjs';
8
9import { ScreenshotGolden } from '../golden';
10import { GoldensService } from '../goldens.service';
11
12@Component({
13  selector: 'app-screenshot-golden',
14  standalone: true,
15  imports: [MatIconModule, MatButtonModule, MatButtonToggleModule, FormsModule],
16  templateUrl: './screenshot-golden.component.html',
17  styleUrl: './screenshot-golden.component.scss',
18})
19export class ScreenshotGoldenComponent implements OnChanges {
20  constructor(
21    private goldenService: GoldensService,
22    private _snackBar: MatSnackBar,
23  ) {}
24
25  @Input() golden!: ScreenshotGolden;
26
27  ngOnChanges(changes: SimpleChanges): void {
28    if (changes['golden']) {
29      if (
30        (this.selectedImage == 'diff' && !this.golden.diffUrl) ||
31        (this.selectedImage == 'expected' && !this.golden.expectedUrl)
32      ) {
33        this.selectedImage = 'actual';
34      }
35    }
36  }
37
38  selectedImage: 'actual' | 'diff' | 'expected' = 'actual';
39  get selectedImageUrl(): String | undefined {
40    switch (this.selectedImage) {
41      case 'actual':
42        return this.golden.actualUrl;
43      case 'diff':
44        return this.golden.diffUrl;
45      case 'expected':
46        return this.golden.expectedUrl;
47    }
48    return undefined;
49  }
50
51  updateGolden(): void {
52    this.goldenService
53      .updateGolden(this.golden)
54      .pipe(finalize(() => {}))
55      .subscribe((_) => this._snackBar.open('updated'));
56  }
57}
58