import { useTranslation } from "react-i18next";
import IconComponent from "@/components/common/genericIconComponent";
import ShadTooltip from "@/components/common/shadTooltipComponent";
import { convertTestName } from "@/components/common/storeCardComponent/utils/convert-test-name";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
} from "@/components/ui/select-custom";
import type { FolderType } from "@/pages/MainPage/entities";
import { cn } from "@/utils/utils";
import { handleSelectChange } from "../helpers/handle-select-change";
import { FolderSelectItem } from "./folder-select-item";

export const SelectOptions = ({
  item,
  handleDeleteFolder,
  handleDownloadFolder,
  handleSelectFolderToRename,
  checkPathName,
}: {
  item: FolderType;
  handleDeleteFolder: ((folder: FolderType) => void) | undefined;
  handleDownloadFolder: (folderId: string) => void;
  handleSelectFolderToRename: (folder: FolderType) => void;
  checkPathName: (folderId: string) => boolean;
}) => {
  const { t } = useTranslation();
  return (
    <div>
      <Select
        onValueChange={(value) =>
          handleSelectChange(
            value,
            item,
            handleDeleteFolder,
            handleDownloadFolder,
            handleSelectFolderToRename,
          )
        }
        value=""
      >
        <ShadTooltip
          content={t("folder.options")}
          side="right"
          styleClasses="z-50"
        >
          <SelectTrigger
            className="w-fit"
            id={`options-trigger-${item.name}`}
            data-testid={
              "more-options-button" + `_${convertTestName(item?.name ?? "")}`
            }
          >
            <IconComponent
              name={"MoreHorizontal"}
              className={cn(
                `w-4 stroke-[1.5] px-0 text-muted-foreground group-hover/menu-button:block group-hover/menu-button:text-foreground`,
                checkPathName(item.id!) ? "block" : "hidden",
              )}
            />
          </SelectTrigger>
        </ShadTooltip>
        <SelectContent align="end" alignOffset={-16} position="popper">
          <SelectItem
            id="rename-button"
            value="rename"
            data-testid="btn-rename-project"
            className="text-xs"
          >
            <FolderSelectItem name={t("folder.rename")} iconName="SquarePen" />
          </SelectItem>
          <SelectItem
            value="download"
            data-testid="btn-download-project"
            className="text-xs"
          >
            <FolderSelectItem name={t("folder.download")} iconName="Download" />
          </SelectItem>
          <SelectItem
            value="delete"
            data-testid="btn-delete-project"
            className="text-xs"
          >
            <FolderSelectItem name={t("folder.delete")} iconName="Trash2" />
          </SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
};
