import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  Output,
  inject,
} from '@angular/core'
import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
import { AutocompleteComponent, BadgeComponent } from '../../../../../../../libs/ui/inputs/src'
import { map } from 'rxjs'
import { Keyword } from '../../../../../../../libs/common/domain/src/lib/model/record'
import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
import { TranslatePipe } from '@ngx-translate/core'
import {
  NgIconComponent,
  provideIcons,
  provideNgIconsConfig,
} from '@ng-icons/core'
import { matWarningAmberOutline } from '@ng-icons/material-icons/outline'

type AutocompleteItem = { title: string; value: Keyword }

@Component({
  selector: 'gn-ui-generic-keywords',
  templateUrl: './generic-keywords.component.html',
  styleUrls: ['./generic-keywords.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [
    AutocompleteComponent,
    NgIconComponent,
    BadgeComponent,
    TranslatePipe,
  ],
  providers: [
    provideIcons({
      matWarningAmberOutline,
    }),
    provideNgIconsConfig({
      size: '1.5em',
    }),
  ],
})
export class GenericKeywordsComponent {
  private platformService = inject(PlatformServiceInterface)

  @Input() keywords: Keyword[]
  @Input() keywordTypes: KeywordType[]
  @Input() placeholder: string
  @Input() allowSubmit: boolean
  @Output() changedKeywords: EventEmitter<Keyword[]> = new EventEmitter()
  @Output() addedKeyword: EventEmitter<Keyword> = new EventEmitter()
  @Output() deletedKeyword: EventEmitter<Keyword> = new EventEmitter()

  displayWithFn = (item: AutocompleteItem) => {
    return `${item.title} (${item.value.thesaurus?.name})`
  }

  autoCompleteAction = (query: string) => {
    return this.platformService.searchKeywords(query, this.keywordTypes).pipe(
      map((keywords) =>
        keywords.map((keyword) => {
          return { title: keyword.label, value: keyword }
        })
      )
    )
  }

  handleItemSelection(item: AutocompleteItem) {
    this.addKeyword(item.value)
  }

  addKeyword(keyword: Keyword) {
    const duplicatedKeyword = this.keywords.find(
      (k) => k.label === keyword.label
    )
    if (!duplicatedKeyword) {
      this.keywords = [...this.keywords, keyword]
      this.changedKeywords.emit(this.keywords)
      this.addedKeyword.emit(keyword)
    }
  }

  removeKeyword(keyword: Keyword) {
    this.keywords = this.keywords.filter((k) => k.label !== keyword.label)
    this.changedKeywords.emit(this.keywords)
    this.deletedKeyword.emit(keyword)
  }

  isPlaceWithoutExtent(keyword: Keyword): boolean {
    if (keyword.type !== 'place') return false
    return !keyword.bbox
  }
}
