---
import { STATIC_PATHS } from "@i18n/utils";
import Layout from "src/layouts/Layout.astro";
import marketplace from "../../json/marketplace.json";
import MarketplaceIcon from "@components/UI/MarketplaceIcon.astro";

export const prerender = true;

export const getStaticPaths = () => {
  return STATIC_PATHS;
};
---

<Layout title="Marketplace | Alu">
  <div id="main-content">
    <h1 class="title-text">Marketplace</h1>
    <p class="title-desc">(WIP) Install custom extensions for Alu!</p>
    <div id="support-warning"></div>
    <div class="marketplace-ext-grid">
      {
        Object.keys(marketplace).map((mp_item) => {
          const item = (marketplace as ExtensionMetadataJSON)[mp_item];
          const slug = mp_item;
          return (
            <div class="marketplace-item" data-slug={slug}>
              <MarketplaceIcon type={item.type} />
              <div class="marketplace-bg-image" style={`background-image: url(${item.image})`} />
              <div class="marketplace-details">
                <div class="marketplace-item-title">
                  {item.title} v{item.version}
                </div>
                <div class="marketplace-item-desc">{item.description}</div>
              </div>
              <div class="marketplace-btn-container">
                <button class="marketplace-btn btn-install" data-slug={slug} data-title={item.title}>
                  Install
                </button>
                <button class="marketplace-btn btn-hidden" data-uninstall-slug={slug}>
                  Uninstall
                </button>
              </div>
            </div>
          );
        })
      }
    </div>
  </div>
  <script src="@components/ts/marketplace.ts"></script>
</Layout>

<style>
  .title-desc {
    font-size: 1.2rem;
  }
  .marketplace-ext-grid {
    display: grid;
    width: 90%;
    margin: 0 auto;
    color: var(--text-color);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 1.2rem;
  }

  .marketplace-item {
    border: 3px solid var(--accent-color-brighter);
    padding: 1rem;
    padding-left: 0.75rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--accent-color);
  }

  .marketplace-bg-image {
    height: 10.5rem;
    background-size: cover;
    background-position: center;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    aspect-ratio: 16 / 9;
    background-color: var(--accent-color);
  }

  .marketplace-item-title {
    margin-bottom: 10px;
  }

  .marketplace-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-bottom: 1rem;
  }
  .marketplace-item-desc {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 40px;
  }

  .marketplace-btn-container {
    display: flex;
    gap: 1rem;
    width: 95%;
    margin: 0 auto;
  }
  .marketplace-btn {
    width: 100%;
    background-color: var(--accent-color-brighter);
    color: var(--text-color);
    border: none;
    padding: 0.85rem;
    border-radius: 5px;
    transition: 0.25s ease-in-out;
    pointer-events: all;
    cursor: pointer;
    z-index: 99;
    font-family: "Varela Round", sans-serif !important;
  }
  .marketplace-btn.installed {
    filter: brightness(0.8);
  }
  #support-warning {
    padding-top: 10px;
    padding-bottom: 50px;
    height: 20px;
    color: #ff6923;
    text-align: center;
  }
  .btn-hidden {
    opacity: 0;
    pointer-events: none;
  }
</style>
