<!--
  @component Support option select card

  Properties:
  - `config Object`: Config includes latest option states
-->

<script>
  import { Row, Col, Card, CardTitle, CardBody, Button} from "@sveltestrap/sveltestrap";
  import { fade } from "svelte/transition";

  /* Svelte 5 Props */
  let {
    config
  } = $props();

  /* State Init */
  let message = $state("");
  let displayMessage = $state(false);

  /* Functions */
  async function handleSettingSubmit(event, selector, target) {
    event.preventDefault()

    let form = document.querySelector(selector);
    let formData = new FormData(form);
    try {
      const res = await fetch(form.action, { method: "POST", body: formData });
      if (res.ok) {
        let text = await res.text();
        popMessage(text, target, "#048109");
      } else {
        let text = await res.text();
        throw new Error("Response Code " + res.status + "-> " + text);
      }
    } catch (err) {
      popMessage(err, target, "#d63384");
    }

    return false;
  }

  function popMessage(response, restarget, rescolor) {
    message = { msg: response, target: restarget, color: rescolor };
    displayMessage = true;
    setTimeout(function () {
      displayMessage = false;
    }, 3500);
  }
</script>

<Row cols={1} class="p-2 g-2">
  <Col>
    <Card class="h-100">
      <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
      <CardTitle class="m-3 d-flex align-items-center">
        <div>Node List Paging Type</div>
        {#if displayMessage && message.target == "npag"}<div
            style="margin-left: auto; font-size: 0.9em;"
          >
            <code style="color: {message.color};" out:fade
              >Update: {message.msg}</code
            >
          </div>{/if}
      </CardTitle>
      <CardBody>
        <form
          id="node-paging-form"
          method="post"
          action="/frontend/configuration/"
          onsubmit={(e) => handleSettingSubmit(e, "#node-paging-form", "npag")}>
          <input type="hidden" name="key" value="nodeList_usePaging" />
          <div class="mb-3">
            <div>
              {#if config?.nodeList_usePaging}
                <input type="radio" id="nodes-true-checked" name="value" value="true" checked />
              {:else}
                <input type="radio" id="nodes-true" name="value" value="true" />
              {/if}
              <label for="nodes-true">Paging with selectable count of nodes.</label>
            </div>
            <div>
              {#if config?.nodeList_usePaging}
                <input type="radio" id="nodes-false" name="value" value="false" />
              {:else}
                <input type="radio" id="nodes-false-checked" name="value" value="false" checked />
              {/if}
              <label for="nodes-false">Continuous scroll iteratively adding 10 nodes.</label>
            </div>
          </div>
          <Button color="primary" type="submit">Submit</Button>
        </form>
      </CardBody>
    </Card>
  </Col>
</Row>