import { Component, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.component.html',
  styleUrls: ['./post-create.component.scss']
})
export class PostCreateComponent {
  @Output() postCreate: EventEmitter<FormData> = new EventEmitter<FormData>();

  createPostForm: FormGroup;
  photo: any;
  photoUrl: any;

  constructor(
    public activeModal: NgbActiveModal,
    private readonly fb: FormBuilder,
    private cd: ChangeDetectorRef,
  ) {
    this.buildForm();
  }

  createPost(): void {
    const formData: FormData = new FormData();
    formData.append('title', this.createPostForm.get('title').value);
    formData.append('description', this.createPostForm.get('description').value);
    formData.append('status', this.createPostForm.get('status').value);
    formData.append('photo', this.photo);

    this.postCreate.emit(formData);
  }

  onPhotoChange(event: any): void {
    const file = event.target.files[0];

    if (!file || !(/image\/(gif|jpg|jpeg|png)$/i).test(file.type)) {
      return;
    }

    this.photo = file;
    const reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = () => {
      this.photoUrl = reader.result;
    };
  }

  private buildForm(): void {
    this.createPostForm = this.fb.group({
      title: ['', Validators.compose([
        Validators.required,
      ])],
      description: ['', Validators.compose([
        Validators.required,
      ])],
      status: ['public', Validators.compose([
        Validators.required,
      ])],
    },
    );
  }
}