import React from "react";

import ServerIcon from "@/components/Icons/Server";
import FolderIcon from "@/components/Icons/Folder";

interface Props {
  serverId: string;
  path: string;
  changeDirectory: (path: string) => void;
}

const index = ({ serverId, path, changeDirectory }: Props) => {
  const onClickHandler = (e: React.MouseEvent) => {
    const newPath = e.currentTarget.getAttribute("data-custom-attribute");
    if (!newPath) return;
    changeDirectory(newPath);
  };

  const elements = path.split("/").filter((p) => p !== "");
  console.log(elements);
  return (
    <div>
      <div className="breadcrumbs text-sm">
        <ul>
          <li>
            <div className="mr-2">
              <ServerIcon />
            </div>
            {serverId}
          </li>
          <li onClick={onClickHandler} data-custom-attribute="/">
            <div className="mr-2">
              <FolderIcon />
            </div>
            <a>/</a>
          </li>
          {elements.map((element, index) => {
            const path = elements.slice(0, index + 1).join("/");
            console.log("path", path);
            return (
              <li
                key={index}
                onClick={onClickHandler}
                data-custom-attribute={"/" + path}
              >
                <div className="mr-2">
                  <FolderIcon />
                </div>
                <a>{element}</a>
              </li>
            );
          })}

          <li>
            <span className="inline-flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                className="h-4 w-4 stroke-current"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                ></path>
              </svg>
              Add Document
            </span>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default index;