import { EnumSelectComponent } from '@/shared/apiEnum/select.component';
import { InputComponent } from '@/shared/components';
import {
  Component,
  EventEmitter,
  Input,
  OnChanges,
  Output,
  SimpleChanges,
  inject,
} from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { ButtonDirective } from 'primeng/button';
import { Drawer } from 'primeng/drawer';
import { InputTextModule } from 'primeng/inputtext';
import { SelectModule } from 'primeng/select';
import { IPosSaleInvoicesFilterDto } from '../models';

@Component({
  selector: 'pos-sale-invoices-filter-drawer',
  templateUrl: './filter-drawer.component.html',
  imports: [
    Drawer,
    ReactiveFormsModule,
    InputTextModule,
    SelectModule,
    ButtonDirective,
    EnumSelectComponent,
    InputComponent,
  ],
})
export class PosSaleInvoicesFilterDrawerComponent implements OnChanges {
  private readonly fb = inject(FormBuilder);

  @Input({ required: true }) visible = false;
  @Input() value: IPosSaleInvoicesFilterDto = {};

  @Output() visibleChange = new EventEmitter<boolean>();
  @Output() apply = new EventEmitter<IPosSaleInvoicesFilterDto>();

  readonly form = this.fb.group({
    page: this.fb.control<number | null>(null),
    perPage: this.fb.control<number | null>(null),
    invoice_date_from: this.fb.control<string>(''),
    invoice_date_to: this.fb.control<string>(''),
    created_at_from: this.fb.control<string>(''),
    created_at_to: this.fb.control<string>(''),
    code: this.fb.control<string>(''),
    customer_name: this.fb.control<string>(''),
    customer_mobile: this.fb.control<string>(''),
    customer_national_id: this.fb.control<string>(''),
    customer_economic_code: this.fb.control<string>(''),
    status: this.fb.control<string | null>(null),
    total_amount_from: this.fb.control<number | null>(null),
    total_amount_to: this.fb.control<number | null>(null),
  });

  ngOnChanges(changes: SimpleChanges) {
    if (changes['value']) {
      this.form.patchValue(
        {
          page: this.value.page ?? null,
          perPage: this.value.perPage ?? null,
          invoice_date_from: this.value.invoice_date_from ?? '',
          invoice_date_to: this.value.invoice_date_to ?? '',
          created_at_from: this.value.created_at_from ?? '',
          created_at_to: this.value.created_at_to ?? '',
          code: this.value.code ?? '',
          customer_name: this.value.customer_name ?? '',
          customer_mobile: this.value.customer_mobile ?? '',
          customer_national_id: this.value.customer_national_id ?? '',
          customer_economic_code: this.value.customer_economic_code ?? '',
          status: this.value.status ?? null,
          total_amount_from: this.value.total_amount_from ?? null,
          total_amount_to: this.value.total_amount_to ?? null,
        },
        { emitEvent: false },
      );
    }
  }

  close() {
    this.visibleChange.emit(false);
  }

  clear() {
    this.form.reset({
      page: null,
      perPage: null,
      invoice_date_from: '',
      invoice_date_to: '',
      created_at_from: '',
      created_at_to: '',
      code: '',
      customer_name: '',
      customer_mobile: '',
      customer_national_id: '',
      customer_economic_code: '',
      status: null,
      total_amount_from: null,
      total_amount_to: null,
    });
    this.apply.emit({});
    this.close();
  }

  submit() {
    const raw = this.form.getRawValue();
    const query: IPosSaleInvoicesFilterDto = {
      page: raw.page,
      perPage: raw.perPage,
      invoice_date_from: raw.invoice_date_from || undefined,
      invoice_date_to: raw.invoice_date_to || undefined,
      created_at_from: raw.created_at_from || undefined,
      created_at_to: raw.created_at_to || undefined,
      code: raw.code?.trim() || undefined,
      customer_name: raw.customer_name?.trim() || undefined,
      customer_mobile: raw.customer_mobile?.trim() || undefined,
      customer_national_id: raw.customer_national_id?.trim() || undefined,
      customer_economic_code: raw.customer_economic_code?.trim() || undefined,
      status: raw.status || undefined,
      total_amount_from: raw.total_amount_from,
      total_amount_to: raw.total_amount_to,
    };

    Object.keys(query).forEach((key) => {
      const typedKey = key as keyof IPosSaleInvoicesFilterDto;
      const value = query[typedKey];
      if (value === undefined || value === null || value === '') {
        delete query[typedKey];
      }
    });

    this.apply.emit(query);
    this.close();
  }
}
