import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, ".", "");
  const appHost = env.APP_HOST || "kif.local.ascorrea.com";

  return {
    plugins: [
      react(),
      VitePWA({
        registerType: "autoUpdate",
        includeAssets: [
          "icon.svg",
          "favicon.png",
          "apple-touch-icon.png",
          "splash-art.png",
          "icon-192.png",
          "icon-512.png",
          "apple-splash-1125x2436.png",
          "apple-splash-1170x2532.png",
          "apple-splash-1290x2796.png",
        ],
        workbox: {
          navigateFallbackDenylist: [/^\/api\//],
          runtimeCaching: [
            {
              urlPattern: ({ url }) => url.pathname.startsWith("/api/media/files/"),
              handler: "CacheFirst",
              options: {
                cacheName: "walkup-media",
                cacheableResponse: {
                  statuses: [200],
                },
                expiration: {
                  maxEntries: 200,
                  maxAgeSeconds: 60 * 60 * 24 * 30,
                },
              },
            },
          ],
        },
        manifest: {
          id: "/",
          name: "WalkUp",
          short_name: "WalkUp",
          description: "Collaborative baseball walk-up songs.",
          theme_color: "#132238",
          background_color: "#f4ede2",
          display: "standalone",
          display_override: ["standalone", "minimal-ui"],
          scope: "/",
          start_url: "/",
          icons: [
            {
              src: "/icon-192.png",
              sizes: "192x192",
              type: "image/png",
              purpose: "any maskable",
            },
            {
              src: "/icon-512.png",
              sizes: "512x512",
              type: "image/png",
              purpose: "any maskable"
            }
          ]
        }
      })
    ],
    server: {
      port: 5173,
      allowedHosts: [appHost],
    },
    preview: {
      allowedHosts: [appHost],
    },
  };
});