<template>
  <div>
    <div>
      <input type="checkbox"
             v-model="showAdvancedOptions"
      />
      Show advanced options
    </div>

    <div class="label">Autodetection frequency</div>
    <div class="description">
      Determines how often we check for aspect ratio changes.
      More frequent aspect ratio checks can result in insane RAM usage.
      Less frequent aspect ratio checks result in bigger delay between aspect ratio change and correction.
      Delays are given in milliseconds.
    </div>

    <div class="indent">
      <div class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Frequency while playing:
        </div>
        <div class="flex flex-input">
          <input type="number"
                step="any"
                v-model="settings.active.arDetect.timers.playing"
                >
        </div>
      </div>
      <div class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Frequency while paused:
        </div>
        <div class="flex flex-input">
          <input type="number"
                step="any"
                v-model="settings.active.arDetect.timers.paused"
                >
        </div>
      </div>
      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Error timeout:
        </div>
        <div class="flex flex-input">
          <input type="number"
                step="any"
                v-model="settings.active.arDetect.timers.error"
                >
        </div>
      </div>
    </div>

    <div class="info">Setting values under 100 milliseconds will have no effect unless you also reduce the tickrate.
      <a href="#"
         @click="showAdvancedOptions = true"
      >Show advanced options</a>
    </div> 

    <div class="indent">
      <div class="flex flex-row row-padding"  v-if="showAdvancedOptions">
        <div class="flex label-secondary">
          Tick rate:
        </div>
        <div class="flex flex-input">
          <input type="number"
                step="any"
                v-model="settings.active.arDetect.timers.tickrate"
                >
        </div>
      </div>
    </div>

    <div class="label">Fallback mode</div>
    <div class="description">
      Some streaming sites implement stuff (DRM) that prevents us from detecting aspect ratio using our favourite way.
      Fortunately for us, some browsers (most notably: Firefox) allow us to work around that limitation using an alternative.
      Said alternative is not without downsides, though:<br />
      <ul><li> it's less accurate and leaves a thin black edge all around the video</li>
      <li> Uses bigger image sample, which translates into slightly to moderately increased RAM and CPU usage <small>(increase in resource usage depends on your monitor resolution)</small></li>
      </ul>
      This is why fallback mode can be toggled off separately from the main thing.
      <span v-if="!fallbackModeAvailable">Unfortunately for you, <b>this option doesn't seem to be available in the browser you're using.</b></span>
    </div>
    <div class="indent">
      <div class="flex flex-row row-padding">
        <div class="flex label-secondary">

        </div>
        <div class="flex flex-input">
          <input type="checkbox"
                 v-model="settings.active.arDetect.fallbackMode.enabled"
          /> Enable fallback mode&nbsp;<span v-if="!fallbackModeAvailable">because I'm super duper sure I'm using firefox right now.</span>
        </div>
      </div>

      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Safety border thickness (in px)
        </div>
        <div class="flex flex-input">
          <input type="number"
                step="any"
                v-model="settings.active.arDetect.fallbackMode.safetyBorderPx"
                >
        </div>
      </div>
      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Don't react if detected edge is less than this many pixels thick:
        </div>
        <div class="flex flex-input">
          <input type="number"
                step="any"
                v-model="settings.active.arDetect.fallbackMode.noTriggerZonePx"
                >
        </div>
      </div>
    </div>

    <div class="label">Letterbox misallignment treshold</div>
    <div class="description">
      If top and bottom bar differ by more than this (0 — 0%, 1 — 100%), we do not correct aspect ratio.
    </div>
    <div class="indent">
      <div class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Letterbox misalignment treshold
        </div>
        <div class="flex flex-input">
          <input type=""
                 v-model="settings.active.arDetect.allowedMisaligned"
          />
        </div>
      </div>
    </div>

    <div class="label">Sampling options</div>
    <div class="description">
      Various sampling related options. Some options may be hidden behind <a href="#" @click="showAdvancedOptions = true">advanced options</a><br/>
      <b>Static columns:</b> Image is sampled in this many columns, spaced at regular intervals between both edges.<br/>
      <b>Random columns:</b> (ADVANCED; NOT IMPLEMENTED/PLANNED) In addition to static colums, sample image at this many random columns.<br/>
      <b>Static rows:</b> (ADVANCED) Image is sampled in this many rows, spaced at regular intervals between both edges.<br/>
      <b>Sample width, height:</b> (ADVANCED) size of the sample. Bigger -> more accurate aspect ratio detection, but uses more resources.<br/>

    </div>
    <div class="indent">
      <div class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Static sample columns:
        </div>
        <div class="flex flex-input">
          <input type="number"
                 v-model="settings.active.arDetect.sampling.staticCols"
          />
        </div>
      </div>
      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Random sample columns:
        </div>
        <div class="flex flex-input">
          <input type="number"
                 v-model="settings.active.arDetect.sampling.randomCols"
          />
        </div>
      </div>
      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Static rows:
        </div>
        <div class="flex flex-input">
          <input type="number"
                 v-model="settings.active.arDetect.sampling.staticRows"
          />
        </div>
      </div>
      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Sample width:
        </div>
        <div class="flex flex-input">
          <input type="number"
                 v-model="settings.active.arDetect.canvasDimensions.sampleCanvas.width"
          />
        </div>
      </div>
      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Static rows:
        </div>
        <div class="flex flex-input">
          <input type="number"
                 v-model="settings.active.arDetect.canvasDimensions.sampleCanvas.height"
          />
        </div>
      </div>
    </div>

    <div class="label">Blackbar</div>
    <div class="description">
      These settings determine what's considered black and what's considered non-black.<br/>
      <b>Black level:</b> 0-255, where 0 is black. Anything below this number across all RGB components is considered black.
      Black level can decrease if we detect darker blacks in the video. Lower values —> more accurate edge detection;
      higher values —> detection is more forgiving to videos with less-than-ideal contrast ratios.<br/>
      <b>Treshold:</b> If pixel is darker than the sum of black level and this value, it's considered black. In theory, lower -> better.
      In practice, this value needs to be kept surprisingly high (8 might not be high enough), otherwise compression artifacts in videos
      start having an adverse effect on quality of automatic detection.
      <b>Gradient detection:</b> Attempt to discriminate between hard edges and gradients. 'Strict' and 'Lax' prevent aspect ratio
      changes if we detected gradients instead of a legit edge. This results in fewer false positives, but may cause aspect ratio
      detection to not work on darker frames.<br/>
      <b>Image treshold:</b> When gradient detection is enabled, everything that's brighter than the sum of black level, treshold and
      ths is considered to be non-black.<br/>
      <b>Gradient treshold:</b> If the distance between last black pixel and the first non-black pixel in a given column is more than this value,
      we're looking at a gradient. If this happens while gradient detection is on, we don't change aspect ratio.<br/>
      <b>Gradient sample size:</b> This option is really only relevant when using 'lax' gradient detection. If we don't find a non-black pixel
      within this distance after last known black pixel when scanning a column, we presume we're not on a gradient.
    </div>
    <div class="indent">
      <div class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Black level:
        </div>
        <div class="flex flex-input">
          <input type="number"
                 v-model="settings.active.arDetect.blackbar.blackLevel"
          />
        </div>
      </div>
      <div class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Treshold:
        </div>
        <div class="flex flex-input">
          <input type="number"
                 v-model="settings.active.arDetect.blackbar.treshold"
          />
        </div>
      </div>
      <div class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Gradient detection:
        </div>
        <div class="flex flex-input">
          TODO: insert select here
        </div>
      </div>
      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Image treshold
        </div>
        <div class="flex flex-input">
          <input type="number"
                 v-model="settings.active.arDetect.blackbar.imageTreshold"
          />
        </div>
      </div>
      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Gradient treshold:
        </div>
        <div class="flex flex-input">
          <input type="number"
                 v-model="settings.active.arDetect.blackbar.gradientTreshold"
          />
        </div>
      </div>
      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
        <div class="flex label-secondary">
          Gradient sample size:
        </div>
        <div class="flex flex-input">
          <input type="number"
                 v-model="settings.active.arDetect.blackbar.gradientSampleSize"
          />
        </div>
      </div>
    </div>

    <div class="label">Edge detection</div>
    <div class="description">
      alan pls add
    </div>
    <div class="indent">

    </div>

    <div v-if="showAdvancedOptions">
      <div class="label">Black frame detection</div>
      <div class="description">
        Black frame detection is a quick test that tries to determine whether we're looking at a black frame. This test prevents
        us from wasting precious time trying to detect aspect ratio on frames that are too dark for reliable aspect ratio detection.<br/>
        <b>Sample width, height:</b> Sample size. Since we're checking <i>every</i> pixel in this sample, dimensions should be kept small.<br/>
        <b>Cumulative treshold:</b> If we add the maximum of red, green, blue values of every pixel in the sample and they total more than this, the frame is bright enough.<br/>
        <b>Black pixel treshold:</b> If more than this fraction of pixels from the sample are "black", we consider the frame black. This overrules cumulative treshold.
      </div>
      <div class="indent">
        <div class="flex flex-row row-padding">
          <div class="flex label-secondary">
            Blackframe sample width:
          </div>
          <div class="flex flex-input">
            <input type="number"
                  v-model="settings.active.arDetect.canvasDimensions.blackframeCanvas.width"
            />
          </div>
        </div>
        <div class="flex flex-row row-padding">
          <div class="flex label-secondary">
            Blackframe sample height:
          </div>
          <div class="flex flex-input">
            <input type="number"
                   v-model="settings.active.arDetect.canvasDimensions.blackframeCanvas.height"
            />
          </div>
        </div>
        <div class="flex flex-row row-padding">
          <div class="flex label-secondary">
            Cumulative treshold:
          </div>
          <div class="flex flex-input">
            <input type="number"
                   v-model="settings.active.arDetect.blackframe.cumulativeTreshold"
            />
          </div>
        </div>
        <div class="flex flex-row row-padding">
          <div class="flex label-secondary">
            Black pixel treshold:
          </div>
          <div class="flex flex-input">
            <input type=""
                   v-model="settings.active.arDetect.blackframe.blackPixelsCondition"
            />
          </div>
        </div>
      </div>
    </div>

    <div v-if="showAdvancedOptions">
      <div class="label">Aspect ratio change treshold</div>
      <div class="description">
        New and old aspect ratio must differ by at least this much (%, 1=100%) before we trigger aspect ratio correction.
      </div>
      <div class="indent">
        <div class="flex flex-row row-padding">
          <div class="flex label-secondary">
            Aspect ratio change treshold.
          </div>
          <div class="flex flex-input">
            <input type=""
                  v-model="settings.active.arDetect.allowedMisaligned"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['settings'],
  data() {
    return {
      showAdvancedOptions: false,
      fallbackModeAvailable: false,
    }
  },
  created() {
    const canvas = document.createElement('canvas');
    canvas.width = 10;
    canvas.height = 10;
    const ctx = canvas.getContext('2d');
    try {
      ctx.drawWindow(window,0, 0, 10, 10, "rgba(0,0,0,0)");
      this.fallbackModeAvailable = true;
    } catch (e) {
      console.log("DrawWindow failed:", e)
      this.fallbackModeAvailable = false;
    }
  },
  methods: {

  }
}
</script>
