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
      label="Team calendar" locale="en"
      [(month)]="month" [(value)]="date" [events]="events()" [editable]="true"
      (eventCreateRequested)="createEvent($event)"
      (eventEditRequested)="editEvent($event)"
      (eventDeleteRequested)="requestDelete($event)"
    /></view></scroll-view>
    <neu-modal [(open)]="editorOpen" [title]="editingId() ? 'Edit event' : 'Add event'">
      <neu-input label="Event title" [(value)]="draftTitle" placeholder="Team planning" />
      <neu-date-input label="Event date" locale="en" [(value)]="draftDate" />
      <neu-input label="Details" [(value)]="draftDescription" placeholder="Optional details" />
      @if (formError()) { <text accessibilityRole="alert">{{ formError() }}</text> }
      <view class="actions">
        <neu-button label="Save event" size="sm" (pressed)="saveEvent()" />
        <neu-button label="Cancel" size="sm" variant="text" (pressed)="editorOpen.set(false)" />
      </view>
    </neu-modal>
    <neu-confirm-dialog
      [(open)]="deleteOpen" title="Delete event?"
      [message]="'Remove ' + (deleting()?.label ?? 'this event') + ' from the calendar?'"
      confirmLabel="Delete event" 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: 'Release review', description: 'Review the mobile release with the team', date: '2026-10-16' },
    { id: 'research', label: 'Customer interview', description: 'Discuss the next mobile experience', date: '2026-10-16' },
    { id: 'planning', label: 'Sprint planning', description: 'Plan the next iteration', 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('Enter an event title and a valid date (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);
  }
}