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

  initial() {
    this.changeFontSize(setting.font.fontSize);
    // Change 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 () {
      $('#leftPanel').toggleClass('active');
      $(this).toggleClass('active');
    });
    $(document).on('change', '#setupPanel .background_color', function () {
      let player = document.getElementById('backgroundSlideVideo');
      player.removeAttribute('src');
      setting.background.color = $(this).val().split(',');
      let { color } = setting.background;
      console.log('color ',color );
      if (color.length == 1) {
        $('.slideList').css('background-image', 'none');
      }
      $('.slideList').css('background-image', `linear-gradient(to right, ${color[0]}, ${color[1]})`);
    });

    // 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);
        }
      });
    });

    $(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);
    });
    // Change font color of cell
    $(document).on('change', '#setupPanel .color', function () {
      $('.slideList .boxcard').css('color', $(this).val());
      setting.cell.color = $(this).val();
    });

    // Change background color of cell
    $(document).on('change', '#setupPanel .bgColor', function () {
      $('.slideList .boxcard>div:not(.blank)').children().css('background-color', $(this).val());
      setting.cell.bgColor = $(this).val();
    });

    // Set time countdown
    $(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);
      }
    });
  }

  update() {
    let { background, countdown } = setting;
    let { color, bgColor, pair } = setting.cell;
    let { fontFamily, fontSize } = setting.font;
    $('#fontFamily').val(fontFamily).trigger('change');
    $('#fontSize').val(fontSize).trigger('change');
    $('#cellNumber').val(pair);
    if (background.type == 'video') {
      $('.slideList')[0].style.removeProperty('background-image');
      let player = document.getElementById('backgroundSlideVideo');
      player.setAttribute('src', background.base64);
    }

    if (background.type == 'image') {
      $('.slideList').css('background-image', `url(${background.base64})`);
    }

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

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

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