const options = [
    "select_transDirect",
    "select_subType",
    "directTranslation",
    "select_audioApi"
]

function $(id) {
  return document.getElementById(id)
}

// 将选项保存在 chrome.storage 中。
function save_options() {
  var isAuto = $("auto_trs").checked,
      isAutoSWT = $("select_translate").checked,
      transDirect = $("select_transDirect").options.selectedIndex,
      subType = $("select_subType").options.selectedIndex,
      isDirectTranslate = $("directTranslation").checked,
      audioApi = $("select_audioApi").options.selectedIndex,
      audioSpeed = $("audioSpeed").value;
  chrome.storage.sync.set({
    isAutoTranslate: isAuto,
    isAutoSWT: isAutoSWT,
    transDirect: transDirect,
    subType: subType,
    isDirectTranslate: isDirectTranslate,
    audioApi: audioApi,
    audioSpeed: audioSpeed
  },
    function () {
      // 更新状态，告诉用户选项已保存。
      // console.log(isAuto, isAutoSWT, transDirect, subType, isDirectTranslate, audioApi);
      console.log('audio speed: ', audioSpeed);
    }
  );
}

// 从保存在 chrome.storage 中的首选项恢复选择框和复选框状态。
function restore_options() {
  // 使用默认值 color = 'red' 和 likesColor = true 。
  chrome.storage.sync.get(
    {
      isAutoTranslate: false,
      isAutoSWT: true,
      transDirect: 1,
      subType: 0,
      version: '',
      favoriteColor: "red",
      likesColor: true,
      isDirectTranslate: false,
      audioApi: 0,
      audioSpeed: 5
    },
    function (items) {
      console.log('items: ', items)
      $("auto_trs").checked = items.isAutoTranslate;
      if (items.isAutoTranslate) {
        chrome.browserAction.setBadgeText({text: "auto"});
        chrome.browserAction.setBadgeBackgroundColor({color: "#5ebb8d"});
      } else {
        chrome.browserAction.setBadgeText({text: ""});
      }
      $("select_translate").checked = items.isAutoSWT;
      $("directTranslation").checked = items.isDirectTranslate;
      $("select_transDirect").options.selectedIndex = items.transDirect;
      $("select_subType").options.selectedIndex = items.subType;
      $("select_audioApi").options.selectedIndex = items.audioApi;
      $("audioSpeed").value = items.audioSpeed;
      var manifestData = chrome.runtime.getManifest();
      $('version').innerText = manifestData.version
      if (items.version != manifestData.version) {
        chrome.storage.sync.set({
            version: manifestData.version
        })
        // openUpdateModal();
    }
    }
  );
}
document.addEventListener("DOMContentLoaded", () => {
  restore_options()
  setI18n()
});
$("auto_trs").addEventListener('change', () => {
  save_options()
  if($("auto_trs").checked) {
    chrome.browserAction.setBadgeText({text: "auto"});
    chrome.browserAction.setBadgeBackgroundColor({color: "#5ebb8d"});
    // chrome.browserAction.setIcon({path: 'images/logo-auto.png'});
    // console.log("auto");
  }
  else {
    chrome.browserAction.setBadgeText({text: ""});
  }
})
$("select_translate").addEventListener('change', () => {
  save_options();
  if($("select_translate").checked) {
    chrome.runtime.sendMessage({option: 'change'});
  }
})
options.forEach((option) => {
  $(option).addEventListener('change', () => {
      save_options()
  })
})
$("audioSpeed").addEventListener('change', () => {
  save_options()
})
function openUpdateModal() {
  var elems = $('update-modal');
  var modal = M.Modal.init(elems, {
  });
  modal.open();
}

function setI18n () {
  $('optionsAutoSWT').innerText = chrome.i18n.getMessage('optionsAutoSWT')
  $('optionsAutoWebTrs').innerText = chrome.i18n.getMessage('optionsAutoWebTrs')

  $('defaultTrsDirect').innerText = chrome.i18n.getMessage('defaultTrsDirect')
  $('transZh2En').innerText = chrome.i18n.getMessage('transZh2En')
  $('transEn2Zh').innerText = chrome.i18n.getMessage('transEn2Zh')
  $('transJp2Zh').innerText = chrome.i18n.getMessage('transJp2Zh')

  $('defaultSubtype').innerText = chrome.i18n.getMessage('defaultSubtype')
  $('optionBil').innerText = chrome.i18n.getMessage('optionBil')
  $('optionSource').innerText = chrome.i18n.getMessage('optionSource')
  $('optionTarget').innerText = chrome.i18n.getMessage('optionTarget')

  $('defaultAudioApi').innerText = chrome.i18n.getMessage('defaultAudioApi')
  $('youdao').innerText = chrome.i18n.getMessage('youdao')
  $('baidu').innerText = chrome.i18n.getMessage('baidu')

  $('readingSpeed').innerText = chrome.i18n.getMessage('readingSpeed')

  $('textDocTrs').innerText = chrome.i18n.getMessage('textDocTrs')
  $('UserCenter').innerText = chrome.i18n.getMessage('UserCenter')
  $('xiaoyiApp').innerText = chrome.i18n.getMessage('xiaoyiApp')
  $('feedback').innerText = chrome.i18n.getMessage('feedback')

  $('showDirectly').innerText = chrome.i18n.getMessage('showDirectly');
}

chrome.runtime.sendMessage({ type: 'optionsPageview' });