import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef, Optional, ElementRef } from '@angular/core';
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { Option } from '../../interfaces/option.interface';
import { SqTooltipComponent } from '../sq-tooltip/sq-tooltip.component';
import { UniversalSafePipe } from '../../pipes/universal-safe/universal-safe.pipe';
import { SqDataTestDirective } from '../../directives/sq-data-test/sq-data-test.directive';

/**
 * Represents a select input component for choosing options from a dropdown.
 *
 * Look the link about the component in original framework and the appearance
 *
 * @see {@link https://css.squidit.com.br/forms/select}
 *
 * <br>
 * <label for='select-name'>
 * Label select
 * </label>
 * <select
 *   class='select mb-3'
 *   [name]="'select-name'"
 * >
 *  <option value='' disabled>Select an option</option>
 *  <option value="1">Option 1</option>
 *  <option value="2">Option 2</option>
 * </select>
 *
 * @example
 * <sq-select
 *   [name]="'select-name'"
 *   [label]="'Select an option'"
 *   [options]="selectOptions"
 *   [(value)]='value'
 *   (valueChange)="handleValueChange($event)"
 * >
 * </sq-select>
 */
@Component({
  selector: 'sq-select',
  templateUrl: './sq-select.component.html',
  styleUrls: ['./sq-select.component.scss'],
  standalone: true,
  imports: [
    NgClass,
    NgStyle,
    NgTemplateOutlet,
    FormsModule,
    SqTooltipComponent,
    UniversalSafePipe,
    SqDataTestDirective,
  ],
})
export class SqSelectComponent {
  /**
   * The name attribute for the select input.
   *
   * @default 'random-name-[hash-random-code]'
   */
  @Input() name = `random-name-${(1 + Date.now() + Math.random()).toString().replace('.', '')}`;

  /**
   * The selected value of the select input.
   */
  @Input() value?: any;

  /**
   * The id attribute for the select input.
   */
  @Input() id?: string;

  /**
   * The label for the select input.
   */
  @Input() label = '';

  /**
   * Custom CSS class for the select input.
   */
  @Input() customClass = '';

  /**
   * Placeholder text for the select input.
   */
  @Input() placeholder = '';

  /**
   * External error message for the select input.
   */
  @Input() externalError = '';

  /**
   * External icon for the select input.
   */
  @Input() externalIcon = '';

  /**
   * An array of options for populating the select input.
   */
  @Input() options: Option[] = [];

  /**
   * Options with groups for populating the select input.
   */
  @Input() optionsWithGroups: Array<{
    label: string;
    options: Option[];
  }> = [];

  /**
   * Indicates whether to display an error span.
   */
  @Input() errorSpan = true;

  /**
   * Indicates whether the select input is disabled.
   */
  @Input() disabled = false;

  /**
   * Indicates whether the select input is readonly.
   */
  @Input() readonly = false;

  /**
   * Indicates whether the select input is required.
   */
  @Input() required = false;

  /**
   * Indicates whether the select input is in a loading state.
   */
  @Input() loading = false;

  /**
   * Indicates whether to use form errors for validation.
   */
  @Input() useFormErrors = true;

  /**
   * Tooltip message for the select input.
   */
  @Input() tooltipMessage = '';

  /**
   * Tooltip placement for the select input.
   */
  @Input() tooltipPlacement: 'center top' | 'center bottom' | 'left center' | 'right center' = 'right center';

  /**
   * Tooltip color for the select input.
   */
  @Input() tooltipColor = 'inherit';

  /**
   * Tooltip icon for the select input.
   */
  @Input() tooltipIcon = '';

  /**
   * Background color for the select input.
   */
  @Input() backgroundColor = '';

  /**
   * Border color for the select input.
   */
  @Input() borderColor = '';

  /**
   * Label color for the select input.
   */
  @Input() labelColor = '';

  /**
   * Event emitted when the select input gains or loses focus.
   */
  @Output() inFocus: EventEmitter<boolean> = new EventEmitter();

  /**
   * Event emitted when the select input becomes valid or invalid.
   */
  @Output() valid: EventEmitter<boolean> = new EventEmitter();

  /**
   * Event emitted when the value of the select input changes.
   */
  @Output() valueChange: EventEmitter<any> = new EventEmitter();

  /**
   * Event emitter for focus input changes.
   */
  @Output() emitFocus: EventEmitter<Event> = new EventEmitter<Event>();

  /**
   * Reference to a left-aligned label template.
   */
  @ContentChild('leftLabel')
  leftLabel: TemplateRef<HTMLElement> | null = null;

  /**
   * Reference to a right-aligned label template.
   */
  @ContentChild('rightLabel')
  rightLabel: TemplateRef<HTMLElement> | null = null;

  /**
   * Reference to a right-aligned label template.
   */
  @ContentChild('labelTemplate')
  labelTemplate: TemplateRef<HTMLElement> | null = null;

  /**
   * The error state of the select input.
   */
  error: boolean | string = false;

  /**
   * ElementRef for the native select input element.
   */
  nativeElement: ElementRef;

  /**
   * Constructs a new SqSelectComponent.
   *
   * @param {ElementRef} element - The ElementRef for the component.
   * @param {TranslateService} translate - The optional TranslateService for internationalization.
   */
  constructor(
    public element: ElementRef,
    @Optional() private translate: TranslateService
  ) {
    this.nativeElement = element.nativeElement;
  }

  /**
   * Validates the select input and sets the error state.
   *
   * @param {boolean} isBlur - Indicates whether the input is blurred.
   */
  validate(isBlur = false) {
    if (this.externalError) {
      this.error = false;
    } else if (this.required && !this.value) {
      this.valid.emit(false);
      this.setError('forms.required');
    } else {
      this.valid.emit(true);
      this.error = '';
    }

    if (isBlur) {
      this.inFocus.emit(false);
    }
  }

  /**
   * Sets an error message.
   *
   * @param {string} key - The translation key for the error message.
   */
  async setError(key: string) {
    if (this.useFormErrors && this.translate) {
      this.error = await this.translate.instant(key);
    }
  }

  /**
   * Handles the change event of the select input.
   *
   * @param {any} value - The selected value.
   */
  change(value: any): void {
    this.inFocus.emit(true);
    this.value = value;
    this.valueChange.emit(value);
    this.validate();
  }
}