import { Control, FieldErrors, UseFormWatch } from "react-hook-form";
import FormCheckbox from "@/src/components/form/FormCheckbox";
import FormInput from "@/src/components/form/FormInput";
import FormTextarea from "@/src/components/form/FormTextarea";
import { RMApplicationFormData } from "../schema";
import FormSection from "@/src/components/form/FormSection";
import FormRadio from "@/src/components/form/FormRadio";

interface Step2Props {
  control: Control<RMApplicationFormData>;
  errors: FieldErrors<RMApplicationFormData>;
  isReadOnly: boolean;
  watch: UseFormWatch<RMApplicationFormData>;
}

export default function Step2({ control, errors, isReadOnly, watch }: Step2Props) {
  const petsInUnit = watch("petsInUnit");

  return (
    <div className="space-y-6">
      

      <div className="space-y-4">
        <FormCheckbox
          name="authorizeMaintenance"
          control={control}
          label="Authorize maintenance staff to enter when not home tenant will receive notification when staff will be in home and when they complete the work and leave"
          disabled={isReadOnly}
          error={errors.authorizeMaintenance}
        />

        <FormCheckbox
          name="contactToSchedule"
          control={control}
          label="Contact me to schedule appointment"
          disabled={isReadOnly}
          error={errors.contactToSchedule}
        />
      </div>

      <div>
        <p className="text-sm font-medium text-gray-700 mb-2">Preferred Contact Methods</p>
        <div className="space-y-3">
          <FormCheckbox
            name="preferredPhone"
            control={control}
            label="Phone"
            disabled={isReadOnly}
            error={errors.preferredPhone}
          />

          <FormCheckbox
            name="preferredText"
            control={control}
            label="Text Message"
            disabled={isReadOnly}
            error={errors.preferredText}
          />

          <FormCheckbox
            name="preferredEmail"
            control={control}
            label="Email"
            disabled={isReadOnly}
            error={errors.preferredEmail}
          />
        </div>
      </div>

      <FormSection title="Pet Information">
        
          <FormRadio
            name="petsInUnit"
            control={control}
            label="Are there pets in your unit?"
            options={[
              { label: "Yes", value: "yes" },
              { label: "No", value: "no" },
            ]}
            required
            disabled={isReadOnly}
            error={errors.petsInUnit}
          />

          {petsInUnit === "yes" && (
            <div className="space-y-4 mt-4 border-teal-200">
              <FormInput
                name="petType"
                control={control}
                label="Type of Pet(s)"
                placeholder="e.g., Dog, Cat, Bird, etc."
                required
                disabled={isReadOnly}
                error={errors.petType}
              />

              <FormTextarea
                name="petSecurityPlan"
                control={control}
                label="How will your pet be secured during maintenance?"
                placeholder="Please describe how pets will be secured during maintenance (e.g., confined to bedroom, taken to another location, etc.)"
                rows={3}
                required
                disabled={isReadOnly}
                error={errors.petSecurityPlan}
              />
            </div>
          )}
         
      </FormSection>
    </div>
  );
}