import { Component, inject, computed, effect, input, linkedSignal } from '@angular/core';
import { form, FormField } from '@angular/forms/signals';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import moment from 'moment';

import { LocalTimePipe } from '../../shared/local-time.pipe';
import { GuestBookService } from '../guest-book.service';

export interface GuestBookListFormData {
  date: Date;
}

@Component({
  selector: 'app-guest-book-list',
  templateUrl: './guest-book-list.component.html',
  styleUrls: ['./guest-book-list.component.sass'],
  imports: [
    LocalTimePipe,
    MatButtonModule,
    MatButtonModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    MatTableModule,
    FormField,
    RouterLink,
  ],
})
export class GuestBookListComponent {
  private route = inject(ActivatedRoute);
  private router = inject(Router);
  private snackBar = inject(MatSnackBar);
  private ser = inject(GuestBookService);

  date = input(new Date(), {
    transform: (v: string | null | undefined): Date => {
      if (v) {
        const parsed = moment(v, 'DD-MMM-YYYY', true);
        if (parsed.isValid()) return parsed.toDate();
      }
      return new Date();
    },
  });

  formModel = linkedSignal({
    source: this.date,
    computation: (d): GuestBookListFormData => ({
      date: d,
    }),
  });

  form = form(this.formModel);

  displayedColumns = ['sno', 'name', 'phone', 'pax', 'date', 'action'];

  dateSignal = computed(() => moment(this.formModel().date).format('DD-MMM-YYYY'));
  listResource = this.ser.list(this.dateSignal);

  dataSource = computed(() => this.listResource.value()?.list ?? []);

  constructor() {
    // Keep the query string in sync with the form date
    effect(() => {
      const date = this.dateSignal();
      this.router.navigate([], {
        relativeTo: this.route,
        queryParams: { date },
        queryParamsHandling: 'merge',
        replaceUrl: true,
      });
    });
  }
}