import {
  ChangeDetectionStrategy,
  Component,
  computed,
  effect,
  inject,
  untracked,
} from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowRight } from '@ng-icons/lucide';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { hlm } from '@spartan-ng/helm/utils';
import { HlmCarousel } from './hlm-carousel';

@Component({
  selector: 'button[hlm-carousel-next], button[hlmCarouselNext]',
  imports: [NgIcon, HlmIcon],
  providers: [
    provideIcons({ lucideArrowRight }),
    provideBrnButtonConfig({ variant: 'outline', size: 'icon' }),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
  host: {
    'data-slot': 'carousel-next',
    '[disabled]': 'isDisabled()',
    '(click)': '_carousel.scrollNext()',
  },
  template: `
    <ng-icon
      name="lucideArrowRight"
      hlm
      size="sm"
    />
    <span class="sr-only">Next slide</span>
  `,
})
export class HlmCarouselNext {
  private readonly _button = inject(HlmButton);
  protected readonly _carousel = inject(HlmCarousel);
  private readonly _computedClass = computed(() =>
    hlm(
      'absolute h-8 w-8 rounded-full',
      this._carousel.orientation() === 'horizontal'
        ? 'top-1/2 -right-12 -translate-y-1/2'
        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
    ),
  );
  protected readonly isDisabled = () => !this._carousel.canScrollNext();

  constructor() {
    effect(() => {
      const computedClass = this._computedClass();

      untracked(() => this._button.setClass(computedClass));
    });
  }
}
