import { AbstractForm } from '@/shared/abstractClasses';
import {
  EconomicCodeComponent,
  FirstNameComponent,
  LastNameComponent,
  MobileNumberComponent,
  NationalIdComponent,
  PostalCodeComponent,
} from '@/shared/components';
import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
import { fieldControl } from '@/shared/constants';
import { CustomerType } from '@/shared/localEnum/constants/customerTypes';
import { Component, computed, inject } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { Observable } from 'rxjs';
import { IIndividualCustomer } from '../../../models/customer';
import { PosLandingStore } from '../../../store/main.store';

@Component({
  selector: 'pos-customer-individual-form',
  templateUrl: './form.component.html',
  imports: [
    ReactiveFormsModule,
    FormFooterActionsComponent,
    FirstNameComponent,
    LastNameComponent,
    NationalIdComponent,
    EconomicCodeComponent,
    MobileNumberComponent,
    PostalCodeComponent,
  ],
})
export class CustomerIndividualFormComponent extends AbstractForm<
  IIndividualCustomer,
  IIndividualCustomer
> {
  private readonly store = inject(PosLandingStore);
  costumerInfo = computed(() => this.store.customer().info?.customer_individual);

  override showSuccessMessage = false;
  form = this.fb.group({
    first_name: fieldControl.first_name(this.costumerInfo()?.first_name || ''),
    last_name: fieldControl.last_name(this.costumerInfo()?.last_name || ''),
    national_id: fieldControl.national_id(this.costumerInfo()?.national_id || ''),
    postal_code: fieldControl.postal_code(this.costumerInfo()?.postal_code || ''),
    economic_code: fieldControl.economic_code(this.costumerInfo()?.economic_code || ''),
    mobile_number: fieldControl.mobile_number(this.costumerInfo()?.mobile_number || ''),
  });

  override submitForm() {
    return new Observable<IIndividualCustomer>((observer) => {
      const info = this.form.value as IIndividualCustomer;
      this.store.setCustomer({
        customer_id: '',
        type: CustomerType.INDIVIDUAL,
        info: {
          customer_individual: info,
        },
      });
      return observer.next(info);
    });
  }
}
