text: import {settingsCookie} from "../0globals";
  import Settings from "../modules/settingsPanel";
  import BDV2 from "../modules/v2";
  import DataStore from "../modules/dataStore";
  import DOM from "../modules/domtools";
  import Utils from "../modules/utils"
  
  import Checkbox from "./checkbox";
  
  export default class V2C_CssEditorDetached extends BDV2.reactComponent {
  
      constructor(props) {
          super(props);
          const self = this;
          self.onClick = self.onClick.bind(self);
          self.updateCss = self.updateCss.bind(self);
          self.saveCss = self.saveCss.bind(self);
          self.onChange = self.onChange.bind(self);
      }
  
      componentDidMount() {
          DOM.addClass(DOM.query("#app-mount"), "bd-detached-editor");
          BDV2.editorDetached = true;
          // this.updateLineCount();
          this.editor = ace.edit("bd-customcss-editor-detached");
          this.editor.setTheme("ace/theme/discord");
          this.editor.session.setMode("ace/mode/css");
          this.editor.setShowPrintMargin(false);
          this.editor.setFontSize(14);
          this.editor.on("change", () => {
              if (!settingsCookie["bda-css-0"]) return;
              this.saveCss();
              this.updateCss();
          });
  
      }
  
      componentWillUnmount() {
          DOM.removeClass(DOM.query("#app-mount"), "bd-detached-editor");
          BDV2.editorDetached = false;
          this.editor.destroy();
      }
  
      updateLineCount() {
          const lineCount = this.refs.editor.value.split("\n").length;
          if (lineCount == this.props.lines) return;
          this.refs.lines.textContent = Array.from(new Array(lineCount), (_, i) => i + 1).join(".\n") + ".";
          this.props.lines = lineCount;
      }
  
      get options() {
          return {
              lineNumbers: true,
              mode: "css",
              indentUnit: 4,
              theme: "material",
              scrollbarStyle: "simple"
          };
      }
  
      get css() {
          const _ccss = DataStore.getBDData("bdcustomcss");
          let ccss = "";
          if (_ccss && _ccss !== "") {
              ccss = Buffer.from(_ccss, "base64").toString("utf8");
          }
          return ccss;
      }
  
      get root() {
          const _root = DOM.query("#bd-customcss-detach-container");
          if (!_root) {
              if (!this.injectRoot()) return null;
              return this.detachedRoot;
          }
          return _root;
      }
  
      injectRoot() {
          const app = DOM.query(".app, ."+Utils.removeDa(BDModules.get(e => e.app && e.layers)[0].app));
          if (!app) return false;
          DOM.insertAfter(DOM.createElement(`<div id="bd-customcss-detach-container">`), app);
          return true;
      }
  
      render() {
          const self = this;
          return BDV2.react.createElement(
              "div",
              {className: "bd-detached-css-editor", id: "bd-customcss-detach-editor"},
              BDV2.react.createElement(
                  "div",
                  {id: "bd-customcss-innerpane"},
                  BDV2.react.createElement("div", {className: "editor-wrapper"},
                      BDV2.react.createElement("div", {id: "bd-customcss-editor-detached", className: "editor", ref: "editor"}, self.css)
                  ),
                  BDV2.react.createElement(
                      "div",
                      {id: "bd-customcss-attach-controls"},
                      BDV2.react.createElement(
                          "ul",
                          {className: "checkbox-group"},
                          BDV2.react.createElement(Checkbox, {id: "live-update", text: "Live Update", onChange: self.onChange, checked: settingsCookie["bda-css-0"]})
                      ),
                      BDV2.react.createElement(
                          "div",
                          {id: "bd-customcss-detach-controls-button"},
                          BDV2.react.createElement(
                              "button",
                              {style: {borderRadius: "3px 0 0 3px", borderRight: "1px solid #3f4146"}, className: "btn btn-primary", onClick: () => {
                                      self.onClick("update");
                                  }},
                              "Update"
                          ),
                          BDV2.react.createElement(
                              "button",
                              {style: {borderRadius: "0", borderLeft: "1px solid #2d2d2d", borderRight: "1px solid #2d2d2d"}, className: "btn btn-primary", onClick: () => {
                                      self.onClick("save");
                                  }},
                              "Save"
                          ),
                          BDV2.react.createElement(
                              "button",
                              {style: {borderRadius: "0 3px 3px 0", borderLeft: "1px solid #3f4146"}, className: "btn btn-primary", onClick: () => {
                                      self.onClick("attach");
                                  }},
                              "Attach"
                          ),
                          BDV2.react.createElement(
                              "span",
                              {style: {fontSize: "10px", marginLeft: "5px"}},
                              "Unsaved changes are lost on attach"
                          )
                      )
                  )
              )
          );
      }
  
      onChange(id, checked) {
          switch (id) {
              case "live-update":
                  settingsCookie["bda-css-0"] = checked;
                  Settings.saveSettings();
                  break;
          }
      }
  
      onClick(id) {
          const self = this;
          switch (id) {
              case "attach":
                  if (DOM.query("#editor-detached")) self.props.attach();
                  BDV2.reactDom.unmountComponentAtNode(self.root);
                  self.root.remove();
                  break;
              case "update":
                  self.updateCss();
                  break;
              case "save":
                  self.saveCss();
                  break;
          }
      }
  
      updateCss() {
          DOM.removeStyle("customcss");
          DOM.addStyle("customcss", this.editor.session.getValue());
      }
  
      saveCss() {
          DataStore.setBDData("bdcustomcss", Buffer.from(this.editor.session.getValue(), "utf-8").toString("base64"));
      }
  }