import { CommonModule } from '@angular/common';
import { Component, forwardRef } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { QuillModule } from 'ngx-quill';
import { BaseInputComponent } from '../base-input/base-input.component';
import { ValidationMessagesService } from '../validation-messages.service';

@Component({
  selector: 'app-validated-quill',
  template: `
    <div>
      <label [for]="name" class="block text-sm font-medium text-gray-700">
        {{ label }}
        <span class="text-red-500 ml-1">{{ validationMessage }}</span>
      </label>
      <quill-editor [(ngModel)]="value" (ngModelChange)="onInputChange($event)" (onBlur)="onTouched()" [id]="name" [attr.name]="name" [modules]="quillModules"></quill-editor>
    </div>
  `,
  standalone: true,
  imports: [CommonModule, FormsModule, QuillModule],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ValidatedQuillComponent),
      multi: true,
    },
  ],
})
export class ValidatedQuillComponent extends BaseInputComponent {
  quillModules = {
    toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
  };
  constructor(validationMessagesService: ValidationMessagesService) {
    super(validationMessagesService);
  }

  onInputChange(event: Event): void {
    this.value = event;
    this.onChange(this.value);
  }
}