"use client";

import React, { useState, useRef } from "react";
import AddDocumentIcon from "@/components/Icons/AddDocument";
import Popup from "@/components/Popup";
import Pterodactyl from "@/components/Pterodactyl";
import { useSearchParams } from "next/navigation";

const Index = () => {
  const [showPopup, setShowPopup] = useState(false);
  const [fileName, setFileName] = useState("");
  const urlParams = useSearchParams();
  const serverId = urlParams.get("serverid") || "";
  const pathParam = urlParams.get("path") || "/";
  const apiKey = `${process.env.NEXT_PUBLIC_API_KEY}`;
  const inputRef = useRef<HTMLInputElement>(null);

  const pterodactyl = new Pterodactyl();

  function togglePopup() {
    setShowPopup(!showPopup);
    if (!showPopup) {
      // set focus on input
      setTimeout(() => {
        inputRef.current?.focus();
      }, 100);
    }
  }

  function handleOk() {
    console.log({ fileName });
    if (fileName) {
      pterodactyl.setApiKey(apiKey);
      pterodactyl.setServerId(serverId);
      pterodactyl.helpers.setWorkingDirectory(pathParam);
      pterodactyl.files.createFile(fileName);
    }
    setShowPopup(false);
  }

  return (
    <>
      <Popup
        title="New file name"
        show={showPopup}
        onClickClose={togglePopup}
        onClickOk={handleOk}
      >
        <div>
          <input
            ref={inputRef}
            type="text"
            className="input input-sm input-bordered mb-4 text-base-content"
            placeholder="File name"
            value={fileName}
            onChange={(e) => setFileName(e.target.value)}
          />
        </div>
      </Popup>
      <button
        onClick={() => {
          setFileName("");
          togglePopup();
        }}
        className="btn btn-sm"
      >
        <AddDocumentIcon />
        Add Document 
      </button>
    </>
  );
};

export default Index;