import { Component, ElementRef, EventEmitter, Inject, Input, NgZone, Output, PLATFORM_ID, Renderer2 } from '@angular/core';
import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

import { MsgBoxService } from '../../../services/msg-box.service';
import { DropDownOption } from '../../../entity/dropDownOption';
import { MD2Icon } from '../massive-darkness2.model';
import { first } from 'rxjs/operators';
import { MD2StateService } from '../../../services/MD2/md2-state.service';
@Component({
  selector: 'md2-html-editor',
  templateUrl: './md2-html-editor.component.html',
  styleUrl: './md2-html-editor.component.scss'
})
export class MD2HtmlEditorComponent implements ControlValueAccessor {
  customCssClass = '.MD2Icon{font-family: "Massive Darkness 2", sans-serif !important; font-size: 40px; margin-left:5px}  body{font-size: 30px;  }';
  constructor(
    private msgBoxService: MsgBoxService,
    private md2StateService: MD2StateService,
    elementRef: ElementRef, ngZone: NgZone, @Inject(PLATFORM_ID) platformId: Object) {

  }


  showInsertMD2Icon() {


    //Insert

    //Get all icon html 
    let iconHtml = [];
    for (let icon of Object.values(MD2Icon) as MD2Icon[]) {
      iconHtml.push(this.md2StateService.iconHtml(icon));
    }

    //Show dialog with all icon html
    //then user can select one icon and insert it to the html editor current cursor position

  }
}