// buzzwareTech package imports
import { Logo } from "@buzzwaretech/propel/emoji-icon-picker";
import { ProjectIcon } from "@buzzwaretech/propel/icons";
import { Tooltip } from "@buzzwaretech/propel/tooltip";
import { cn } from "@buzzwaretech/utils";
// buzzwareTech web hooks
import { useProject } from "@/hooks/store/use-project";

type Props = {
  project: {
    id: string;
    completed_issues?: number;
    total_issues?: number;
  };
  isLoading?: boolean;
};

function CompletionPercentage({ percentage }: { percentage: number }) {
  const percentageColor =
    percentage > 50
      ? "bg-success-subtle text-success-primary"
      : "bg-danger-subtle text-danger-primary";
  return (
    <div
      className={cn(
        "flex items-center gap-2 rounded-sm p-1 text-11",
        percentageColor,
      )}
    >
      <span>{percentage}%</span>
    </div>
  );
}

function ActiveProjectItem(props: Props) {
  const { project } = props;
  const { getProjectById } = useProject();
  const { id, completed_issues, total_issues } = project;

  const projectDetails = getProjectById(id);

  if (!projectDetails) return null;

  return (
    <div className="flex w-full items-center justify-between gap-2">
      <div className="flex flex-1 items-center gap-2 overflow-hidden">
        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-layer-1">
          <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
            {projectDetails?.logo_props ? (
              <Logo logo={projectDetails?.logo_props} size={16} />
            ) : (
              <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
                <ProjectIcon className="h-4 w-4" />
              </span>
            )}
          </span>
        </div>
        <Tooltip tooltipContent={projectDetails?.name} position="top-start">
          <p className="truncate text-13 font-medium">{projectDetails?.name}</p>
        </Tooltip>
      </div>
      <CompletionPercentage
        percentage={
          completed_issues && total_issues
            ? Math.round((completed_issues / total_issues) * 100)
            : 0
        }
      />
    </div>
  );
}

export default ActiveProjectItem;