import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { NgClass } from '@angular/common';
import { SelectData } from '@/core/models/catalogs.models';
import { CnPipe } from '../../ui/cn.pipe';
import { BaseInput } from '../base-input.directive';
import { ControlErrorDirective } from '../control-error.directive';
import { ControlFeedbackDirective } from '../control-feedback.directive';

@Component({
	selector: 'app-select',
	templateUrl: './select.component.html',
	styleUrls: ['./select.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush,
	standalone: true,
	imports: [NgClass, ControlFeedbackDirective, ControlErrorDirective, CnPipe],
})
export class SelectComponent extends BaseInput<string | number | null> {
	default = input<SelectData | null>(null);
	data = input<any[]>([]);
	simpleData = input<string[]>([]);
	valueKey = input('value');
	labelKey = input('label');
	asNumber = input(true);

	constructor() {
		super();
		this.value.set(null);
	}

	onSelectChange(event: Event) {
		if (this.readonly()) {
			return;
		}

		const target = event.target as HTMLSelectElement;
		if (!target.value) {
			this.value.set(null);
			return;
		}

		if (this.asNumber()) {
			this.value.set(+target.value);
			return;
		}
		this.onInput(event);
	}
}