Calendar

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuCalendarComponent } from '@neural-ui/native/calendar';
import { NeuConfirmDialogComponent } from '@neural-ui/native/confirm-dialog';
import { NeuDateInputComponent } from '@neural-ui/native/date-input';
import { NeuModalComponent } from '@neural-ui/native/modal';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuCalendarEvent } from '@neural-ui/native/calendar';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuInputComponent, NeuCalendarComponent, NeuConfirmDialogComponent, NeuDateInputComponent, NeuModalComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="calendar-scroll" keyboardShouldPersistTaps="handled"><view class="calendar-content"><neu-calendar nextYearsLabel="12 años siguientes" previousYearsLabel="12 años anteriores" nextYearLabel="Año siguiente" previousYearLabel="Año anterior" nextLabel="Mes siguiente" previousLabel="Mes anterior" deleteEventLabel="Eliminar" editEventLabel="Editar" addEventLabel="Añadir evento" hasEventsLabel="Día con eventos" emptyAgendaLabel="No hay eventos este día" agendaLabel="Agenda"
      label="Calendario del equipo" locale="es"
      [(month)]="month" [(value)]="date" [events]="events()" [editable]="true"
      (eventCreateRequested)="createEvent($event)"
      (eventEditRequested)="editEvent($event)"
      (eventDeleteRequested)="requestDelete($event)"
    /></view></scroll-view>
    <neu-modal closeLabel="Cerrar diálogo" [(open)]="editorOpen" [title]="editingId() ? 'Editar evento' : 'Añadir evento'">
      <neu-input requiredLabel="Obligatorio" label="Título del evento" [(value)]="draftTitle" placeholder="Planificación del equipo" />
      <neu-date-input nextYearsLabel="12 años siguientes" previousYearsLabel="12 años anteriores" nextYearLabel="Año siguiente" previousYearLabel="Año anterior" nextLabel="Mes siguiente" previousLabel="Mes anterior" closeLabel="Cerrar calendario" label="Fecha del evento" locale="es" [(value)]="draftDate" />
      <neu-input requiredLabel="Obligatorio" label="Detalles" [(value)]="draftDescription" placeholder="Detalles opcionales" />
      @if (formError()) { <text accessibilityRole="alert">{{ formError() }}</text> }
      <view class="actions">
        <neu-button label="Guardar evento" size="sm" (pressed)="saveEvent()" />
        <neu-button label="Cancelar" size="sm" variant="text" (pressed)="editorOpen.set(false)" />
      </view>
    </neu-modal>
    <neu-confirm-dialog closeLabel="Cerrar confirmación" cancelLabel="Cancelar"
      [(open)]="deleteOpen" title="¿Eliminar evento?"
      [message]="'¿Eliminar ' + (deleting()?.label ?? 'este evento') + ' del calendario?'"
      confirmLabel="Eliminar evento" intent="danger" (confirmed)="deleteEvent()"
    />
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
:host { flex: 1; min-height: 0; } .calendar-scroll { flex: 1; min-height: 0; } .calendar-content { padding-bottom: 20px; } .actions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  `,
})
export class ExampleComponent {
  readonly month = signal('2026-10');
  readonly date = signal('2026-10-16');
  readonly events = signal<readonly NeuCalendarEvent[]>([
    { id: 'review', label: 'Revisión del lanzamiento', description: 'Revisa el lanzamiento móvil con el equipo', date: '2026-10-16' },
    { id: 'research', label: 'Entrevista con un cliente', description: 'Comenta la próxima experiencia móvil', date: '2026-10-16' },
    { id: 'planning', label: 'Planificación del sprint', description: 'Planifica la próxima iteración', date: '2026-10-20' },
  ]);
  readonly editorOpen = signal(false);
  readonly deleteOpen = signal(false);
  readonly editingId = signal<string | null>(null);
  readonly deleting = signal<NeuCalendarEvent | null>(null);
  readonly draftTitle = signal('');
  readonly draftDate = signal('');
  readonly draftDescription = signal('');
  readonly formError = signal('');
  private nextEventId = 0;
  createEvent(date: string): void {
    this.editingId.set(null);
    this.draftTitle.set('');
    this.draftDate.set(date);
    this.draftDescription.set('');
    this.formError.set('');
    this.editorOpen.set(true);
  }
  editEvent(event: NeuCalendarEvent): void {
    this.editingId.set(event.id);
    this.draftTitle.set(event.label);
    this.draftDate.set(event.date);
    this.draftDescription.set(event.description ?? '');
    this.formError.set('');
    this.editorOpen.set(true);
  }
  saveEvent(): void {
    const label = this.draftTitle().trim();
    const date = this.draftDate().trim();
    const parsed = new Date(date + 'T00:00:00.000Z');
    if (!label || !/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(date) || Number.isNaN(parsed.getTime()) || parsed.toISOString().slice(0, 10) !== date) {
      this.formError.set('Introduce un título y una fecha válida (YYYY-MM-DD).');
      return;
    }
    const id = this.editingId();
    const event: NeuCalendarEvent = { id: id ?? 'event-' + ++this.nextEventId, label, date, description: this.draftDescription().trim() };
    this.events.update(events => id ? events.map(item => item.id === id ? event : item) : [...events, event]);
    this.date.set(date);
    this.editorOpen.set(false);
  }
  requestDelete(event: NeuCalendarEvent): void {
    this.deleting.set(event);
    this.deleteOpen.set(true);
  }
  deleteEvent(): void {
    const id = this.deleting()?.id;
    if (id) this.events.update(events => events.filter(event => event.id !== id));
    this.deleteOpen.set(false);
    this.deleting.set(null);
  }
}