"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 { type AddDealFormValues } from "./add-deal-form-schema";

const NO_OWNER_VALUE = "__none";

interface LeadOwnerSelectFieldProps {
  control: Control<AddDealFormValues>;
  leadOwnerSelectUsers: Array<{ id: string; name: string }>;
}

export function LeadOwnerSelectField({
  control,
  leadOwnerSelectUsers,
}: LeadOwnerSelectFieldProps) {
  const options = React.useMemo(
    () => [
      { value: NO_OWNER_VALUE, label: "No owner" },
      ...leadOwnerSelectUsers.map((u) => ({ value: u.id, label: u.name })),
    ],
    [leadOwnerSelectUsers],
  );

  return (
    <div>
      <FieldLabel>Lead Owner</FieldLabel>
      <Controller
        name="ownerId"
        control={control}
        render={({ field }) => (
          <ReactSelect
            value={field.value || NO_OWNER_VALUE}
            onValueChange={(v) =>
              field.onChange(v === NO_OWNER_VALUE ? "" : v)
            }
            options={options}
            placeholder="Select owner"
            triggerClassName="h-10 min-h-10 bg-gray-50 border-gray-200 rounded-xl text-[13px] font-semibold"
            contentClassName="rounded-xl"
          />
        )}
      />
    </div>
  );
}