import { Component, computed, inject, linkedSignal, input } from '@angular/core';
import { form, FormField } from '@angular/forms/signals';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatDialog } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectChange, MatSelectModule } from '@angular/material/select';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute, Router } from '@angular/router';

import { HeaderFooter } from './header-footer';
import { HeaderFooterService } from './header-footer.service';

export interface HeaderFooterFormData {
  id: string;
  text: string;
}

@Component({
  selector: 'app-section-printer',
  templateUrl: './header-footer.component.html',
  styleUrls: ['./header-footer.component.css'],
  imports: [
    MatButtonModule,
    MatDividerModule,
    MatFormFieldModule,
    MatInputModule,
    MatOptionModule,
    MatSelectModule,
    FormField,
  ],
})
export class HeaderFooterComponent {
  private route = inject(ActivatedRoute);
  private router = inject(Router);
  private snackBar = inject(MatSnackBar);
  private dialog = inject(MatDialog);
  private ser = inject(HeaderFooterService);
  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
  listResource = this.ser.list();

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

  formModel = linkedSignal({
    source: () => {
      const list = this.list();
      let currentId = this.id();
      if (!currentId && list.length > 0) {
        currentId = list[0].id;
      }
      return { list, id: currentId };
    },
    computation: ({ list, id }): HeaderFooterFormData => {
      const val = list.find((v) => v.id === id);
      return {
        id: id ?? '',
        text: val?.text ?? '',
      };
    },
  });

  form = form(this.formModel);

  save() {
    this.ser.save(this.getItem()).subscribe({
      next: (result: HeaderFooter[]) => {
        this.snackBar.open('', 'Success');
        this.listResource.value.set(result);
      },
      error: (error: unknown) => {
        this.snackBar.open(error as string, 'Error');
      },
    });
  }

  getItem(): HeaderFooter {
    const formModel = this.formModel();
    const item = this.list().find((v) => v.id === formModel.id);
    if (item === undefined) {
      return new HeaderFooter();
    }
    const clonedItem = Object.assign(new HeaderFooter(), item);
    clonedItem.text = formModel.text ?? '';
    return clonedItem;
  }

  show(val: MatSelectChange) {
    this.router.navigate(['/header-footer', val.value]);
  }
}