<commit_before><template>
  <div class="row">
    <div class="col-12 col-m-12 text-center">
      <div id="timer__box">
        <div>
          <span id="minutes" contenteditable="true">{{ minutes }}</span>
          :
          <span id="seconds" contenteditable="true">{{ seconds }}</span>
        </div>
      </div>
      <div class="row">
        <timer-switch @output="state => switchChecked = state" @switch-click="setTime"></timer-switch>
      </div>
    </div>
  </div>
</template>

<script>
  import TimerSwitch from './TimerSwitch.vue'

  export default {
    components: {
      'timer-switch': TimerSwitch
    },
    data() {
      return {
        minutes: '25',
        seconds: '00',
        intervalTimer: undefined,
        switchChecked: false
      }
    },
    methods: {
      setTime() {
        if (this.switchChecked) {
          this.stop();
        } else {
          let minutesToRun = document.querySelector("#minutes").textContent;
          let secondsToRun = document.querySelector("#seconds").textContent;
          let seconds      = parseInt(minutesToRun) * 60 + parseInt(secondsToRun);

          this.start(seconds);
        }
      },
      start(seconds) {
        const now = Date.now();
        const end = now + seconds * 1000;

        this.displayTimeLeft(seconds);

        this.countdown(end);
      },
      stop() {
        clearInterval(this.intervalTimer);
      },
      countdown(end) {
        this.intervalTimer = setInterval(() => {
          const secondsLeft = Math.round((end - Date.now()) / 1000);

          if(secondsLeft === 0) {
            this.endTime = 0;
          }

          if(secondsLeft < 0) {
            clearInterval(this.intervalTimer);
            document.querySelector("#timer-switch").checked = false
            return;
          }
          this.displayTimeLeft(secondsLeft)
        }, 1000);
      },
      displayTimeLeft(secondsLeft) {
        const minutes = Math.floor((secondsLeft % 3600) / 60);
        const seconds = secondsLeft % 60;

        this.minutes = `${minutes < 10 ? '0' : ''}${minutes}`;
        this.seconds = `${seconds < 10 ? '0' : ''}${seconds}`;
      },
    }
  }
</script>

<style scoped>
  :root {
    --white: #fefefe;
    --black: #0a0a0a;
  }

  #timer__box {
    font-family: sans-serif;
    display: inline-block;
    font-size: 100px;<commit_msg>Lock and unlock timer when it's started and stopped<commit_after><template>
  <div class="row">
    <div class="col-12 col-m-12 text-center">
      <div id="timer__box">
        <div>
          <span id="minutes" contenteditable="true">{{ minutes }}</span>
          :
          <span id="seconds" contenteditable="true">{{ seconds }}</span>
        </div>
      </div>
      <div class="row">
        <timer-switch @output="state => switchChecked = state" @switch-click="setTime"></timer-switch>
      </div>
    </div>
  </div>
</template>

<script>
  import TimerSwitch from './TimerSwitch.vue'

  export default {
    components: {
      'timer-switch': TimerSwitch
    },
    data() {
      return {
        minutes: '25',
        seconds: '00',
        intervalTimer: undefined,
        switchChecked: false
      }
    },
    methods: {
      setTime() {
        if (this.switchChecked) {
          this.stop();
        } else {
          document.querySelector("#minutes").contentEditable = false;
          document.querySelector("#seconds").contentEditable = false;

          let minutesToRun = document.querySelector("#minutes").textContent;
          let secondsToRun = document.querySelector("#seconds").textContent;
          let seconds      = parseInt(minutesToRun) * 60 + parseInt(secondsToRun);

          this.start(seconds);
        }
      },
      start(seconds) {
        const now = Date.now();
        const end = now + seconds * 1000;

        this.displayTimeLeft(seconds);

        this.countdown(end);
      },
      stop() {
        clearInterval(this.intervalTimer);

        document.querySelector("#timer-switch").checked    = false
        document.querySelector("#minutes").contentEditable = true;
        document.querySelector("#seconds").contentEditable = true;
      },
      countdown(end) {
        this.intervalTimer = setInterval(() => {
          const secondsLeft = Math.round((end - Date.now()) / 1000);

          if(secondsLeft === 0) {
            this.endTime = 0;
          }

          if(secondsLeft < 0) {
            this.stop();

            return;
          }
          this.displayTimeLeft(secondsLeft)
        }, 1000);
      },
      displayTimeLeft(secondsLeft) {
        const minutes = Math.floor((secondsLeft % 3600) / 60);
        const seconds = secondsLeft % 60;

        this.minutes = `${minutes < 10 ? '0' : ''}${minutes}`;
        this.seconds = `${seconds < 10 ? '0' : ''}${seconds}`;
      },
    }
  }
</script>

<style scoped>
  :root {
    --white: #fefefe;
    --black: #0a0a0a;
  }

  #timer__box {
    font-family: sans-serif;
    display: inline-block;
    font-size: 100px;
{'fraction_non_alphanumeric': 0.15, 'fraction_numerical': 0.017928286852589643, 'mean_word_length': 2.0083882564409827, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2203331', 'n_tokens_mistral': 1555, 'n_tokens_neox': 1461, 'n_words': 293}