import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import {
  RemissionListType,
  RemissionSearchService,
} from '@isa/remission/data-access';
import {
  DropdownAppearance,
  DropdownButtonComponent,
  DropdownOptionComponent,
} from '@isa/ui/input-controls';
import { remissionListTypeRouteMapping } from './remission-list-type-route.mapping';
import { injectRemissionListType } from '../injects/inject-remission-list-type';

@Component({
  selector: 'remi-feature-remission-list-select',
  templateUrl: './remission-list-select.component.html',
  styleUrl: './remission-list-select.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [DropdownButtonComponent, DropdownOptionComponent],
})
export class RemissionListSelectComponent {
  DropdownAppearance = DropdownAppearance;
  RemissionListCategory = RemissionListType;
  remissionSearchService = inject(RemissionSearchService);
  router = inject(Router);
  route = inject(ActivatedRoute);

  remissionListTypes = this.remissionSearchService.remissionListType();
  selectedRemissionListType = injectRemissionListType();

  async changeRemissionType(remissionTypeValue: RemissionListType | undefined) {
    if (!remissionTypeValue) return;

    await this.router.navigate(
      [remissionListTypeRouteMapping[remissionTypeValue]],
      {
        relativeTo: this.route,
      },
    );
  }

  selectedRemissionListTypeLabel = computed(() => {
    const type = this.selectedRemissionListType();

    if (type === RemissionListType.Pflicht) {
      return 'Pflicht';
    }

    if (type === RemissionListType.Abteilung) {
      return 'Abteilung';
    }

    return;
  });
}
