import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
import {AngularImageViewerModule, CustomImageEvent, ImageViewerConfig} from '@hreimer/angular-image-viewer';

import {ZhipuaiImageService} from '../../services/zhipuai-image.service';
import {MatButton} from '@angular/material/button';


import {FormsModule} from '@angular/forms';
import {CommonModule} from '@angular/common';
import {BrowserModule} from '@angular/platform-browser';
import {MatCard, MatCardActions, MatCardContent, MatCardHeader} from '@angular/material/card';
import {Image} from '../../models/image';

@Component({
  selector: 'app-home.component',
  imports: [

    AngularImageViewerModule,
    FormsModule
    ],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss',
  schemas :[CUSTOM_ELEMENTS_SCHEMA]
})

export class HomeComponent {

  query : string = '';

  images = [];
  image: Image = {
    url: ''
  };
  imageIndexOne = 0;

  config: ImageViewerConfig = { customBtns: [{ name: 'print',  icon: {
        classes: 'fas fa-paperclip',
        text: 'link'
      } }, { name: 'link',  icon: {
        classes: 'fas fa-paperclip',
        text: 'link'
      } }] };

  submitted: boolean = false;

  constructor(private zhipuaiImageService: ZhipuaiImageService) {

  }

  handleEvent(event: CustomImageEvent) {
    console.log(`${event.name} has been click on img ${event.imageIndex + 1}`);

    switch (event.name) {
      case 'print':
        console.log('run print logic');
        break;
    }
  }
  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);
      }
    )
  }

}
