import { Component, OnInit, inject, signal } from '@angular/core'
import { RouterModule } from '@angular/router'
import {
  NgbDropdownModule,
  NgbModal,
  NgbPaginationModule,
} from '@ng-bootstrap/ng-bootstrap'
import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
import { takeUntil, tap } from 'rxjs'
import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
import { CustomFieldEditDialogComponent } from 'src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
import { EditDialogMode } from 'src/app/components/common/edit-dialog/edit-dialog.component'
import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
import { CustomField, DATA_TYPE_LABELS } from 'src/app/data/custom-field'
import {
  CustomFieldQueryLogicalOperator,
  CustomFieldQueryOperator,
} from 'src/app/data/custom-field-query'
import { FILTER_CUSTOM_FIELDS_QUERY } from 'src/app/data/filter-rule-type'
import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
import { DocumentListViewService } from 'src/app/services/document-list-view.service'
import { PermissionsService } from 'src/app/services/permissions.service'
import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
import { DocumentService } from 'src/app/services/rest/document.service'
import { SavedViewService } from 'src/app/services/rest/saved-view.service'
import { SettingsService } from 'src/app/services/settings.service'
import { ToastService } from 'src/app/services/toast.service'

@Component({
  selector: 'pngx-custom-fields',
  templateUrl: './custom-fields.component.html',
  styleUrls: ['./custom-fields.component.scss'],
  imports: [
    IfPermissionsDirective,
    NgbDropdownModule,
    NgbPaginationModule,
    NgxBootstrapIconsModule,
    RouterModule,
  ],
})
export class CustomFieldsComponent
  extends LoadingComponentWithPermissions
  implements OnInit
{
  private readonly customFieldsService = inject(CustomFieldsService)
  public readonly permissionsService = inject(PermissionsService)
  private readonly modalService = inject(NgbModal)
  private readonly toastService = inject(ToastService)
  private readonly documentListViewService = inject(DocumentListViewService)
  private readonly settingsService = inject(SettingsService)
  private readonly documentService = inject(DocumentService)
  private readonly savedViewService = inject(SavedViewService)

  readonly fields = signal<CustomField[]>([])

  ngOnInit() {
    this.reload()
  }

  reload() {
    this.loading.set(true)
    this.customFieldsService
      .listAll()
      .pipe(
        takeUntil(this.unsubscribeNotifier),
        tap((r) => {
          this.fields.set(r.results)
        })
      )
      .subscribe(() => {
        this.show.set(true)
        this.loading.set(false)
      })
  }

  editField(field: CustomField) {
    const modal = this.modalService.open(CustomFieldEditDialogComponent)
    modal.componentInstance.dialogMode.set(
      field ? EditDialogMode.EDIT : EditDialogMode.CREATE
    )
    modal.componentInstance.object = field
    modal.componentInstance.succeeded
      .pipe(takeUntil(this.unsubscribeNotifier))
      .subscribe((newField) => {
        this.toastService.showInfo($localize`Saved field "${newField.name}".`)
        this.customFieldsService.clearCache()
        this.settingsService.initializeDisplayFields()
        this.documentService.reload()
        this.reload()
      })
    modal.componentInstance.failed
      .pipe(takeUntil(this.unsubscribeNotifier))
      .subscribe((e) => {
        this.toastService.showError($localize`Error saving field.`, e)
      })
  }

  deleteField(field: CustomField) {
    const modal = this.modalService.open(ConfirmDialogComponent, {
      backdrop: 'static',
    })
    modal.componentInstance.title = $localize`Confirm delete field`
    modal.componentInstance.messageBold = $localize`This operation will permanently delete this field.`
    modal.componentInstance.message = $localize`This operation cannot be undone.`
    modal.componentInstance.btnClass = 'btn-danger'
    modal.componentInstance.btnCaption = $localize`Proceed`
    modal.componentInstance.confirmClicked.subscribe(() => {
      modal.componentInstance.buttonsEnabled.set(false)
      this.customFieldsService.delete(field).subscribe({
        next: () => {
          modal.close()
          this.toastService.showInfo($localize`Deleted field "${field.name}"`)
          this.customFieldsService.clearCache()
          this.settingsService.initializeDisplayFields()
          this.documentService.reload()
          this.savedViewService.reload()
          this.reload()
        },
        error: (e) => {
          this.toastService.showError(
            $localize`Error deleting field "${field.name}".`,
            e
          )
        },
      })
    })
  }

  getDataType(field: CustomField): string {
    return DATA_TYPE_LABELS.find((l) => l.id === field.data_type).name
  }

  getDocumentFilterUrl(field: CustomField) {
    return this.documentListViewService.getQuickFilterUrl([
      {
        rule_type: FILTER_CUSTOM_FIELDS_QUERY,
        value: JSON.stringify([
          CustomFieldQueryLogicalOperator.Or,
          [[field.id, CustomFieldQueryOperator.Exists, true]],
        ]),
      },
    ])
  }
}
