import { Chip } from "@nextui-org/react";

import { CriteriaRow } from "@/types/participant-list/provisional-types";

type CriteriaRowProps = {
  row: CriteriaRow;
};

function formatTargetRange(
  description: CriteriaRow["descriptions"][number],
): string | null {
  if (description.minimumTarget == null) return null;
  if (description.maximumTarget == null)
    return `Minimum ${description.minimumTarget}`;

  return description.maximumTarget === description.minimumTarget
    ? `Target ${description.minimumTarget}`
    : `Target ${description.minimumTarget}–${description.maximumTarget}`;
}

function CriteriaRowItem({ row }: CriteriaRowProps) {
  return (
    <div className="space-y-2">
      <div className="flex items-start gap-2">
        <span className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-midnightBlue" />
        <div>
          <p className="text-sm font-medium text-gray-900 dark:text-white">
            {row.label}
          </p>
          {row.guidance && (
            <p className="mt-1 whitespace-pre-line text-xs text-gray-500 dark:text-neutral-400">
              {row.guidance}
            </p>
          )}
        </div>
      </div>
      {row.descriptions.map((description) => {
        const targetRange = formatTargetRange(description);

        return (
          <div
            key={description.id}
            className="ml-4 flex items-start justify-between gap-4"
          >
            <p className="text-xs text-gray-500 dark:text-neutral-400">
              {description.description}
            </p>
            {targetRange && (
              <Chip
                classNames={{
                  base: "shrink-0 bg-gray-200 dark:bg-neutral-800 text-[10px] font-mono text-gray-500 dark:text-neutral-400 h-5",
                }}
                size="sm"
              >
                {targetRange}
              </Chip>
            )}
          </div>
        );
      })}
    </div>
  );
}

export default CriteriaRowItem;