Toolbar

import { Component, signal, computed } from '@angular/core';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuToolbarComponent } from '@neural-ui/native/toolbar';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuToolbarAction } from '@neural-ui/native/toolbar';

@Component({
  selector: 'app-example',
  imports: [NeuInputComponent, NeuToolbarComponent, View, Text, ScrollView],
  template: `
    <view class="documents-screen">
      <neu-toolbar label="Acciones de documentos" [actions]="actions" (activated)="onActivated($event)">
        <text class="toolbar-title" [numberOfLines]="1" ellipsizeMode="tail">Documentos</text>
      </neu-toolbar>
      <scroll-view class="documents-scroll" keyboardShouldPersistTaps="handled"><view class="documents-body">
        @if (searching()) {
          <neu-input requiredLabel="Obligatorio" label="Buscar documentos" placeholder="Nombre o tipo de archivo" [(value)]="query" />
        }
        <view class="section-heading">
          <text class="section-title">Archivos recientes</text>
          <text class="file-count">{{ visibleDocuments().length }}</text>
        </view>
        @for (document of visibleDocuments(); track document.id) {
          <view class="document-row">
            <view class="file-symbol"><text class="file-type">{{ document.type }}</text></view>
            <view class="document-copy">
              <text class="document-name" [numberOfLines]="1" ellipsizeMode="tail">{{ document.name }}</text>
              <text class="document-meta">{{ document.detail }}</text>
            </view>
          </view>
        } @empty {
          <text class="empty-copy">No hay documentos que coincidan.</text>
        }
        <text class="status-copy" accessibilityLiveRegion="polite">{{ status() }}</text>
      </view></scroll-view>
    </view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
:host { flex: 1; min-height: 0; }
.documents-screen { flex: 1; background-color: var(--neu-surface, #ffffff); }
.documents-scroll { flex: 1; min-height: 0; }
.toolbar-title { flex-shrink: 1; color: var(--neu-text, #172033); font-size: 20px; line-height: 26px; font-weight: 600; }
.documents-body { padding: 20px 16px; gap: 8px; }
.section-heading { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 8px; margin-bottom: 8px; }
.section-title { color: var(--neu-muted, #596477); font-size: 13px; line-height: 18px; font-weight: 500; }
.file-count { color: var(--neu-muted, #596477); font-size: 13px; line-height: 18px; }
.document-row { flex-direction: row; align-items: center; gap: 12px; min-height: 76px; padding: 12px 0; border-bottom-width: 1px; border-color: var(--neu-divider, #e4e7ec); }
.file-symbol { width: 44px; height: 48px; border-radius: 10px; background-color: var(--neu-tonal, #e9edfc); align-items: center; justify-content: center; }
.file-type { color: var(--neu-text, #172033); font-size: 11px; font-weight: 600; }
.document-copy { flex: 1; min-width: 0; gap: 4px; }
.document-name { color: var(--neu-text, #172033); font-size: 15px; line-height: 20px; font-weight: 500; }
.document-meta, .status-copy { color: var(--neu-muted, #596477); font-size: 13px; line-height: 18px; }
.status-copy { margin-top: 8px; }
.empty-copy { color: var(--neu-muted, #596477); font-size: 15px; line-height: 22px; padding: 24px 0; }
  `,
})
export class ExampleComponent {
  readonly searching = signal(false);
  readonly query = signal('');
  readonly status = signal('');
  readonly documents = signal([
    { id: 'brief', name: 'Resumen del proyecto', type: 'PDF', detail: 'Hoy · 240 KB' },
    { id: 'notes', name: 'Notas de la reunión', type: 'TXT', detail: 'Ayer · 12 KB' },
    { id: 'guide', name: 'Guía de marca', type: 'PDF', detail: 'Lunes · 1,8 MB' },
  ]);
  readonly visibleDocuments = computed(() => {
    const query = this.query().trim().toLocaleLowerCase();
    return this.documents().filter(document =>
      (document.name + ' ' + document.type).toLocaleLowerCase().includes(query));
  });
  readonly actions: readonly NeuToolbarAction[] = [
    { id: 'search', label: 'Buscar archivos', svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4 4"/></svg>' },
    { id: 'new', label: 'Nuevo documento', svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>' },
  ];
  private nextDraft = 1;
  onActivated(id: string): void {
    if (id === 'search') {
      this.searching.update(value => !value);
      this.query.set('');
    }
    if (id === 'new') {
      const number = this.nextDraft++;
      this.query.set('');
      this.documents.update(documents => [
        { id: 'draft-' + number, name: 'Documento sin título ' + number, type: 'TXT', detail: 'Borrador · Ahora mismo' },
        ...documents,
      ]);
      this.status.set('Borrador creado en esta pantalla.');
    }
  }
}