import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TranslocoDirective } from '@jsverse/transloco';
import { NgIcon, provideIcons } from '@ng-icons/core';
import {
  lucideChevronLeft,
  lucideChevronRight,
  lucideChevronsLeft,
  lucideChevronsRight,
} from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { HlmSelectImports } from '@spartan-ng/helm/select';
import { hlmMuted } from '@spartan-ng/helm/typography';
import type { Table } from '@tanstack/angular-table';

@Component({
  selector: 'au-table-pagination',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    FormsModule,
    NgIcon,
    TranslocoDirective,
    HlmButtonImports,
    HlmIconImports,
    HlmLabelImports,
    HlmSelectImports,
  ],
  providers: [
    provideIcons({
      lucideChevronLeft,
      lucideChevronRight,
      lucideChevronsLeft,
      lucideChevronsRight,
    }),
  ],
  host: { class: 'block' },
  template: `
    <div
      *transloco="let t"
      class="mt-1 flex items-center justify-between"
    >
      <span class="${hlmMuted} hidden sm:inline">
        {{ table().getSelectedRowModel().rows.length }} {{ t('Of') }} {{ table().getRowCount() }}
        {{ t('RowsSelected') }}
      </span>
      <div class="flex w-full items-center gap-2 sm:w-auto sm:gap-8">
        <div class="flex items-center gap-2">
          <span
            class="hidden sm:inline"
            hlmLabel
          >
            {{ t('RowsPerPage') }}
          </span>
          <hlm-select
            class="inline-block"
            [ngModel]="table().getState().pagination.pageSize"
            (ngModelChange)="table().setPageSize($event); table().resetPageIndex()"
          >
            <hlm-select-trigger
              class="mr-1 inline-flex h-8 w-fit"
              size="sm"
            >
              <hlm-select-value placeholder="{{ pageSizes()[0] }}" />
            </hlm-select-trigger>
            <hlm-select-content *hlmSelectPortal>
              <hlm-select-group>
                @for (size of pageSizes(); track size) {
                  <hlm-select-item [value]="size">
                    {{ size === 10000 ? 'All' : size }}
                  </hlm-select-item>
                }
              </hlm-select-group>
            </hlm-select-content>
          </hlm-select>
        </div>

        <span hlmLabel>
          {{ t('Page') }} {{ table().getState().pagination.pageIndex + 1 }} {{ t('Of') }}
          {{ table().getPageCount() }}
        </span>

        <div class="ml-auto flex space-x-1 sm:ml-0">
          <button
            class="hidden sm:inline-flex"
            [disabled]="!table().getCanPreviousPage()"
            hlmBtn
            variant="outline"
            size="icon-sm"
            (click)="table().firstPage()"
          >
            <ng-icon
              name="lucideChevronsLeft"
              hlm
              size="sm"
            />
          </button>
          <button
            [disabled]="!table().getCanPreviousPage()"
            hlmBtn
            variant="outline"
            size="icon-sm"
            (click)="table().previousPage()"
          >
            <ng-icon
              name="lucideChevronLeft"
              hlm
              size="sm"
            />
          </button>
          <button
            [disabled]="!table().getCanNextPage()"
            hlmBtn
            variant="outline"
            size="icon-sm"
            (click)="table().nextPage()"
          >
            <ng-icon
              name="lucideChevronRight"
              hlm
              size="sm"
            />
          </button>
          <button
            class="hidden sm:inline-flex"
            [disabled]="!table().getCanNextPage()"
            hlmBtn
            variant="outline"
            size="icon-sm"
            (click)="table().lastPage()"
          >
            <ng-icon
              name="lucideChevronsRight"
              hlm
              size="sm"
            />
          </button>
        </div>
      </div>
    </div>
  `,
})
export class TablePagination<T> {
  readonly table = input.required<Table<T>>();
  readonly pageSizes = input<number[]>([5, 10, 20, 10000]);
}
