"use client";

import * as React from "react";
import { Controller, type Control } from "react-hook-form";

import { ReactSelect } from "@/components/ui/react-select";
import { FieldLabel } from "./deal-form-helpers";
import { formatTeamLabelForUi } from "@/lib/deal-display";
import { type AddDealFormValues } from "./add-deal-form-schema";

interface TeamSelectFieldProps {
  control: Control<AddDealFormValues>;
  teams: Array<{ id: string; name: string }> | undefined;
}

export function TeamSelectField({ control, teams }: TeamSelectFieldProps) {
  const options = React.useMemo(
    () => [
      { value: "all", label: "No Team" },
      ...(teams?.map((t) => ({
        value: t.name.toLowerCase().replace(/\s+/g, "-"),
        label: formatTeamLabelForUi(t.name),
      })) ?? []),
    ],
    [teams],
  );

  return (
    <div>
      <FieldLabel>Team</FieldLabel>
      <Controller
        name="team"
        control={control}
        render={({ field }) => (
          <ReactSelect
            value={field.value}
            onValueChange={field.onChange}
            options={options}
            triggerClassName="h-10 min-h-10 bg-gray-50 border-gray-200 rounded-xl text-[13px] font-semibold"
            contentClassName="rounded-xl"
          />
        )}
      />
    </div>
  );
}