import {Component, Input} from "@angular/core";
import {AngularEditorConfig} from "@kolkov/angular-editor";
import {FormControl} from "@angular/forms";

@Component({
	selector: 'rich-text-editor-component',
	template: `
		<div class="editor-wrapper" [class]="wrapperClasses" [formGroup]="parentFormGroup">
			<angular-editor class="full-width editor" [id]="id" [config]="editorConfig" [formControlName]="controlName"
							placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"></angular-editor>
			<mat-icon *ngIf="formInput.value" (click)="formInput.patchValue('')" class="clear">close</mat-icon>
		</div>
	`,
	styleUrls: ['./rich-text-editor.component.scss']
})
export class RichTextEditorComponent {
	@Input() parentFormGroup;
	@Input() controlName;
	@Input() id: string = "editor1";
	@Input() placeholder: string = "Enter text";
	@Input() required: boolean = false;
	@Input() wrapperClasses: string = "";

	editorConfig: AngularEditorConfig = {
		editable: true,
		spellcheck: true,
		height: 'auto',
		minHeight: '0',
		maxHeight: 'auto',
		width: '100%',
		minWidth: '0',
		translate: 'yes',
		enableToolbar: true,
		showToolbar: true,
		placeholder: '',
		defaultParagraphSeparator: '',
		defaultFontName: '',
		defaultFontSize: '',
		sanitize: true,
		toolbarPosition: 'top',
		toolbarHiddenButtons: [
			[
				'heading',
				'fontName'
			],
			[
				'fontSize',
				'backgroundColor',
				'customClasses',
				'insertImage',
				'insertVideo',
				'removeFormat',
				'toggleEditorMode'
			]
		]
	};

	get formInput(): FormControl {
		return this.parentFormGroup.get(this.controlName);
	}
}