<!--
  @component Plot render option selection for users

  Properties:
  - `config Object`: Current cc-config
  - `message Object`: Message to display on success or error [Bindable]
  - `displayMessage Bool`: If to display message content [Bindable]
  - `updateSetting Func`: The callback function to apply current option selection
-->

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

  /* Svelte 5 Props */
  let {
    config,
    message = $bindable(),
    displayMessage = $bindable(),
    updateSetting
  } = $props();

  const resampleConfig = getContext("resampling");
</script>

<Row cols={3} class="p-2 g-2">
  <!-- LINE WIDTH -->
  <Col>
    <Card class="h-100">
      <form
        id="line-width-form"
        method="post"
        action="/frontend/configuration/"
        class="card-body"
        onsubmit={(e) => updateSetting(e, {
          selector: "#line-width-form",
          target: "lw",
        })}
      >
        <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
        <CardTitle
          style="margin-bottom: 1em; display: flex; align-items: center;"
        >
          <div>Line Width</div>
          <!-- Expand If-Clause for clarity once -->
          {#if displayMessage && message.target == "lw"}
            <div style="margin-left: auto; font-size: 0.9em;">
              <code style="color: {message.color};" out:fade>
                Update: {message.msg}
              </code>
            </div>
          {/if}
        </CardTitle>
        <input type="hidden" name="key" value="plotConfiguration_lineWidth" />
        <div class="mb-3">
          <label for="value" class="form-label">Line Width</label>
          <input
            type="number"
            class="form-control"
            id="lwvalue"
            name="value"
            aria-describedby="lineWidthHelp"
            value={config?.plotConfiguration_lineWidth}
            min="1"
          />
          <div id="lineWidthHelp" class="form-text">
            Width of the lines in the timeseries plots.
          </div>
        </div>
        <Button color="primary" type="submit">Submit</Button>
      </form>
    </Card>
  </Col>

  <!-- PLOTS PER ROW -->
  <Col>
    <Card class="h-100">
      <form
        id="plots-per-row-form"
        method="post"
        action="/frontend/configuration/"
        class="card-body"
        onsubmit={(e) => updateSetting(e, {
          selector: "#plots-per-row-form",
          target: "ppr",
        })}
      >
        <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
        <CardTitle
          style="margin-bottom: 1em; display: flex; align-items: center;"
        >
          <div>Plots per Row</div>
          {#if displayMessage && message.target == "ppr"}
            <div style="margin-left: auto; font-size: 0.9em;">
              <code style="color: {message.color};" out:fade>
                Update: {message.msg}
              </code>
            </div>
          {/if}
        </CardTitle>
        <input type="hidden" name="key" value="plotConfiguration_plotsPerRow" />
        <div class="mb-3">
          <label for="value" class="form-label">Plots per Row</label>
          <input
            type="number"
            class="form-control"
            id="pprvalue"
            name="value"
            aria-describedby="plotsperrowHelp"
            value={config?.plotConfiguration_plotsPerRow}
            min="1"
          />
          <div id="plotsperrowHelp" class="form-text">
            How many plots to show next to each other on pages such as
            /monitoring/job/, /monitoring/system/...
          </div>
        </div>
        <Button color="primary" type="submit">Submit</Button>
      </form>
    </Card>
  </Col>

  <!-- BACKGROUND -->
  <Col class="d-flex justify-content-between">
    <Card class="h-100" style="width: 49%;">
      <form
        id="backgrounds-form"
        method="post"
        action="/frontend/configuration/"
        class="card-body"
        onsubmit={(e) => updateSetting(e, {
          selector: "#backgrounds-form",
          target: "bg",
        })}
      >
        <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
        <CardTitle
          style="margin-bottom: 1em; display: flex; align-items: center;"
        >
          <div>Colored Backgrounds</div>
          {#if displayMessage && message.target == "bg"}
            <div style="margin-left: auto; font-size: 0.9em;">
              <code style="color: {message.color};" out:fade>
                Update: {message.msg}
              </code>
            </div>
          {/if}
        </CardTitle>
        <input type="hidden" name="key" value="plotConfiguration_colorBackground" />
        <div class="mb-3">
          <div>
            {#if config?.plotConfiguration_colorBackground}
              <input type="radio" id="colb-true-checked" name="value" value="true" checked />
            {:else}
              <input type="radio" id="colb-true" name="value" value="true" />
            {/if}
            <label for="true">Yes</label>
          </div>
          <div>
            {#if config?.plotConfiguration_colorBackground}
              <input type="radio" id="colb-false" name="value" value="false" />
            {:else}
              <input type="radio" id="colb-false-checked" name="value" value="false" checked />
            {/if}
            <label for="false">No</label>
          </div>
        </div>
        <Button color="primary" type="submit">Submit</Button>
      </form>
    </Card>
    <Card class="h-100" style="width: 49%;">
      <form
        id="colorblindmode-form"
        method="post"
        action="/frontend/configuration/"
        class="card-body"
        onsubmit={(e) => updateSetting(e, {
          selector: "#colorblindmode-form",
          target: "cbm",
        })}
      >
        <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
        <CardTitle
          style="margin-bottom: 1em; display: flex; align-items: center;"
        >
          <div>Color Blind Mode</div>
          {#if displayMessage && message.target == "cbm"}
            <div style="margin-left: auto; font-size: 0.9em;">
              <code style="color: {message.color};" out:fade>
                Update: {message.msg}
              </code>
            </div>
          {/if}
        </CardTitle>
        <input type="hidden" name="key" value="plotConfiguration_colorblindMode" />
        <div class="mb-3">
          <div>
            {#if config?.plotConfiguration_colorblindMode}
              <input type="radio" id="cbm-true-checked" name="value" value="true" checked />
            {:else}
              <input type="radio" id="cbm-true" name="value" value="true" />
            {/if}
            <label for="true">Yes</label>
          </div>
          <div>
            {#if config?.plotConfiguration_colorblindMode}
              <input type="radio" id="cbm-false" name="value" value="false" />
            {:else}
              <input type="radio" id="cbm-false-checked" name="value" value="false" checked />
            {/if}
            <label for="false">No</label>
          </div>
        </div>
        <Button color="primary" type="submit">Submit</Button>
      </form>
    </Card>
  </Col>

  <!-- RESAMPLE POLICY -->
  <Col>
    <Card class="h-100">
      <form
        id="resample-policy-form"
        method="post"
        action="/frontend/configuration/"
        class="card-body"
        onsubmit={(e) => updateSetting(e, {
          selector: "#resample-policy-form",
          target: "rsp",
        })}
      >
        <CardTitle
          style="margin-bottom: 1em; display: flex; align-items: center;"
        >
          <div>Resample Policy</div>
          {#if displayMessage && message.target == "rsp"}
            <div style="margin-left: auto; font-size: 0.9em;">
              <code style="color: {message.color};" out:fade>
                Update: {message.msg}
              </code>
            </div>
          {/if}
        </CardTitle>
        <input type="hidden" name="key" value="plotConfiguration_resamplePolicy" />
        <div class="mb-3">
          {#each [["", "Default"], ["low", "Low"], ["medium", "Medium"], ["high", "High"]] as [val, label]}
            <div>
              <input type="radio" id="rsp-{val || 'default'}" name="value" value={JSON.stringify(val)}
                checked={(!config?.plotConfiguration_resamplePolicy && val === "") || config?.plotConfiguration_resamplePolicy === val} />
              <label for="rsp-{val || 'default'}">{label}</label>
            </div>
          {/each}
          <div id="resamplePolicyHelp" class="form-text">
            Controls how many data points are shown in metric plots. Low = fast overview (~200 points), Medium = balanced (~500), High = maximum detail (~1000).
          </div>
        </div>
        <Button color="primary" type="submit">Submit</Button>
      </form>
    </Card>
  </Col>

  <!-- RESAMPLE ALGORITHM -->
  <Col>
    <Card class="h-100">
      <form
        id="resample-algo-form"
        method="post"
        action="/frontend/configuration/"
        class="card-body"
        onsubmit={(e) => updateSetting(e, {
          selector: "#resample-algo-form",
          target: "rsa",
        })}
      >
        <CardTitle
          style="margin-bottom: 1em; display: flex; align-items: center;"
        >
          <div>Resample Algorithm</div>
          {#if displayMessage && message.target == "rsa"}
            <div style="margin-left: auto; font-size: 0.9em;">
              <code style="color: {message.color};" out:fade>
                Update: {message.msg}
              </code>
            </div>
          {/if}
        </CardTitle>
        <input type="hidden" name="key" value="plotConfiguration_resampleAlgo" />
        <div class="mb-3">
          {#each [["", "Default"], ["lttb", "LTTB"], ["average", "Average"], ["simple", "Simple"]] as [val, label]}
            <div>
              <input type="radio" id="rsa-{val || 'default'}" name="value" value={JSON.stringify(val)}
                checked={(!config?.plotConfiguration_resampleAlgo && val === "") || config?.plotConfiguration_resampleAlgo === val} />
              <label for="rsa-{val || 'default'}">{label}</label>
            </div>
          {/each}
          <div id="resampleAlgoHelp" class="form-text">
            Algorithm used when downsampling time-series data. Average (the
            default) makes every plotted point the true mean of its interval,
            LTTB preserves visual shape by keeping extremes, Simple picks every
            Nth point.
          </div>
        </div>
        <Button color="primary" type="submit">Submit</Button>
      </form>
    </Card>
  </Col>

  <!-- SMOOTHING WINDOW -->
  <Col>
    <Card class="h-100">
      <form
        id="smoothing-window-form"
        method="post"
        action="/frontend/configuration/"
        class="card-body"
        onsubmit={(e) => updateSetting(e, {
          selector: "#smoothing-window-form",
          target: "sw",
        })}
      >
        <CardTitle
          style="margin-bottom: 1em; display: flex; align-items: center;"
        >
          <div>Smoothing Window</div>
          {#if displayMessage && message.target == "sw"}
            <div style="margin-left: auto; font-size: 0.9em;">
              <code style="color: {message.color};" out:fade>
                Update: {message.msg}
              </code>
            </div>
          {/if}
        </CardTitle>
        <input type="hidden" name="key" value="plotConfiguration_smoothingWindow" />
        <div class="mb-3">
          <label for="value" class="form-label">Smoothing Window</label>
          <input
            type="number"
            class="form-control"
            id="swvalue"
            name="value"
            aria-describedby="smoothingWindowHelp"
            value={config?.plotConfiguration_smoothingWindow}
            min="0"
          />
          <div id="smoothingWindowHelp" class="form-text">
            Width of the moving average applied to plotted lines, in data
            points. 0 disables it, the default is 3. It is applied after
            downsampling and is display-only: the reported min/avg/max
            statistics and the job footprint are unaffected. Combined with the
            Average algorithm it is a second, milder smoothing pass on top of
            the interval means.
          </div>
        </div>
        <Button color="primary" type="submit">Submit</Button>
      </form>
    </Card>
  </Col>
</Row>