import { Component, OnInit, Input } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { FileUploadService } from '../../../services/fileupload.service';
import { NGXLogger } from 'ngx-logger';
import { PushNotificationService } from '../../../services/push.notification.service'

@Component({
    selector: 'push-notification-modal',
    templateUrl: './push-notification-modal.component.html',
    styleUrls: ['./push-notification-modal.component.css']
})

export class PushNotificationModalComponent implements OnInit {
    notificationForm: FormGroup;
    isValidNotificationImage: boolean = true;
    notificationImageFileContent;
    @Input() caption: string;

    constructor(public bsModalRef: BsModalRef, private logger: NGXLogger, private toastr: ToastrService, private fb: FormBuilder, private pushNotificationService:PushNotificationService, private fileUploadService: FileUploadService) {}

    ngOnInit(): void {
        this.notificationForm = this.fb.group({
            title: ['', Validators.required],
            push_message: ['', Validators.required],
            notificationImage: ['']
        });
    }

    removeValidators() {
        this.notificationForm.get('title').clearValidators();
        this.notificationForm.get('title').updateValueAndValidity();
        this.notificationForm.get('push_message').clearValidators();
        this.notificationForm.get('push_message').updateValueAndValidity();
    }

    setValidators() {
        this.notificationForm.get('title').setValidators(Validators.required);
        this.notificationForm.get('title').updateValueAndValidity();
        this.notificationForm.get('push_message').setValidators(Validators.required);
        this.notificationForm.get('push_message').updateValueAndValidity();
    }

    validateAndGetNotificationImageContent(event){
        const files = event.target.files;
        this.isValidNotificationImage = true;
        if (files && files.length > 0) {
            for (const file of files) {
                this.fileUploadService.isValidImageFile(file, (isValid) => {
                    if (isValid) {
                        this.fileUploadService.getImageBinaryString(file, (content) => {
                            this.notificationImageFileContent = content;
                        })
                    }
                    else {
                        this.isValidNotificationImage = false;
                    }
                })
            }
        }
        else
            this.isValidNotificationImage = false;
    }
    async onSubmit() {
        if (this.notificationForm.get('title').value === '' || this.notificationForm.get('push_message').value === '') {
          this.notificationForm.controls['title'].markAllAsTouched();
          this.notificationForm.controls['push_message'].markAllAsTouched();
        }
        if (this.notificationForm.valid){
            if( this.notificationImageFileContent && this.isValidNotificationImage) {          
                this.notificationForm.value.notificationImageFileContent = this.notificationImageFileContent;
                this.notificationForm.value.has_image = true;
            }else{
                this.notificationForm.value.has_image = false;
            }
            this.pushNotificationService.updatePushNotification(this.notificationForm.value).subscribe((result: { status: string, message: string, data }) => {
                if (result.status === 'success') {
                    this.toastr.success('Push Notification has been created');
                }
            }, (error) => {
                    this.toastr.error('Some error occured');
                    this.logger.error(error);
                },
            );
            this.bsModalRef.hide();
        }
        else {
          this.notificationForm.controls['title'].markAsTouched();
          this.notificationForm.controls['push_message'].markAsTouched();
          this.notificationForm.controls['notificationImage'].markAsTouched();
        }
    }
    get title() { return this.notificationForm.get('title') }
    get push_message() { return this.notificationForm.get('push_message') }
    get notificationImage() { return this.notificationForm.get('notificationImage') }
}