import {
  FormControl,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { BucketProp, UnknownRecord } from '@/types';
import { useEffect } from 'react';

export const ProductField = ({
  field,
  record,
  bucket,
}: {
  field: UnknownRecord;
  record: UnknownRecord;
  bucket: BucketProp['bucket'];
}) => {
  const numericValue = record.product_id;
  const displayText = bucket.columns_decorator(record, 'product_id');

  // Convert numeric value to string on mount
  useEffect(() => {
    field.onChange(String(numericValue));
  }, [field, numericValue]);

  return (
    <FormItem className="w-full md:w-1/2 lg:w-1/4 p-2 rounded-full">
      <FormLabel className="no-error-styles font-bold">
        <span className="text-red-600 pl-1">*</span>
        Product
      </FormLabel>

      <FormControl>
        <Input
          autoComplete="off"
          className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
          value={String(displayText)}
          disabled
        />
      </FormControl>

      <FormMessage />
    </FormItem>
  );
};