<div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}}  {{$rawComposeTextOverLimit ? 'over-char-limit' : ''}}"
     style="transform: scaleX({{inputLengthAsFractionRoundedAfterRaf || 0}});"
     aria-hidden="true"
></div>
<style>
  .compose-box-length-gauge {
    grid-area: gauge;
    margin: 0 0 5px 5px;
    height: 2px;
    background: var(--main-theme-color);
    transform-origin: left;
  }
  .compose-box-length-gauge.should-animate {
    transition: transform 0.2s linear;
  }
  .compose-box-length-gauge.over-char-limit {
    background: var(--warning-color);
  }
</style>
<script>
  import { CHAR_LIMIT } from '../../_static/statuses'
  import { mark, stop } from '../../_utils/marks'
  import { store } from '../../_store/store'

  export default {
    oncreate() {
      // perf improvement for keyboard input latency
      this.observe('inputLengthAsFractionRounded', inputLengthAsFractionRounded => {
        requestAnimationFrame(() => {
          mark('set inputLengthAsFractionRoundedAfterRaf')
          this.set({inputLengthAsFractionRoundedAfterRaf: inputLengthAsFractionRounded})
          stop('set inputLengthAsFractionRoundedAfterRaf')
          requestAnimationFrame(() => this.set({shouldAnimate: true}))
        })
      })
    },
    store: () => store,
    computed: {
      inputLengthAsFraction: ($rawComposeTextLength) => {
        return Math.min(CHAR_LIMIT, $rawComposeTextLength) / CHAR_LIMIT
      },
      inputLengthAsFractionRounded: (inputLengthAsFraction) => {
        // We don't need to update the gauge for every decimal point, so round it to the nearest 0.02
        let int = Math.round(inputLengthAsFraction * 100)
        int -= (int % 2)
        return int / 100
      }
    }
}
</script>