import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Required } from '../../decorators/required.decorator';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.scss'],
})
export class SelectComponent {
  @Input() @Required() options!: string[];
  @Input() value = '';
  @Input() placeholder = '';
  @Input() label = '';
  @Input() identifier = '';
  @Input() isDisabled = false;
  @Input() showQuestionIcon = false;

  @Output() valueChange = new EventEmitter<string>();
  @Output() onQuestionClick = new EventEmitter();

  isOpen = false;

  handleChange(value: string) {
    this.valueChange.emit(value);
    this.isOpen = false;
  }

  handleQuestionClick() {
    if (this.isDisabled) return;

    this.onQuestionClick.emit();
  }

  toggleOpen() {
    this.isOpen = !this.isOpen;
  }
}
