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

import "@components/EveLink";

@customElement("arx-app-icon")
export class AppIcon extends LitElement {
  @property()
  icon: string | undefined;

  @property()
  color = "#ff9900";

  @property()
  href = "#";

  @property()
  name = "App";

  static override styles = [
    css`
      .app-name {
        font-size: 12px;
        color: #000;
        text-shadow: 0px 0px 5px #ffffff;
        text-align: center;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: all 0.2s ease-in-out;
      }

      .app-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        color: #fff;
        text-align: center;

        &:hover {
          .icon {
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            border: 2px solid #000;
            border-radius: 10px;
          }

          .app-name {
            color: white;
            text-shadow: 0px 0px 5px black;
          }
        }
      }

      .icon {
        width: clamp(48px, 8vw, 64px);
        height: clamp(48px, 8vw, 64px);
        border-radius: 15px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #aaa;
        transition: all 0.2s ease-in-out;

        .app-icon {
          width: 75%;
          height: 75%;
        }
      }

      @media (max-width: 480px) {
        .app-name {
          font-size: 11px;
        }
      }
    `,
  ];

  override render() {
    return html`
      <arx-eve-link href="${this.href}" class="app-icon">
        <div class="icon" style="background-color: ${this.color}">
          ${this.icon
            ? html`<iconify-icon
                icon="${this.icon}"
                class="app-icon"
                width="48"
                height="48"
                color="white"
              ></iconify-icon>`
            : ""}
        </div>
        <span class="app-name">${this.name}</span>
      </arx-eve-link>
    `;
  }
}