"use client";
import InputGroup from "@/components/FormElements/InputGroup";
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
import { Select } from "@/components/FormElements/select";
import FormFooter from "@/components/ui/FormFooter";
import { INQUIRY_STATUS } from "@/constants/enums";
import { TChangeInquiryStatusCredentials } from "@/lib/api";
import { useForm } from "react-hook-form";

interface ChangeStatusFormProps {
  onSubmit: (data: TChangeInquiryStatusCredentials) => void;
  onCancel: () => void;
  currentStatus: string;

}

const ChangeStatusForm = ({
  onSubmit,
  onCancel,
  currentStatus,

}: ChangeStatusFormProps) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<TChangeInquiryStatusCredentials>({
    defaultValues: {
      status: currentStatus as any,
      reason: "",
      description: "",
    },
  });

  const statusOptions = Object.values(INQUIRY_STATUS).map((status) => ({
    label: status.charAt(0).toUpperCase() + status.slice(1),
    value: status,
  }));

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <Select
        {...register("status", { required: "Status is required" })}
        name="status"
        label="Status"
        items={statusOptions}
        defaultValue={currentStatus}
        errors={errors}
        required
      />

      <InputGroup
        {...register("reason", { required: "Reason is required" })}
        name="reason"
        label="Reason"
        type="text"
        placeholder="Enter reason for status change"
        errors={errors}
        required
      />

      <TextAreaGroup
        {...register("description", { required: "Description is required" })}
        name="description"
        label="Description"
        placeholder="Enter detailed description"
        errors={errors}
        required
      />

      <FormFooter onCancel={onCancel} />
    </form>
  );
};

export default ChangeStatusForm;
