//创建复制中文按钮
function create_copy_text_button(el) {
  const copy_button = document.createElement("button");
  copy_button.className = "btn btn-default btn-sm copy-code";
  copy_button.innerHTML = "Text";
  copy_button.type = "button";
  copy_button.onclick = function () {
    copy_button.innerHTML = "✅";
    //cover after 2s
    setTimeout(function () {
      copy_button.innerHTML = "Text";
    }, 2000);
    const text = el.text_content;
    const textarea = document.createElement("textarea");
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
  };
  return copy_button;
}
//创建展开收起按钮
function create_collapse_button(el) {
  const collapse_button = document.createElement("button");
  collapse_button.className = "btn btn-link btn-sm collapse-code";
  collapse_button.innerHTML = "🔼";
  collapse_button.type = "button";
  collapse_button.onclick = function () {
    if (collapse_button.innerHTML === "🔼") {
      collapse_button.innerHTML = "🔽";
      el.style.display = "none";
    } else {
      collapse_button.innerHTML = "🔼";
      el.style.display = "block";
    }
  };
  return collapse_button;
}
//创建一键复制功能
function create_copy_all_button(json_content) {
  const copy_all_button = document.createElement("button");
  copy_all_button.className = "btn btn-default btn-sm copy-all";
  copy_all_button.innerHTML = "Copy All";
  copy_all_button.type = "button";
  const keys = Object.keys(json_content);
  const text = keys.reduce(function (acc, key) {
    return acc + `'${json_content[key]}'|"${json_content[key]}"|`;
  }, "");
  copy_all_button.onclick = function () {
    copy_all_button.innerHTML = "✅";
    //cover after 2s
    setTimeout(function () {
      copy_all_button.innerHTML = "Copy All";
    }, 2000);
    const textarea = document.createElement("textarea");
    textarea.value = text.slice(0, -1);
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
  };
  return copy_all_button;
}

//创建复制按钮
function create_copy_code_button(el) {
  const copy_button = document.createElement("button");
  copy_button.className = "btn btn-default btn-sm copy-code";
  copy_button.innerHTML = "Code";
  copy_button.type = "button";
  copy_button.onclick = function () {
    copy_button.innerHTML = "✅";
    //cover after 2s
    setTimeout(function () {
      copy_button.innerHTML = "Code";
    }, 2000);
    const text = el.code_content;
    const textarea = document.createElement("textarea");
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
  };
  return copy_button;
}
//创建键值标签
function create_key_value(key, value) {
  const key_value = document.createElement("div");
  key_value.className = "key-value";
  const key_text = document.createElement("div");
  key_text.className = "key-text";
  key_text.innerHTML = key;
  const value_text = document.createElement("div");
  value_text.className = "value-text";
  value_text.innerHTML = value;
  key_value.appendChild(value_text);
  key_value.appendChild(key_text);
  return key_value;
}
//生成具体的列表
function create_list(list_name, list_content) {
  console.log("创建", list_name, list_content);
  const ul_list = document.createElement("ul");
  const keys = Object.keys(list_content);
  ul_list.className = "list-group";
  ul_list.id = list_name;
  for (let i = 0; i < keys.length; i++) {
    const list_item = document.createElement("li");
    list_item.className = "list-group-item key-value-container";
    const key_value = create_key_value(keys[i], list_content[keys[i]]);
    list_item.appendChild(key_value);
    list_item.code_content = `i18nBook.${list_name}.${keys[i]}.t`;
    list_item.text_content = `'${list_content[keys[i]]}'|"${
      list_content[keys[i]]
    }"`;
    const text_button = create_copy_text_button(list_item);
    const code_button = create_copy_code_button(list_item);
    const button_container = document.createElement("div");
    button_container.className = "btn-group";
    button_container.appendChild(text_button);
    button_container.appendChild(code_button);
    list_item.appendChild(button_container);
    ul_list.appendChild(list_item);
  }
  return ul_list;
}
//通过JSON文件生成一列表
function create_col(list_name, list_content) {
  console.log("创建", list_name, list_content);
  const panel = document.createElement("div");
  const keys = Object.keys(list_content);
  panel.className = "json-column";
  for (let i = 0; i < keys.length; i++) {
    const list_item = document.createElement("div");
    panel.appendChild(list_item);
    if (keys[i] == "locale") {
    } else {
      list_item.className = "panel panel-info";
      const head_div = document.createElement("div");
      head_div.className = "panel-heading heading-container";
      head_div.innerHTML = keys[i]+" —— ("+Object.keys(list_content[keys[i]]).length+")";
      list_item.appendChild(head_div);
      const list_item_content = create_list(keys[i], list_content[keys[i]]);
      const collapse_button = create_collapse_button(list_item_content);
      const copy_all_button = create_copy_all_button(list_content[keys[i]]);
      const button_container = document.createElement("div");

      create_sortable(list_item_content);
      button_container.appendChild(copy_all_button);
      button_container.appendChild(collapse_button);
      head_div.appendChild(button_container);
      list_item.appendChild(list_item_content);
    }
  }
  return panel;
}
//创建可拖拽
function create_sortable(el) {
  const sortable = Sortable.create(el, {
    group: "shared",
    animation: 150,
    onUpdate: function (/**Event*/ evt) {
      console.log("onUpdate", evt);
    },
  });
}

//获取assets文件夹下的文件
async function access_assets() {
  let fileHandles = [];
  var FileSystemDirectoryHandle = await window.showDirectoryPicker({
    startIn: "documents",
  });
  console.log(FileSystemDirectoryHandle);
  var currentDirHandle = await FileSystemDirectoryHandle.entries();
  console.log(currentDirHandle);
  let currentDir = await currentDirHandle.next();
  //循环遍历目录
  while (!currentDir.done) {
    console.log(currentDir.value[0]);
    fileHandles.push(currentDir.value);

    currentDir = await currentDirHandle.next();
  }
  for (let json_file of fileHandles) {
    if (json_file[0] == "class_mapping.json") {
      const mapping_file_handle = json_file[1];
      const mapping_file = await mapping_file_handle.getFile();
      const mapping_file_content = await mapping_file.text();
      const mapping_file_json = JSON.parse(mapping_file_content);
      console.log(mapping_file_json);
    } else {
      if (json_file[0] == "zh_CN.json") {
        const mapping_file_handle = json_file[1];
        const mapping_file = await mapping_file_handle.getFile();
        const mapping_file_content = await mapping_file.text();
        const mapping_file_json = JSON.parse(mapping_file_content);
        const column = create_col(json_file[0], mapping_file_json);
        document.getElementById("translate_list").appendChild(column);
      }
    }
  }
}