import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { map } from 'lit/directives/map.js';

import '@components/AppIcon';

@customElement('arx-app-grid')
export class AppGrid extends LitElement {
  @property()
  apps: {
    icon: string | undefined;
    color: string;
    href: string;
    name: string;
  }[] = [];

  override connectedCallback() {
    super.connectedCallback();
    this.style.setProperty('--icons-count', this.apps.length.toString());
  }

  static override styles = [
    css`
      :host {
        display: grid;
        grid-template-columns: 80px;
        justify-content: space-around;
        gap: 28px;
        padding: 42px 30px;
        margin-top: 10px;
        --stagger-delay: calc(var(--animation-duration) * 2 / var(--icons-count));
        
        @media (min-width: 500px) {
          grid-template-columns: repeat(2, 80px);
          grid-auto-rows: minmax(120px, auto);
        }

        @media (min-width: 768px) {
          grid-template-columns: repeat(3, 80px);
          gap: 32px 42px;
        }

        @media (min-width: 1024px) {
          grid-template-columns: repeat(4, 80px);
          grid-auto-flow: dense;
        }
      }

      arx-app-icon {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
        animation: float-in var(--transition) forwards;
      }

      @keyframes float-in {
        0% { 
          opacity: 0;
          transform: translateY(20px) scale(0.8);
        }
        100% { 
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
    `,
  ];

  override render() {
    return html`
      ${map(
        this.apps,
        (app, index) => html`
          <arx-app-icon
            .icon=${app.icon}
            .color=${app.color}
            .href=${app.href}
            .name=${app.name}
            style="animation-delay: calc(var(--stagger-delay) * ${index});"
          ></arx-app-icon>
        `,
      )}
    `;
  }
}
