import {
  Field,
  FieldDescription,
  FieldError,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
} from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import React from "react";
import { Controller, type FieldPath, type FieldValues, useFormContext } from "react-hook-form";

import { FormFieldLabel } from "./form-field-label.tsx";

interface SelectFieldItem {
  value: string;
  label: string;
}

type SelectFieldValue = string | null;

type SelectFieldProps<TFormValues extends FieldValues> = {
  name: FieldPath<TFormValues>;

  label?: string;
  description?: string;
  reserveDescriptionSpace?: boolean;

  disabled?: boolean;
  required?: boolean;
  readOnly?: boolean;

  placeholder?: string;
  items?: SelectFieldItem[];

  orientation?: "vertical" | "horizontal" | "responsive";

  serialize?: (value: unknown) => string;
  deserialize?: (value: SelectFieldValue) => unknown;

  className?: string;
  inputClassName?: string;
};

export function SelectField<TFormValues extends FieldValues>({
  name,

  label,
  description,
  reserveDescriptionSpace = false,

  disabled = false,
  required = false,
  readOnly = false,

  placeholder,
  items = [],

  orientation = "vertical",

  serialize,
  deserialize,

  className,
  inputClassName,
}: SelectFieldProps<TFormValues>) {
  const triggerId = React.useId();
  const { control, formState } = useFormContext<TFormValues>();
  const isDisabled = Boolean(disabled || readOnly || formState.isSubmitting);

  const serializeValue =
    serialize ?? ((value: unknown): string => (typeof value === "string" ? value : ""));

  const deserializeValue = deserialize ?? ((value: SelectFieldValue): string => value ?? "");

  return (
    <Controller
      control={control}
      name={name}
      render={({ field, fieldState }) => {
        const fieldValue = serializeValue(field.value);

        const normalizedItems =
          fieldValue && !items.some((item) => item.value === fieldValue)
            ? [{ value: fieldValue, label: fieldValue }, ...items]
            : items;

        const selectedItem = normalizedItems.find((item) => item.value === fieldValue);

        return (
          <Field
            className={cn("gap-1", className)}
            data-invalid={fieldState.invalid}
            orientation={orientation}
          >
            {label ? (
              <FormFieldLabel htmlFor={triggerId} required={required}>
                {label}
              </FormFieldLabel>
            ) : null}

            <Select
              disabled={isDisabled}
              onValueChange={(value) => field.onChange(deserializeValue(value))}
              value={fieldValue}
            >
              <SelectTrigger
                aria-invalid={fieldState.invalid}
                aria-required={required}
                className={cn(
                  "bg-muted/50 font-medium",
                  "hover:border-ring hover:ring-ring/20 hover:ring-[3px]",
                  "focus-visible:border-ring focus-visible:ring-ring/60 focus-visible:ring-[3px]",
                  "placeholder:text-muted-foreground/50",
                  inputClassName
                )}
                id={triggerId}
              >
                <span
                  className={cn(
                    "truncate text-left",
                    selectedItem ? "" : "text-muted-foreground font-normal italic"
                  )}
                >
                  {selectedItem?.label ?? placeholder}
                </span>
              </SelectTrigger>

              <SelectContent>
                {normalizedItems.map((item) => (
                  <SelectItem key={`key-${item.value}`} value={item.value}>
                    {item.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            {description ? (
              <FieldDescription>{description}</FieldDescription>
            ) : reserveDescriptionSpace ? (
              <div aria-hidden="true" className="min-h-5" />
            ) : null}

            <FieldError errors={[fieldState.error]} />
          </Field>
        );
      }}
    />
  );
}