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

@Component({
	selector: 'app-input',
	templateUrl: './input.component.html',
	styleUrls: ['./input.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush,
	standalone: true,
	imports: [ControlFeedbackDirective, ControlErrorDirective, CnPipe],
})
export class InputComponent extends BaseInput {
	showLabel = input(false, { transform: transformToBoolean });
	type = input('text');
	onlyNumbers = input(false, { transform: transformToBoolean });
	dateMin = input('');
	dateMax = input('');

	override onInput(event: Event) {
		const target = event.target as HTMLInputElement;
		if (this.onlyNumbers()) {
			const inputValue = target.value;
			if (!/^[\d+]+$/.test(inputValue)) {
				target.value = inputValue.slice(0, -1);
			}
		}
		if (this.type() === 'date') {
			const value = target.value;

			if (this.dateMin() && value && value < this.dateMin()) {
				target.value = '';
				this.value.set('' as string);
				return;
			}

			if (this.dateMax() && value && value > this.dateMax()) {
				target.value = '';
				this.value.set('' as string);
				return;
			}
		}
		super.onInput(event);
	}
}