import { FeatureFlag } from "@infinity-beyond/modules/features/feature_flag.ts";
import type { Handlers } from "$fresh/server.ts";
import FeatureFlagsForm from "@islands/admin/feature_flags_form.tsx";
import SinglePanelLayout from "@infinity-beyond/ui/components/ui/layout/SinglePanelLayout.tsx";

export const handler: Handlers<null, InfinityContext> = {
  GET(_req, ctx) {
    return ctx.render();
  }
}

export default function FeatureFlags() {
  const flags = FeatureFlag.entries().sort((a, b) => a.key > b.key ? 1 : a.key < b.key ? -1 : 0);

  return (
    <SinglePanelLayout>
      <div class="px-4 py-8 mx-auto bg-accent text-accent-content">
        <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
          <h1 class="text-4xl font-bold">Feature Flags</h1>
          <p class="my-4">
            The switches and dials of the {Deno.env.get('INFINITY_APP') || 'Infinity'} world
          </p>
        </div>
      </div>

      <FeatureFlagsForm flags={flags} />

      <hr class="border-accent border-t-2" />

      <div class="mt-8 mb-16 text-center">
        Feature Flags are platform-wide toggles that can be used to enable or disable certain functions or features.
      </div>

      <p class='text-center py-4'>
        To add a new feature flag, simply start using it in code. It will show up here automatically!
      </p>

      <div class="mockup-code w-fit mx-auto overflow-x-auto overflow-hidden max-w-11/12">
        <pre data-prefix="41"></pre>
        <pre data-prefix="42">
          <code>
            <span class="text-[#00AAFF]">{"{ "}</span>
            <span class="text-[#03af8f]">FeatureFlag</span>.<span class="text-accent">get</span>
              <span class="text-[#FFFF00]">(</span>
                <span class="text-[#d7a747]">'MY_FLAG'</span>
                <span class="hidden md:inline">
                  , 
                  <span class="text-[#d7a747]">'An example feature flag'</span>
                </span>
              <span class="text-[#FFFF00]">)</span> &&{" "}
              <span class="text-gray-500">&lt;</span>
                <span class="text-blue-400">div</span>
              <span class="text-gray-500">&gt;</span>
              Hello, Feature!
              <span class="text-gray-500">&lt;/</span>
                <span class="text-blue-400">div</span>
              <span class="text-gray-500">&gt;</span>
            <span class="text-[#00AAFF]">{" }"}</span>
          </code>
        </pre>
        <pre data-prefix="43"></pre>
      </div>

      { FeatureFlag.get('MY_FLAG', "An example feature flag. Only used on this page. Try it out!") && <div class="card bg-base-300 rounded-box grid h-20 place-items-center w-2xl max-w-10/12 mx-auto mt-6">Hello, Feature!</div> }

      <p class="italic text-center py-4">By default, all new feature flags will be <span class="text-accent bg-accent-content font-mono px-1 py-1 not-italic">false</span>.</p>
    </SinglePanelLayout>
  );
}