class Setup {
  changeFontSize = (value) => {
    setting.font.fontSize = parseInt(value);
    $('.slideList').css('font-size', setting.font.fontSize);
  };

  initial() {
    this.changeFontSize(setting.font.fontSize);
    $(document).on('change', '#fontSize', () => {
      this.changeFontSize($('#fontSize').val());
    });
    $(document).on('click', '#setupBtn', function () {
      $('#setupPanel').toggleClass('active');
      $(this).toggleClass('active');
    });
    $(document).on('click', '.hideQuestionList', function () {
      $('.wrap_question_list').toggleClass('active');
      $(this).toggleClass('active');
    });

    $(document).on('input', '#setupPanel .background', function () {
      let file = $(this)[0].files[0];
      toBase64(file, (base64) => {
        let player = document.getElementById('backgroundSlideVideo');
        if (file.type.includes('video')) {
          $('.slideList')[0].style.removeProperty('background-image');
          base64 = `data:video/mp4;base64,${base64}`;
          player.setAttribute('src', base64);
          setting.background = { type: 'video', name: file.name, base64 };
        } else if (file.type.includes('image')) {
          player.removeAttribute('src');
          base64 = `data:image/gif;base64,${base64}`;
          $('.slideList').css('background-image', 'url(' + base64 + ')');
          setting.background = { type: 'image', name: file.name, base64 };
        }
      });
      $(this).val(null);
    });
    $(document).on('change', '#setupPanel .basic .color', function () {
        setting.font.color = $(this).val();
        $('.questionPreview').css('color', setting.font.color)
    });
    $(document).on('change', '#setupPanel .basic .countdown', function () {
      if ($.isNumeric($(this).val()) && $(this).val() < 100) {
        setting.countdown = $(this).val();
        timerReset('minute_counter');
        timerReset('second_counter');
        timerInit('minute_counter', $(this).val());
        timerInit('second_counter', 0);
      }
    });

    // Click on Hủy video/image background button 
    $(document).on('click', '#setupPanel #destroyBackgroundMedia', function () {
      // delete current background image
      $('.slideList')[0].style.removeProperty('background-image');
      // reset default background video source
      window.gameCustomAsset.forEach(element => {
        if (element.name == 'backgroundSlideVideo') {
            $(`[name=${element.name}]`).attr('src', element.base64);
        }
      });
    });

  }
  update() {
    let { countdown } = setting;
    let { fontSize, color } = setting.font;

    $('#fontSize').val(fontSize).trigger('change');
    $('#setupPanel .basic .color').val(color).trigger('change');
    $('#setupPanel .countdown').val(countdown).trigger('change');
  }
}

var isFirstClicked = false;
// Play background music
$(document).on('click', function () {
  // Auto start game
  if (!isFirstClicked) {
    isFirstClicked = true;
    $('#audio_background')[0].play();
  }
});

$(document).on('click', '#fullscreenbtn', function () {
  toggle_full_screen();
});