import { AddCircle, Edit } from "iconsax-react";
import { type FC } from "react";
import { useTranslation } from "react-i18next";
import Button from "../../../../../components/Button";
import TaskDetailLabelCheckbox from "./TaskDetailLabelCheckbox";
import type { TaskLabel } from "./types";

type Props = {
  labels: TaskLabel[];
  selectedIds: Set<string>;
  onToggle: (id: string) => void;
  onEdit: (label: TaskLabel) => void;
  onCreateClick: () => void;
};

const TaskDetailLabelsList: FC<Props> = ({ labels, selectedIds, onToggle, onEdit, onCreateClick }) => {
  const { t } = useTranslation("global");

  return (
    <div className="flex flex-col gap-3">
      <h3 className="text-xs font-bold text-center">{t("taskmanager.task_detail.labels")}</h3>

      <div className="flex flex-col gap-2">
        {labels.map((label) => {
          const isSelected = selectedIds.has(label.id);

          return (
            <div key={label.id} className="flex items-center gap-2">
              <TaskDetailLabelCheckbox checked={isSelected} onToggle={() => onToggle(label.id)} ariaLabel={t("taskmanager.task_detail.labels")} />

              <div className="flex-1 h-5 rounded flex items-center px-3 min-w-0" style={{ backgroundColor: label.color }}>
                {label.title && <span className="text-xs font-medium truncate">{label.title}</span>}
              </div>

              <Edit onClick={() => onEdit(label)} size={16} color="#0047FF" />
            </div>
          );
        })}
      </div>

      <Button
        type="button"
        onClick={onCreateClick}
        className="flex items-center justify-center gap-2 bg-white border border-[#D0D0D0] text-[#292D32] h-6 rounded-[6px] text-xs mt-1"
      >
        <AddCircle size={14} color="#292D32" />
        <span className="text-xs">{t("taskmanager.task_detail.new_label")}</span>
      </Button>
    </div>
  );
};

export default TaskDetailLabelsList;
