import { type FC } from "react";
import TaskDetailLabelsList from "./TaskDetailLabelsList";
import TaskDetailNewLabelForm from "./TaskDetailNewLabelForm";
import type { LabelsView, TaskLabel } from "./types";

type Props = {
  view: LabelsView;
  labels: TaskLabel[];
  selectedIds: Set<string>;
  onViewChange: (view: LabelsView) => void;
  onToggle: (id: string) => void;
  onCreate: (title: string, color: string) => void;
  isSubmitting?: boolean;
};

const TaskDetailLabelsPopover: FC<Props> = ({
  view,
  labels,
  selectedIds,
  onViewChange,
  onToggle,
  onCreate,
  isSubmitting = false,
}) => {
  return (
    <>
      {view === "list" ? (
        <TaskDetailLabelsList
          labels={labels}
          selectedIds={selectedIds}
          onToggle={onToggle}
          onEdit={() => undefined}
          onCreateClick={() => onViewChange("create")}
        />
      ) : (
        <TaskDetailNewLabelForm
          onBack={() => onViewChange("list")}
          onSubmit={onCreate}
          isSubmitting={isSubmitting}
        />
      )}
    </>
  );
};

export default TaskDetailLabelsPopover;
