import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { RouterLink } from '@angular/router'
import { i18nPipe, TrustUrlPipe } from '@start9labs/shared'
import { TuiTitle, TuiCell } from '@taiga-ui/core'
import { TuiAvatar } from '@taiga-ui/kit'
import { MarketplacePkg } from '../../types'

@Component({
  selector: 'marketplace-flavors',
  template: `
    <div class="background-border box-shadow-lg shadow-color-light">
      <div class="box-container">
        <h2 class="additional-detail-title">
          {{ 'Alternative Implementations' | i18n }}
        </h2>
        @for (pkg of pkgs; track $index) {
          <a
            tuiCell
            [routerLink]="[]"
            [queryParams]="{ id: pkg.id, flavor: pkg.flavor }"
            queryParamsHandling="merge"
          >
            <span tuiAvatar appearance="action-grayscale" [round]="false">
              <img alt="" [src]="pkg.icon | trustUrl" />
            </span>
            <span tuiTitle>
              {{ pkg.title }}
              <span tuiSubtitle>{{ pkg.version }}</span>
            </span>
          </a>
        }
      </div>
    </div>
  `,
  styles: `
    .box-container {
      background-color: rgb(39 39 42);
      border-radius: 0.75rem;
      padding: 1.25rem 1.75rem;
    }

    [tuiCell] {
      border-radius: 0.5rem;
      margin: 0 -1rem;
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [RouterLink, TuiCell, TuiTitle, TrustUrlPipe, TuiAvatar, i18nPipe],
})
export class MarketplaceFlavorsComponent {
  @Input()
  pkgs!: MarketplacePkg[]
}
