import Button from "@components/Button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@components/DropdownMenu";
import HelpText from "@components/HelpText";
import { Label } from "@components/Label";
import {
  Edit,
  FolderSearch,
  MinusCircleIcon,
  MoreVertical,
  PlusCircle,
} from "lucide-react";
import React from "react";
import { useTranslations } from "next-intl";
import { usePermissions } from "@/contexts/PermissionsProvider";
import { PostureCheck } from "@/interfaces/PostureCheck";
import { PostureCheckChecksCell } from "@/modules/posture-checks/table/cells/PostureCheckChecksCell";
import { PostureCheckNameCell } from "@/modules/posture-checks/table/cells/PostureCheckNameCell";
import { PostureCheckNoChecksInfo } from "@/modules/posture-checks/ui/PostureCheckNoChecksInfo";

type Props = {
  data: PostureCheck[];
  onAddClick: () => void;
  onBrowseClick: () => void;
  onRemoveClick: (check: PostureCheck) => void;
  onEditClick: (check: PostureCheck) => void;
};

export default function PostureCheckMinimalTable({
  data,
  onAddClick,
  onBrowseClick,
  onRemoveClick,
  onEditClick,
}: Props) {
  const { permission } = usePermissions();
  const tCommon = useTranslations("common");
  const tPosture = useTranslations("postureChecks");

  return data && data.length > 0 ? (
    <div className={""}>
      <div className={"flex justify-between gap-10 mb-5 items-end"}>
        <div>
          <Label>{tCommon("postureCheckCount", { count: data.length })}</Label>
          <HelpText className={"mb-0"}>
            {tPosture("usePostureChecks")}
          </HelpText>
        </div>
        <div className={"flex items-center justify-center gap-4"}>
          <Button
            variant={"secondary"}
            size={"xs"}
            onClick={onBrowseClick}
            disabled={
              !permission.policies.create || !permission.policies.update
            }
          >
            <FolderSearch size={14} />
            {tPosture("browseChecks")}
          </Button>
          <Button
            variant={"primary"}
            size={"xs"}
            onClick={onAddClick}
            disabled={
              !permission.policies.create || !permission.policies.update
            }
          >
            <PlusCircle size={14} />
            {tPosture("newPostureCheck")}
          </Button>
        </div>
      </div>

      <div
        className={
          "rounded-md overflow-hidden border border-nb-gray-900 bg-nb-gray-920/30 py-1 px-1"
        }
      >
        {data.map((check) => {
          return (
            <div
              key={check.id}
              className={
                "flex justify-between py-2 items-center hover:bg-nb-gray-900/30 rounded-md cursor-pointer px-4 transition-all"
              }
              onClick={() =>
                (permission.policies.update || permission.policies.create) &&
                onEditClick(check)
              }
            >
              <PostureCheckNameCell small={true} check={check} />
              <div className={"flex gap-4 items-center"}>
                <PostureCheckChecksCell check={check} />
                {(permission.policies.update || permission.policies.create) && (
                  <DropdownMenu modal={false}>
                    <DropdownMenuTrigger
                      asChild={true}
                      onClick={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                      }}
                    >
                      <Button variant={"default-outline"} className={"!px-3"}>
                        <MoreVertical size={16} className={"shrink-0"} />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent
                      className="w-auto min-w-[200px]"
                      align="end"
                    >
                      <DropdownMenuItem
                        onClick={() => onEditClick(check)}
                        disabled={!permission.policies.update}
                      >
                        <div className={"flex gap-3 items-center"}>
                          <Edit size={14} className={"shrink-0"} />
                          {tPosture("editPostureCheck")}
                        </div>
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        onClick={() => onRemoveClick(check)}
                        disabled={!permission.policies.delete}
                      >
                        <div className={"flex gap-3 items-center"}>
                          <MinusCircleIcon size={14} className={"shrink-0"} />
                          {tPosture("removePostureCheck")}
                        </div>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  ) : (
    <PostureCheckNoChecksInfo
      onAddClick={onAddClick}
      onBrowseClick={onBrowseClick}
    />
  );
}
