import { Input } from "@/components/ui/input";
import FilterHeader from "../filter-header";
import { AdvancedDateFilterValues } from "@/shared/components/advanced-date-filter/schemas/advanced-date-filter.schema";
import { Controller, useFormContext } from "react-hook-form";
import ValidationError from "@/shared/components/validation-error/validation-error";

type TFilterAmountGroupProps = {
  title: string;
  fieldName: "amount";
};

const FilterAmountGroup = ({
  title,
  fieldName,
}: TFilterAmountGroupProps) => {
  const { control, resetField, formState: { errors } } = useFormContext<AdvancedDateFilterValues>();
  const error = errors[fieldName];
  return (
    <div className='flex flex-col gap-2.5'>
      <FilterHeader
        title={title}
        handleReset={() => resetField(fieldName, { defaultValue: undefined })}
      />
      <div>
        <Controller
          name={fieldName}
          control={control}
          render={({ field: { onChange, value, ...rest } }) => (
            <Input
              type="number"
              onChange={(e) => onChange(e.target.valueAsNumber)}
              value={value ?? ""}
              placeholder="Enter amount..."
              {...rest}
            />
          )}
        />
        {error && (
          <ValidationError>
            {error.message}
          </ValidationError>
        )}
      </div>
    </div>
  );
};

export default FilterAmountGroup;