"use client";

import { formatDistanceToNow } from "date-fns";
import React, { useEffect, useState } from "react";
import DocumentIcon from "@/components/Icons/Document";
import FolderIcon from "@/components/Icons/Folder";
import MenuIcon from "@/components/Icons/Menu";

const Index = () => {
  const [apiKey, setApiKey] = useState("");
  const [fileList, setFileList] = useState([]);

  const setCredentials = async () => {
    setApiKey("ptlc_aDGU4VHNQuN5t6dyxNzVon3UZLR5ehuySmdR7xsUbMm");
  };

  const formateDate = (isoDate: string) => {
    const date = new Date(isoDate);
    return formatDistanceToNow(date, { addSuffix: true });
  };

  const sortFiles = (files: any) => {
    const data = files;

    const sortedData = data.sort((a, b) => {
      const isADir = !a.attributes.is_file;
      const isBDir = !b.attributes.is_file;

      // Najpierw katalogi, potem pliki
      if (isADir && !isBDir) return -1;
      if (!isADir && isBDir) return 1;

      // Sortowanie alfabetyczne
      return a.attributes.name.localeCompare(b.attributes.name);
    });

    console.log(sortedData);
  };

  const fetchFiles = async (apiKey: string) => {
    try {
      const response = await fetch(
        "https://ptero.przeqpiciel.com/api/client/servers/0bf192ab/files/list",
        {
          method: "GET",
          headers: {
            Authorization: "Bearer " + apiKey.toString(),
            "Content-Type": "application/json",
          },
        }
      );
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      setFileList(data.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  useEffect(() => {
    setCredentials();
    fetchFiles(apiKey);
  }, [apiKey]);

  return (
    <>
      {fileList.map((file) => (
        <div
          className="flex justify-between gap-4 bg-slate-400 mb-1 hover:bg-slate-500 pl-4 pr-4 pt-1 pb-1 rounded-md"
          key={file.attributes.name}
        >
          <div className="w-10">
            {file.attributes.is_file ? <DocumentIcon /> : <FolderIcon />}
          </div>
          <div className="w-48 text-left">{file.attributes.name}</div>
          <div className="w-48 text-right">
            {file.attributes.is_file ? file.attributes.size : ""}
          </div>
          <div title={file.attributes.modified_at} className="w-60 text-right">
            {formateDate(file.attributes.modified_at)}
          </div>
          <div className="w-6 justify-center text-center justify-items-center">
            <MenuIcon />
          </div>
        </div>
      ))}
    </>
  );
};

export default Index;