import type { BooleanInput } from '@angular/cdk/coercion';
import {
	booleanAttribute,
	ChangeDetectionStrategy,
	Component,
	computed,
	input,
} from '@angular/core';
import type { RouterLink } from '@angular/router';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideChevronRight } from '@ng-icons/lucide';
import type { ButtonVariants } from '@spartan-ng/styles/button';
import { hlm } from '@spartan-ng/styles/utils';
import type { ClassValue } from 'clsx';
import { HlmPaginationLink } from './hlm-pagination-link';

@Component({
	selector: 'hlm-pagination-next',
	imports: [HlmPaginationLink, NgIcon],
	providers: [provideIcons({ lucideChevronRight })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<a
			hlmPaginationLink
			[class]="_computedClass()"
			[link]="link()"
			[queryParams]="queryParams()"
			[queryParamsHandling]="queryParamsHandling()"
			[size]="_size()"
			[attr.aria-label]="ariaLabel()"
		>
			<span [class]="_labelClass()">{{ text() }}</span>
			<ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
		</a>
	`,
})
export class HlmPaginationNext {
	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	/** The link to navigate to the next page. */
	public readonly link = input<RouterLink['routerLink']>();
	/** The query parameters to pass to the next page. */
	public readonly queryParams = input<RouterLink['queryParams']>();
	/** How to handle query parameters when navigating to the next page. */
	public readonly queryParamsHandling = input<RouterLink['queryParamsHandling']>();

	/** The aria-label for the next page link. */
	public readonly ariaLabel = input<string>('Go to next page', { alias: 'aria-label' });
	/** The text to display for the next page link. */
	public readonly text = input<string>('Next');
	/** Whether the button should only display the icon. */
	public readonly iconOnly = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});
	protected readonly _labelClass = computed(() =>
		this.iconOnly() ? 'sr-only' : 'hidden sm:block',
	);

	protected readonly _size = computed<ButtonVariants['size']>(() =>
		this.iconOnly() ? 'icon' : 'default',
	);

	protected readonly _computedClass = computed(() =>
		hlm(!this.iconOnly() && 'pe-1.5!', this.userClass()),
	);
}