"use strict";

import "./style.scss";
import axios from "axios";

let userData: {
  mail: string;
  password: string;
} = { mail: "", password: "" };

export namespace EmailProxy {
  const protocol = "http://";
  const ip = "localhost";
  const port = "8000";
  const baseUrl = `${protocol}${ip}:${port}/`;

  export async function getMail(obj: {
    user: {
      mail: string;
      password: string;
    };
    mailbox: string;
  }) {
    const url = `${baseUrl}mails/get`;
    let response = await axios
      .post(url, obj)
      .then((response) => {
        return response;
      })
      .catch((reason) => {
        return reason.response;
      });
    return response;
  }

  export async function sendMail(obj: {
    from_user: {
      mail: string;
      password: string;
    };
    to_user: {
      mail: string;
      password: string;
    };
    subject: string;
    message: string;
  }) {
    const url = `${baseUrl}mails/send`;
    let response = await axios
      .post(url, obj)
      .then((response) => {
        return response;
      })
      .catch((reason) => {
        return reason.response;
      });
    return response;
  }
}

function removeChilds(parent: HTMLElement) {
  while (parent.firstChild) {
    parent.firstChild.remove();
  }
}

async function fillChat() {
  const resp = await EmailProxy.getMail({
    user: {
      mail: userData.mail,
      password: userData.password,
    },
    mailbox: "Spam",
  });
  const data = resp.data;
  const parent: HTMLElement = document.querySelector("#chat-content");
  removeChilds(parent);
  data.forEach((element) => {
    const text = document.createElement("li");
    const date = new Date(element.date);
    const dateString = `${date.getDate()}.${date.getMonth()}.${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}`
    text.innerText = `${element.mail_from} - ${dateString} - ${element.body}`;
    parent.appendChild(text);
  });
}

async function work(obj: any) {
  const resp = await EmailProxy.sendMail(obj);
  const data = resp.data;
  console.log(data);
}

function setNotifierStatus(status: boolean) {
  document.querySelectorAll(".notifier").forEach((element) => {
    if (status) {
      element.classList.add("green");
    } else {
      element.classList.remove("green");
    }
  });
}

function init() {
  document.querySelector("#login-btn").addEventListener("click", () => {
    userData.mail = (document.querySelector("#mail") as HTMLInputElement).value;
    userData.password = (document.querySelector(
      "#password"
    ) as HTMLInputElement).value;
    (document.querySelector("#login-btn") as HTMLButtonElement).disabled = true;
    fillChat();
    setInterval(() => {
      fillChat();
      setNotifierStatus(true);
      setTimeout(() => {
        setNotifierStatus(false);
      }, 500);
    }, 5 * 1000);
  });

  document.querySelector("#send").addEventListener("click", () => {
    const obj = {
      from_user: {
        mail: userData.mail,
        password: userData.password,
      },
      to_user: {
        mail: (document.querySelector("#to") as HTMLInputElement).value,
        password: "",
      },
      subject: "Test",
      message: (document.querySelector("#text") as HTMLInputElement).value,
    };
    work(obj);
  });
}

init();