import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
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 { ActivatedRoute, Router } from '@angular/router';
import { map } from 'rxjs/operators';

import { ToasterService } from '../core/toaster.service';

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

@Component({
  selector: 'app-section-printer',
  templateUrl: './header-footer.component.html',
  styleUrls: ['./header-footer.component.css'],
  imports: [
    MatButtonModule,
    MatCardModule,
    MatDividerModule,
    MatFormFieldModule,
    MatInputModule,
    MatOptionModule,
    MatSelectModule,
    ReactiveFormsModule,
  ],
})
export class HeaderFooterComponent implements OnInit {
  @ViewChild('section', { static: true }) sectionElement?: ElementRef;
  form: FormGroup<{
    id: FormControl<string>;
    text: FormControl<string>;
  }>;

  list: HeaderFooter[] = [];
  id = '';

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private toaster: ToasterService,
    private dialog: MatDialog,
    private ser: HeaderFooterService,
  ) {
    // Create form
    this.form = new FormGroup({
      id: new FormControl<string>('', { nonNullable: true }),
      text: new FormControl<string>('', { nonNullable: true }),
    });
    route.params.pipe(map((p) => p['id'])).subscribe((x) => {
      this.id = x;
    });
  }

  ngOnInit() {
    this.route.data.subscribe((value) => {
      const data = value as { list: HeaderFooter[] };
      this.showItem(data.list);
    });
  }

  showItem(list: HeaderFooter[]) {
    this.list = list;
    this.id = this.id ?? this.list[0].id;
    const val = this.list.find((v) => v.id === this.id) as HeaderFooter;
    this.form.setValue({
      id: this.id,
      text: val.text,
    });
  }

  save() {
    this.ser.save(this.getItem()).subscribe({
      next: (result: HeaderFooter[]) => {
        this.toaster.show('Success', '');
        this.showItem(result);
      },
      error: (error) => {
        this.toaster.show('Error', error);
      },
    });
  }

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

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