import { ComponentType } from '@angular/cdk/overlay';
import { Component, Inject, input, OnInit } from '@angular/core';
import { NxPlainButtonSize } from '@aposin/ng-aquila/button';
import { NxDialogService } from '@aposin/ng-aquila/modal';
import { DfInfoIconComponentConfig } from '../../base/info-icon.model';
import { Df_INFO_ICON_DEFAULT_OPTIONS, DfInfoIconOptions } from './info-icon.model';

@Component({
  selector: 'df-info-icon',
  templateUrl: './info-icon.component.html',
  styleUrls: ['./info-icon.component.scss'],
  host: {
    class: 'df-info-icon'
  },
  standalone: false
})
export class DfInfoIconComponent implements OnInit {
  private _modalComponent?: ComponentType<unknown>;

  public show = true;
  public iconName: string;
  public iconHoverName: string;
  public size!: NxPlainButtonSize;

  modalComponent = input<ComponentType<unknown>>();

  /** Info icon modal config **/
  modalConfig = input.required<unknown>();
  config = input<DfInfoIconComponentConfig>();

  constructor(
    readonly dialogService: NxDialogService,
    @Inject(Df_INFO_ICON_DEFAULT_OPTIONS) readonly defaultOptions: DfInfoIconOptions
  ) {
    this.iconName = this.defaultOptions.icon;
    this.iconHoverName = this.defaultOptions.hoverIcon;
  }

  ngOnInit() {
    this.size = this.config()?.size ?? this.defaultOptions?.size;
    this._modalComponent = this.modalComponent() ?? this.defaultOptions.modalComponent;
  }

  public openDialog() {
    if (!this._modalComponent) {
      return;
    }
    this.dialogService.open(this._modalComponent, {
      width: 'auto',
      showCloseIcon: true,
      data: this.modalConfig
    });
  }
}