import { Component, input, output, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AlertComponent } from '@shared/ui/alert/alert.component';
import { ButtonComponent } from '@shared/ui/button/button.component';

/** Molecule: shows the rejection comments (drafter view) or collects them from the
    approver. The approver rejects WITH comments; they never edit the letter. */
@Component({
  selector: 'app-rejection-comments',
  imports: [FormsModule, AlertComponent, ButtonComponent],
  styles: [
    `
      :host {
        display: block;
      }
      textarea {
        inline-size: 100%;
        box-sizing: border-box;
        min-block-size: 4rem;
        margin-block: var(--rhc-space-max-sm);
      }
      label {
        font-weight: 600;
      }
    `,
  ],
  template: `
    @if (mode() === 'show') {
      <app-alert type="warning"
        ><strong>{{ rejectedTitle() }}</strong> {{ comments() }}</app-alert
      >
    } @else {
      <label for="reject-comments">{{ entryLabel() }}</label>
      <textarea id="reject-comments" [(ngModel)]="draft"></textarea>
      <app-button variant="danger" [disabled]="!draft().trim() || busy()" (click)="submit()">{{
        rejectLabel()
      }}</app-button>
    }
  `,
})
export class RejectionCommentsComponent {
  mode = input<'show' | 'entry'>('show');
  comments = input('');
  busy = input(false);
  reject = output<string>();

  rejectedTitle = input($localize`:@@brief.reject.title:Afgewezen:`);
  entryLabel = input($localize`:@@brief.reject.entryLabel:Reden van afwijzing`);
  rejectLabel = input($localize`:@@brief.reject.button:Afwijzen`);

  protected draft = signal('');

  protected submit() {
    const c = this.draft().trim();
    if (c) this.reject.emit(c);
  }
}