import axios from "axios";
import React, { useEffect, useState } from "react";
import { getContentFile, listOnFolder } from "../api/apiLog";

const PrivateLog = () => {
  const [listInFolderPM2, setListInFolderPM2] = useState([]);
  const [listInFolderLogs, setListInFolderLogs] = useState([]);
  const [listInFolderAPI, setListInFolderAPI] = useState([]);
  const [pathBeforePM2, setPathBeforePM2] = useState("/home/pm2_backup");
  const [pathBeforeLogs, setPathBeforeLogs] = useState("/home/logs");
  const [pathBeforeAPI, setPathBeforeAPI] = useState(
    "/home/Log_service/app/store/logsAPI"
  );
  const [searchPM2, setSearchPM2] = useState("");
  const [searchLogs, setSearchLogs] = useState("");
  const [searchAPI, setSearchAPI] = useState("");
  const [content, setContent] = useState("");
  const [choose, setChoose] = useState(1);
  const [fileChoose, setFileChoose] = useState("");

  const getAllInFolder = async (path, save) => {
    try {
      const res = await axios.post(listOnFolder, { folerPath: path });
      save(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  const getContent = async (pathFile) => {
    try {
      const res = await axios.post(getContentFile, { filePath: pathFile });
      setContent(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getAllInFolder(pathBeforePM2, setListInFolderPM2);
    getAllInFolder(pathBeforeLogs, setListInFolderLogs);
    getAllInFolder(pathBeforeAPI, setListInFolderAPI);
  }, []);

  return (
    <div>
        <button onClick={()=>setChoose(1)}>PM2</button>
        <button onClick={()=>setChoose(2)}>API</button>
        <button onClick={()=>setChoose(3)}>Logs Test</button>
      <div style={{ display: "flex" }}>

        <div
          style={{
            width: "30%",
            height: "100vh",
            overflow: "auto",
            padding: 10,
            display:choose===1?"block":"none"
          }}
        >
          <div
            style={{
              cursor: "pointer",
              margin: "1vh 0",
              fontSize: "0.7rem",
              fontWeight: 750,
              position: "fixed",
              display: "flex",
              backgroundColor: "white",
              width: "25%",
            }}
            onClick={() => {
              getAllInFolder(pathBeforePM2, setListInFolderPM2);
            }}
          >
            . .PM2{" "}
          </div>
          {listInFolderPM2.map((u) => (
            <div>
              <div
                key={u.name}
                style={{
                  cursor: "pointer",
                  margin: "1vh 1vh",
                  fontSize: "0.7rem",
                  fontWeight: 750,
                  backgroundColor:fileChoose===u.name?"#ffdea9":"white"
                }}
                onClick={() => {
                  if (u.type === "directory") {
                    setPathBeforePM2(
                      u.name
                        ?.split("/")
                        ?.slice(0, u.name.split("/").length - 1)
                        .join("/")
                    );
                    getAllInFolder(u.name, setListInFolderPM2);
                  } else {
                    getContent(u.name);
                    setFileChoose(u.name)
                    console.log(u);
                  }
                }}
              >
                {u.type==="file"?"f - ": "d - "}{u.name?.split("/")[u.name.split("/").length - 1]}
              </div>
            </div>
          ))}
        </div>


        <div
          style={{
            width: "30%",
            height: "100vh",
            overflow: "auto",
            padding: 10,
            display:choose===2?"block":"none"
          }}
        >
          <div
            style={{
              cursor: "pointer",
              margin: "1vh 0",
              fontSize: "0.7rem",
              fontWeight: 750,
              position: "fixed",
              display: "flex",
              backgroundColor: "white",
              width: "25%",
            }}
            onClick={() => {
              getAllInFolder(pathBeforeAPI, setPathBeforeAPI);
            }}
          >
            . .API{" "}
          </div>
          {listInFolderAPI.map((u) => (
            <div>
              <div
                key={u.name}
                style={{
                  cursor: "pointer",
                  margin: "1vh 1vh",
                  fontSize: "0.7rem",
                  fontWeight: 750,
                  backgroundColor:fileChoose===u.name?"#ffdea9":"white"
                }}
                onClick={() => {
                  if (u.type === "directory") {
                    setPathBeforeAPI(
                      u.name
                        ?.split("/")
                        ?.slice(0, u.name.split("/").length - 1)
                        .join("/")
                    );
                    getAllInFolder(u.name, setPathBeforeAPI);
                  } else {
                    getContent(u.name);
                    setFileChoose(u.name)
                    console.log(u);
                  }
                }}
              >
                {u.type==="file"?"f - ": "d - "}{u.name?.split("/")[u.name.split("/").length - 1]}
              </div>
            </div>
          ))}
        </div>

        <div
          style={{
            width: "30%",
            height: "100vh",
            overflow: "auto",
            padding: 10,
            display:choose===3?"block":"none"
          }}
        >
          <div
            style={{
              cursor: "pointer",
              margin: "1vh 0",
              fontSize: "0.7rem",
              fontWeight: 750,
              position: "fixed",
              display: "flex",
              backgroundColor: "white",
              width: "25%",
            }}
            onClick={() => {
              getAllInFolder(pathBeforeLogs, setListInFolderLogs);
            }}
          >
            <div style={{ width: "20%" }}>. .Logs</div>
            <div>
              <input
                type="text"
                onKeyUp={(e) => {
                  console.log(e.target.value);
                  setSearchLogs(e.target.value);
                }}
              />
            </div>
          </div>
          <div style={{ marginTop: "2vh" }}>
            {listInFolderLogs
              .filter((i) => i.name.includes(searchLogs))
              .map((u) => (
                <div
                  key={u.name}
                  style={{
                    cursor: "pointer",
                    margin: "1vh 1vh",
                    fontSize: "0.7rem",
                    fontWeight: 750,
                    backgroundColor:fileChoose===u.name?"#ffdea9":"white"
                  }}
                  onClick={() => {
                    if (u.type === "directory") {
                      setPathBeforeLogs(
                        u.name
                          ?.split("/")
                          ?.slice(0, u.name.split("/").length - 1)
                          .join("/")
                      );
                      getAllInFolder(u.name, setListInFolderLogs);
                    } else {
                      getContent(u.name);
                      setFileChoose(u.name)
                      console.log(u);
                    }
                  }}
                >
                  {u.type==="file"?"f - ": "d - "}{u.name?.split("/")[u.name.split("/").length - 1]}
                </div>
              ))}
          </div>
        </div>

        <textarea
          style={{
            border: "solid 1px gray",
            width: "70%",
            height: "100vh",
            color: "#70e300",
            backgroundColor: "black",
            fontWeight: 500,
            fontSize: "0.7rem",
          }}
          value={content}
        ></textarea>
      </div>
    </div>
  );
};

export default PrivateLog;
