import SettingsActions from "../actions/SettingsActions";
import Maintenance from "./MaintenanceManager";
import FipamoAdminAPI, {
  TASK_SYNC_SETTNIGS
} from "../../libraries/FipamoAdminAPI";
import * as DataEvent from "../../../src/com/events/DataEvent";
import Mailer from "../actions/Mailer";
import Notifications from "../ui/Notifications";
const notify = new Notifications();
export default class SettingsIndex {
  //--------------------------
  // constructor
  //--------------------------
  constructor() {
    this.processing = false;
    this.start();
    this.admin = new FipamoAdminAPI(null);
    this.mm = new Maintenance(null, null);
  }
  //--------------------------
  // methods
  //--------------------------
  start() {
    let self = this;
    //handle save button
    document.getElementById("save-toggle").addEventListener("click", () =>
      new SettingsActions()
        .getInfo()
        .then((data) => {
          notify.alert("Saving Settings", null);
          self.admin.sync(TASK_SYNC_SETTNIGS, data).then((r) => {
            if (r.type == DataEvent.SETTINGS_UPDATED) {
              notify.alert(r.message, true);
            } else {
              notify.alert(r.message, true);
            }
          });
        })
        .catch(() => {
          //console.log(err);
        })
    );
    //handle set up image uploads
    document.getElementById("avatar").addEventListener("click", () => {
      document.getElementById("avatar-upload").click();
    });
    document.getElementById("background").addEventListener("click", () => {
      document.getElementById("background-upload").click();
    });
    document.getElementById("avatar-upload").addEventListener(
      "change",
      (e) => {
        self.handleImageUpload(e.target.id, e.target.files);
      },
      false
    );
    document.getElementById("background-upload").addEventListener(
      "change",
      (e) => {
        self.handleImageUpload(e.target.id, e.target.files);
      },
      false
    );
    //handle api access toggle
    var apiButton = document.getElementById("api-access-toggle");
    var apiStatus = document.getElementById("api-status");
    apiButton.addEventListener("click", (e) => {
      e.stopPropagation();
      e.preventDefault();
      if (apiButton.getAttribute("data-enabled") == "false") {
        apiButton.setAttribute("data-enabled", "true");
        apiStatus.innerHTML = "EXTERNAL API ACCESS IS ENABLED";
      } else {
        apiButton.setAttribute("data-enabled", "false");
        apiStatus.innerHTML = "EXTERNAL API ACCESS IS NOT ENABLED";
      }
    });

    //handle dynamic page rendering
    var dynamicRenderButton = document.getElementById("dynamic-render-toggle");
    var dynamicRenderStatus = document.getElementById("dynamic-render-status");
    dynamicRenderButton.addEventListener("click", (e) => {
      e.stopPropagation();
      e.preventDefault();
      if (dynamicRenderButton.getAttribute("data-enabled") == "false") {
        dynamicRenderButton.setAttribute("data-enabled", "true");
        dynamicRenderStatus.innerHTML = "DYNAMIC PAGE RENDERING";
      } else {
        dynamicRenderButton.setAttribute("data-enabled", "false");
        dynamicRenderStatus.innerHTML = "STATIC PAGE RENDERING";
      }
    });

    document
      .getElementById("send-mail")
      .addEventListener("click", (e) => this.handleMailer(e));
    document
      .getElementById("publish-pages")
      .addEventListener("click", (e) => this.handlePublished(e));
    //handle page render on save toggle
    document
      .getElementById("render-toggle")
      .addEventListener("click", (e) => this.toggleRender(e));
    document
      .getElementById("render-toggle-icon")
      .addEventListener("click", (e) => this.toggleRender(e));
    //handle theme toggle
    let themeBtns = document.querySelectorAll(".theme-select");
    for (var i = 0, length = themeBtns.length; i < length; i++) {
      themeBtns[i].addEventListener("click", (e) => this.handleThemes(e));
    }
    //handle mail options
    let mailBtn = document.querySelectorAll(".mail-option");
    for (i = 0, length = mailBtn.length; i < length; i++) {
      mailBtn[i].addEventListener("click", (e) => this.handleMailOptions(e));
    }
    //handle backup from settings [disabled]

    document
      .getElementById("create-backup")
      .addEventListener("click", (e) => this.handleBackup(e));

    /*
    document
      .getElementById("reindex-pages")
      .addEventListener("click", (e) => this.handleReindex(e));
    */
  }
  //--------------------------
  // event handlers
  //--------------------------
  togglePrivacy(e) {
    e.stopPropagation();
    e.preventDefault();
    if (e.target.getAttribute("data-private") == "false") {
      e.target.setAttribute("data-private", "true");
      e.target.innerHTML = "SITE IS PUBLIC";
    } else {
      e.target.setAttribute("data-private", "false");
      e.target.innerHTML = "SITE IS PRIVATE";
    }
  }
  toggleRender(e) {
    e.stopPropagation();
    e.preventDefault();
    let button = document.getElementById("render-toggle");
    if (button.getAttribute("data-render") == "false") {
      button.setAttribute("data-render", "true");
      //e.target.innerHTML = 'RENDER PAGES ON SAVE';
    } else {
      button.setAttribute("data-render", "false");
      //e.target.innerHTML = "DON'T RENDER PAGES ON SAVE";
    }
  }
  handleMailer() {
    let mailer = new Mailer();
    mailer.testMail();
    //mailer.sendMail();
  }
  handleThemes(e) {
    e.stopPropagation();
    e.preventDefault();
    let themes = document.querySelectorAll(".theme-select");
    for (var i = 0, length = themes.length; i < length; i++) {
      e.target.id == themes[i].id
        ? themes[i].setAttribute("data-enabled", "true")
        : themes[i].setAttribute("data-enabled", "false");
    }
  }
  handleMailOptions(e) {
    e.preventDefault();
    e.stopPropagation();
    let smtp = document.getElementById("mail-smtp");
    let mailgun = document.getElementById("mail-mg");
    let mail = document.querySelectorAll(".mail-option");
    for (var i = 0, length = mail.length; i < length; i++) {
      if (e.target.id == mail[i].id) {
        mail[i].setAttribute("data-enabled", "true");
        if (e.target.id == "option-smtp") {
          smtp.setAttribute("data-enabled", "true");
          mailgun.setAttribute("data-enabled", "false");
        } else if (e.target.id == "option-none") {
          smtp.setAttribute("data-enabled", "false");
          mailgun.setAttribute("data-enabled", "false");
        } else {
          smtp.setAttribute("data-enabled", "false");
          mailgun.setAttribute("data-enabled", "true");
        }
      } else {
        mail[i].setAttribute("data-enabled", "false");
      }
    }
  }
  handleImageUpload(type, files) {
    notify.alert("Uploading Image... ", null);

    this.mm
      .imageUpload(type, files)
      .then((r) => {
        if (r.type == DataEvent.AVATAR_UPLOADED) {
          notify.alert(r.message, true);
          document.getElementById("avatar").src = r.url;
        } else {
          notify.alert(r.message, true);
          document.getElementById("background").src = r.url;
        }
      })
      .catch(() => {
        //console.log(err)
      });
  }
  handlePublished(e) {
    if (this.processing) return;
    e.preventDefault();
    e.stopPropagation();
    let self = this;
    let task = { task: "PUBLISH_ALL" };
    this.processing = true;
    notify.alert("Publishing site...", null);
    this.admin
      .publish(task)
      .then((r) => {
        self.processing = false;
        notify.alert(r.message, true);
      })
      .catch((err) => {
        self.processing = false;
        notify.alert(err, false);
      });
  }

  handleBackup(e) {
    e.preventDefault();
    e.stopPropagation();
    notify.alert("Creating backup", null);
    this.mm
      .backup()
      .then((r) => {
        notify.alert(r.message, true);
      })
      .catch((err) => {
        notify.alert(err, false);
      });
  }

  handleReindex(e) {
    if (this.processing) return;
    let self = this;
    e.preventDefault();
    e.stopPropagation();
    let task = { task: "cleanup pages indexes" };
    this.processing = true;
    notify.alert("Cleaning up page indexes", null);
    this.admin
      .handleReindex(task)
      .then((r) => {
        self.processing = false;
        notify.alert(r.message, true);
      })
      .catch((err) => {
        self.processing = false;
        notify.alert(err, false);
      });
  }
}