---
import Serialize from "@ayco/astro-resume";
import Icon from "astro-iconify";
import { featureFlags } 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" hidden>
  <div id="toolbar">
    <h2>Settings</h2>
    <label for={toggle}>
      <Icon name="mdi:close" />
    </label>
  </div>
  {
    enabledSettings.map(
      (settings, index) =>
        settings !== "" && (
          <div class="field">
            <input
              type="checkbox"
              id={`settings-${index}`}
              name={`settings-${index}`}
            />
            <label for={`settings-${index}`}>{settings}</label>
          </div>
        )
    )
  }
  <small>This is where feature flags will be set once made available. <a href="https://github.com/ayoayco/cozy/issues/new" target="_blank">Request features or report bugs here.</a></small>
</form>

<Serialize id="settings-toggle-id" data={{toggle}} />

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


<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;
      margin-bottom: 0.5em;
    }
  }
</style>