---
import Icon from "astro-iconify";
import { featureFlags, featureLabels } from "../utils/feature-flags";
export interface Props {
  toggle: string;
}

const enabledSettings = Object.keys(featureFlags).filter(
  (key) => featureFlags[key]
);

const { toggle } = Astro.props;
---

<form id="settings-form">
  <div id="toolbar">
    <h2>Settings</h2>
    <label for={toggle}>
      <Icon name="mdi:close" />
    </label>
  </div>
  {
    enabledSettings.map(
      (settings) =>
        settings !== "" && (
          <div class="field">
            <input type="checkbox" id="settings-2" name="settings-2" />
            <label for="settings-2">{featureLabels[settings]}</label>
          </div>
        )
    )
  }
  <small>This is where feature flags will be set once made available.</small>
</form>

<style lang="scss">
  #settings-form {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    padding: 0.5em;
    width: 300px;
    position: absolute;
    top: 0.5em;
    right: 0.1em;
    box-shadow: 0 1px 3px 1px #eee;

    #toolbar {
      display: flex;
      margin-bottom: 0.5em;

      h2,
      svg {
        flex: 1;
      }

      svg {
        width: 24px;
        height: 24px;
        cursor: pointer;
      }
    }
    .field {
      margin-left: 0.5em;
    }
  }
</style>

<script>
  /**
   * temporary JS solution, should be replaced with CSS
   */
  document
    .getElementById("settings-toggle")
    ?.addEventListener("change", (e) => {
      if (e.currentTarget?.["checked"])
        document.getElementById("settings-form")?.removeAttribute("hidden");
      else document.getElementById("settings-form")?.setAttribute("hidden", "");
    });
</script>