import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {FormGroup, FormBuilder, AbstractControl} from '@angular/forms';
import {FileInput, FileValidator} from 'ngx-material-file-input';
import {HttpClient} from '@angular/common/http';
import {environment} from '../../../../environments/environment';
import {throwError} from 'rxjs';
import {NGXLogger} from 'ngx-logger';
import {MatSnackBar} from '@angular/material/snack-bar';
import {DialogComponent} from '../../dialog/dialog.component';
import {MatDialog} from '@angular/material/dialog';
import {URLFormatValidator} from '../../../validators/url.validator';
import {keywordsValidator} from '../../../validators/keywords.validator';

@Component({
  selector: 'app-editieren',
  templateUrl: './editieren.component.html',
  styleUrls: ['./editieren.component.css']
})
export class EditierenComponent implements OnInit {
  id;

  feedForm: FormGroup;
  url: String;
  active = true;
  match_all_keywords = false;
  icon: File;
  keywords: String;

  readonly maxSize = 10240;
  private currentLocation = environment.location;

  constructor(private route: ActivatedRoute,
              private formBuilder: FormBuilder,
              private http: HttpClient,
              private _snackbar: MatSnackBar,
              private _logger: NGXLogger,
              ) {
    this.route.paramMap.subscribe(paramMap => {
      this.id = paramMap.get('id');
      if (this.id) {
        this.loadFeed(this.id);
      }
    });
  }

  ngOnInit(): void {
    this.feedForm = this.formBuilder.group({
      url: [this.url, [URLFormatValidator]],
      active: this.active,
      icon: [undefined, [FileValidator.maxContentSize(this.maxSize)]],
      keywords: [this.keywords, [keywordsValidator]],
      match_all_keywords: this.match_all_keywords
    });
  }

  public loadFeed(id) {
    this.http.get('http://127.0.0.1:8000/feeds/' + id + '/').subscribe(
      (data: any) => {
        this.url = data.url;
        this.active = data.active;
        this.icon = data.icon;
        this.keywords = data.keywords;
        this.match_all_keywords = data.match_all_keywords;
        this.feedForm.patchValue({
          url: data.url,
          active: data.active,
          keywords: data.keywords,
          match_all_keywords: data.match_all_keywords
        });
      },
      err => this._logger.error(err),
    );
  }

  public saveFeed(feedData) {
    const form: FormData = new FormData();
    form.append('url', feedData.url);
    form.append('active', feedData.active);
    form.append('match_all_keywords', feedData.match_all_keywords);
    if (feedData.keywords != null) {
      form.append('keywords', feedData.keywords);
    }
    if (feedData.icon != null) {
      form.append('icon', feedData.icon._files['0']);
    }
    if (this.id == null) {
      this.http.post('http://127.0.0.1:8000/feeds/', form).subscribe(
        () => {
          this._snackbar.open('Feed erfolgreich gespeichert!', 'Schließen', {duration: 3000});
        },
        err => {
          this._logger.error(err);
          return throwError(err);
        }
      );
    } else {
      this.http.put('http://127.0.0.1:8000/feeds/' + this.id + '/', form).subscribe(
        () => {
          this._snackbar.open('Feed erfolgreich gespeichert!', 'Schließen', {duration: 3000});
        },
        err => {
          this._logger.error(err);
          return throwError(err);
        }
      );
    }
  }
}