import { cn } from "@code/ui/lib/utils";
import { ChevronDown, Plus } from "lucide-react";

import type { MobileProjectView } from "./models";

export interface MobileProjectSelectProps {
  readonly activeCount: number;
  readonly className?: string;
  readonly onAddProject: () => void;
  readonly onProjectSelect: (projectId: string) => void;
  readonly projects: readonly MobileProjectView[];
  readonly selectedProjectId?: string;
}

export const MobileProjectSelect = ({
  activeCount,
  className,
  onAddProject,
  onProjectSelect,
  projects,
  selectedProjectId,
}: MobileProjectSelectProps) => (
  <div
    className={cn(
      "mt-0.5 flex min-w-0 items-center gap-1.5 text-[12px] leading-4 text-[#7c7772]",
      className
    )}
  >
    <span className="size-1.5 shrink-0 rounded-full bg-[#64ad1f]" />
    <label className="relative min-w-0">
      <span className="sr-only">Connected project</span>
      <select
        aria-label="Connected project"
        className="max-w-[132px] cursor-pointer appearance-none truncate bg-transparent pr-4 font-medium text-[#5d5955] outline-none focus-visible:ring-2 focus-visible:ring-[#315dc0]"
        onChange={(event) => onProjectSelect(event.currentTarget.value)}
        value={selectedProjectId ?? ""}
      >
        {projects.length === 0 ? (
          <option value="">No connected project</option>
        ) : null}
        {projects.map((project) => (
          <option key={project.id} value={project.id}>
            {project.name}
          </option>
        ))}
      </select>
      <ChevronDown
        aria-hidden="true"
        className="pointer-events-none absolute top-1/2 right-0 size-3 -translate-y-1/2"
      />
    </label>
    <span aria-hidden="true">·</span>
    <span className="shrink-0 tabular-nums">{activeCount} active</span>
    <button
      aria-label="Add project"
      className="ml-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-[#c8ff00] text-black"
      onClick={onAddProject}
      title="Add project"
      type="button"
    >
      <Plus className="size-3.5" strokeWidth={2.5} />
    </button>
  </div>
);
