import { environment } from 'src/environments/environment';
import { Router, ActivatedRoute } from '@angular/router';
import { FormGroup, FormBuilder } from '@angular/forms';
import { tap } from 'rxjs/operators';
import { Location } from '@angular/common';
import { Directive } from '@angular/core';
@Directive()
export class BaseFormUid {
    tinyMCE;
    isHideForm: boolean = environment.hideForm
    form: FormGroup
    state: string
    id: number
    constructor(
        public _router:Router,
        public _activeRouter: ActivatedRoute,
        public fb: FormBuilder,
        public location: Location
    ){
        this.form = this.createForm()
        this._activeRouter.params.pipe(
            tap(x => x.id ? this.state = 'edit' : this.state = 'add'),
            tap(x => x.id ? this.id = x.id : this.id = null)
        ).subscribe()
        this.mce()
    }


    back(){
        // if(this.state == 'add') {
        //     this._router.navigate(['../'],{relativeTo: this._activeRouter})
        //     return
        // }
        this.location.back()
        // this._router.navigate(['../'],{relativeTo: this._activeRouter})

    }

    createForm(){
        return this.fb.group({})
    }



    mce(){
      return this.tinyMCE = {
        plugins: [
          'advlist autolink lists link image charmap print preview hr anchor pagebreak',
          'searchreplace visualblocks visualchars code fullscreen',
          'insertdatetime media nonbreaking save table directionality',
          'emoticons template paste textpattern autoresize',
        ],

        document_base_url: 'test',
        video_template_callback: function(data) {
          return '<video width="' + 450 + '" height="' + 225 + '"' + (data.poster ? ' poster="' + data.poster + '"' : '') + ' controls="controls">\n' + '<source src="' + data.source + '"' + (data.sourcemime ? ' type="' + data.sourcemime + '"' : '') + ' />\n' + (data.altsource ? '<source src="' + data.altsource + '"' + (data.altsourcemime ? ' type="' + data.altsourcemime + '"' : '') + ' />\n' : '') + '</video>';
        },
        relative_urls: false,
        remove_script_host: true,
        forced_root_block: false,
        force_br_newlines: true,
        force_p_newlines: false,
        branding: false,
        toolbar:
          'media image code link',
        image_advtab: true,
        file_picker_callback: function (cb, value, meta) {
          var input = document.createElement('input');
          input.setAttribute('type', 'file');
          input.setAttribute('accept', 'image/* audio/* video/*');
          input.onchange = function() {
            let file = input.files[0];
            let reader = new FileReader();
              const formData: FormData = new FormData();
              formData.append('file', file, file.name)
            reader.readAsDataURL(file);
          }
          input.click();
        }
      }
    }

}

export var sortByProperty = function (property) {

  return function (x, y) {

      return ((x[property] === y[property]) ? 0 : ((x[property] > y[property]) ? 1 : -1));

  };

};  
