import {Component, CUSTOM_ELEMENTS_SCHEMA, Input, OnInit, Renderer2} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {MatButton} from '@angular/material/button';
import {MatCard, MatCardActions, MatCardContent, MatCardHeader} from '@angular/material/card';
import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
import {AsyncPipe, NgIf, NgOptimizedImage} from '@angular/common';
import {Image} from '../../models/image';
import {ZhipuaiImageService} from '../../services/zhipuai-image.service';
import {MatProgressSpinner} from '@angular/material/progress-spinner';
import {SpinnerService} from '../../services/spinner.service';

import Viewer from 'viewerjs';


@Component({
  selector: 'app-generate-image.component',
  imports: [
    FormsModule,
    MatButton,
    MatCard,
    MatCardActions,
    MatCardContent,
    MatCardHeader,
    MatFormField,
    MatInput,
    MatLabel,
    MatProgressSpinner,
    AsyncPipe,


  ],
  templateUrl: './generate-image.component.html',
  styleUrl: './generate-image.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class GenerateImageComponent implements OnInit {

  isSpinnerVisible = false;

  query : string = '';

  images = [];
  image: Image = {
    url: ''
  };
  viewer: any;

  constructor(private zhipuaiImageService: ZhipuaiImageService,public spinnerService: SpinnerService,
              private renderer: Renderer2) {

  }

  ngOnInit(): void {

      const img = this.renderer.selectRootElement('img');
      this.viewer = new Viewer(img, {
        inline: true,
      });
      this.viewer.zoomTo(1);

  }

  generateImage(){
    this.zhipuaiImageService.generate(this.query).subscribe(
      data => {

        this.image = data;
        // @ts-ignore
        this.images = [this.image.url];


        console.log(data);
      },
      error => {
        console.log(error);
      }
    ).add(() => {
      //this.viewer.
      this.viewer.update();
    })
  }

  zoomPlus(){
    this.viewer.zoomTo(5);
  }
  zoomMinus(){
    this.viewer.zoomTo(-5);
  }
}
