Select

"use client";

import { useEffect, useState } from "react";
import {
  CalendarDays,
  MessageSquareText,
  Palette,
  Rocket,
  ShieldCheck,
} from "lucide-react";

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/r-select";

type WorkflowOption = {
  value: string;
  label?: string;
};

function getOptionIcon(value: string) {
  switch (value) {
    case "launch":
      return <Rocket className="size-4 text-muted-foreground" />;
    case "design":
      return <Palette className="size-4 text-muted-foreground" />;
    case "review":
      return <MessageSquareText className="size-4 text-muted-foreground" />;
    case "schedule":
      return <CalendarDays className="size-4 text-muted-foreground" />;
    case "approve":
      return <ShieldCheck className="size-4 text-muted-foreground" />;
    default:
      return null;
  }
}

export function SelectDemo() {
  const [options, setOptions] = useState<WorkflowOption[]>([]);
  const [value, setValue] = useState("");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function loadOptions() {
      const response = await fetch("/api/workflows");
      const data: WorkflowOption[] = await response.json();

      if (!cancelled) {
        setOptions(data);
        setLoading(false);
      }
    }

    loadOptions();

    return () => {
      cancelled = true;
    };
  }, []);

  return (
    <div className="flex w-full items-center justify-center px-4 py-6">
      <div className="flex w-full max-w-72 flex-col gap-2.5">
        <Select
          onValueChange={(nextValue) => setValue(nextValue ?? "")}
          value={value}>
          <SelectTrigger
            className="w-full"
            description="Choose the next workflow step from one compact select."
          >
            <SelectValue placeholder={loading ? "Loading..." : "Choose workflow"}>
              {(currentValue) => {
                const option = options.find((entry) => entry.value === currentValue);
                if (!option) {
                  return currentValue ?? null;
                }

                return (
                  <>
                    {getOptionIcon(option.value)}
                    option.label ?? option.value
                  </>
                );
              }}
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {loading ? (
                <SelectItem disabled label="Loading..." value="__loading" />
              ) : options.length === 0 ? (
                <SelectItem disabled label="No options" value="__empty" />
              ) : (
                options.map((option) => (
                  <SelectItem
                    icon={getOptionIcon(option.value)}
                    label={option.label}
                    key={option.value}
                    value={option.value}
                  />
                ))
              )}
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}