import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCalendar, lucideX } from '@ng-icons/lucide';
import {
	BrnDateInput,
	type BrnDatePickerTriggerBase,
	provideBrnDatePickerTrigger,
} from '@spartan-ng/brain/date-picker';
import { BrnFieldControl } from '@spartan-ng/brain/field';
import { HlmInputGroup, HlmInputGroupImports } from '@spartan-ng/styles/input-group';
import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';

@Component({
	selector: 'hlm-date-multi-input',
	imports: [HlmInputGroupImports, NgIcon],
	providers: [
		provideIcons({ lucideCalendar, lucideX }),
		provideBrnDatePickerTrigger(HlmDateMultiInput),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	hostDirectives: [HlmInputGroup],
	template: `
		<input
			#input
			hlmInputGroupInput
			[value]="_inputValue()"
			[id]="inputId()"
			[placeholder]="placeholder()"
			[disabled]="_disabled()"
			[forceInvalid]="forceInvalid()"
			[attr.aria-invalid]="_ariaInvalid()"
			[attr.data-invalid]="_ariaInvalid()"
			[attr.data-touched]="_touched?.() ? 'true' : null"
			[attr.data-dirty]="_dirty?.() ? 'true' : null"
			[attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
			(click)="_handleClick()"
			(keydown.arrowDown)="_open()"
			(keydown.enter)="_handleEnter($event)"
			(input)="_handleInputChange($event)"
			(focus)="_handleFocus()"
			(blur)="_handleBlur()"
		/>
		<hlm-input-group-addon align="inline-end">
			@if (_showClearButton()) {
				<button
					hlmInputGroupButton
					size="icon-xs"
					variant="ghost"
					[attr.aria-label]="clearAriaLabel()"
					(click)="_clear()"
					[disabled]="_disabled()"
				>
					<ng-icon name="lucideX" />
				</button>
			}
			<button
				hlmInputGroupButton
				size="icon-xs"
				[attr.aria-label]="calendarAriaLabel()"
				(click)="_popover().open()"
				[disabled]="_disabled()"
			>
				<ng-icon name="lucideCalendar" />
			</button>
		</hlm-input-group-addon>
	`,
})
export class HlmDateMultiInput<T> extends BrnDateInput<T[]> implements BrnDatePickerTriggerBase {
	private readonly _config = injectHlmDatePickerMultiConfig<T>();
	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });

	private readonly _invalid = this._fieldControl?.invalid;
	protected readonly _spartanInvalid = computed(
		() => this.forceInvalid() || this._fieldControl?.spartanInvalid(),
	);
	protected readonly _dirty = this._fieldControl?.dirty;
	protected readonly _touched = this._fieldControl?.touched;

	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
	/**
	 * Parses input text into dates. Return `null` for invalid input - the
	 * picker's dates are cleared while the text is preserved so the user can
	 * fix it.
	 *
	 * Defaults to `parseDate` from `HlmDatePickerMultiConfig`.
	 */
	public readonly parseDate = input<(value: string) => T[] | null>(this._config.parseDate);

	/**
	 * Formats the current dates into the input/edit format shown while the
	 * input is focused. On blur the picker's display format is restored.
	 *
	 * Defaults to `formatInputDates` from `HlmDatePickerMultiConfig`.
	 */
	public readonly formatInputDates = input<(dates: T[]) => string>(this._config.formatInputDates);

	protected override parseValue(value: string): T[] | null {
		return this.parseDate()(value);
	}

	protected override formatInputValue(value: T[]): string {
		return this.formatInputDates()(value);
	}
}