import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  input,
  ViewEncapsulation,
} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import {
  NO_RESULTS,
  NO_ARTICLES,
  ALL_DONE_CUP,
  ALL_DONE_FUME,
  SELECT_ACTION_HAND,
  SELECT_ACTION_OBJECT_DROPDOWN,
} from './constants';
import { EmptyStateAppearance } from './types';

@Component({
  selector: 'ui-empty-state',
  templateUrl: './empty-state.component.html',
  styleUrls: ['./empty-state.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    '[class]': '["ui-empty-state"]',
  },
})
export class EmptyStateComponent {
  #sanitizer = inject(DomSanitizer);

  title = input.required<string>();
  description = input.required<string>();

  appearance = input<EmptyStateAppearance>(EmptyStateAppearance.NoResults);

  icon = computed(() => {
    const appearance = this.appearance();
    switch (appearance) {
      case EmptyStateAppearance.NoArticles:
        return NO_ARTICLES;
      case EmptyStateAppearance.AllDone:
        return ALL_DONE_CUP;
      case EmptyStateAppearance.SelectAction:
        return SELECT_ACTION_OBJECT_DROPDOWN;
      case EmptyStateAppearance.NoResults:
      default:
        return NO_RESULTS;
    }
  });

  subIcon = computed(() => {
    const appearance = this.appearance();
    switch (appearance) {
      case EmptyStateAppearance.AllDone:
        return ALL_DONE_FUME;
      case EmptyStateAppearance.SelectAction:
        return SELECT_ACTION_HAND;
      default:
        return '';
    }
  });

  sanitizedIcon = computed(() => {
    return this.#sanitizer.bypassSecurityTrustHtml(this.icon());
  });

  sanitizedSubIcon = computed(() => {
    return this.subIcon().length > 0
      ? this.#sanitizer.bypassSecurityTrustHtml(this.subIcon())
      : undefined;
  });
}
