import { Component, EventEmitter, Input, Output } from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';
import { ColorsHelper } from '../../helpers/colors.helper';
import { useMemo } from '../../helpers/memo.helper';

/**
 * Represents a tag component with customizable appearance and behavior.
 *
 * Look the link about the component in original framework and the appearance
 *
 * @see {@link https://css.squidit.com.br/components/tag}
 *
 *  <div class=' my-3 tag-box'>
 *    Tag Content
 *  </div>
 *
 * @example
 * <sq-tag>Tag Content</sq-tag>
 */
@Component({
  selector: 'sq-tag',
  templateUrl: './sq-tag.component.html',
  styleUrls: ['./sq-tag.component.scss'],
  standalone: true,
  imports: [NgClass, NgStyle],
})
export class SqTagComponent {
  /**
   * Additional CSS classes for styling the tag.
   */
  @Input() customClass = '';

  /**
   * Flag to round the corners of the tag.
   */
  @Input() rounded = false;

  /**
   * The text color of the tag.
   */
  @Input() color = '';

  /**
   * The background color of the tag.
   */
  @Input() backgroundColor = '';

  /**
   * Flag to make the tag readonly.
   */
  @Input() readonly = false;

  /**
   * Flag to disable the tag.
   */
  @Input() disabled = false;

  /**
   * Flag to disable the tag.
   */
  @Input() pointer = false;

  /**
   * Event emitted when the tag is clicked.
   */
  @Output() emitClick: EventEmitter<void> = new EventEmitter<void>();

  /**
   * Constructor for the SqButtonComponent class.
   * @param colorsHelper - The ColorsHelper service for color manipulation.
   */
  constructor(public colorsHelper: ColorsHelper) {}

  /**
   * Validates whether the specified color is a preset color.
   *
   * @returns {boolean} True if the color is a valid preset color, false otherwise.
   */
  validatePresetColors(): boolean {
    return !!this.colorsHelper?.getCssVariableValue(this.color);
  }

  /**
   * Retrieves the computed text color for the tag.
   *
   * @returns {string} The computed text color.
   */
  getColor = useMemo(() => {
    if (this.validatePresetColors()) {
      return '';
    }
    return this.color;
  });

  /**
   * Retrieves the computed background color for the tag.
   *
   * @returns {string} The computed background color.
   */
  getBackgroundColor = useMemo(() => {
    if (this.validatePresetColors()) {
      return '';
    }
    return this.backgroundColor;
  });

  /**
   * Handles the click event on the tag.
   * Emits the `emitClick` event if the tag is not readonly or disabled.
   */
  handleClick(): void {
    if (this.readonly || this.disabled) {
      return;
    }
    this.emitClick.emit();
  }
}