import React from "react";
import { Form } from "@/components/ui/form";
import { TripStep } from "@/types";
import { useEditStepForm } from "@/hooks/useEditStepForm";
import { StepBasicFields } from "./StepBasicFields";
import { StepTypeFieldRenderer } from "./StepTypeFieldRenderer";
import { StepFormAccordions } from "./StepFormAccordions";
import { StepFormButtons } from "./StepFormButtons";

interface EditStepFormProps {
  step: TripStep;
  tripId: string;
  onClose: () => void;
}

export function EditStepForm({ step, tripId, onClose }: EditStepFormProps) {
  const { form, stepType, isSubmitting, onSubmit } = useEditStepForm({
    step,
    tripId,
    onClose
  });

  return (
    <Form {...form}>
      <form onSubmit={onSubmit} className="space-y-4 max-h-[60vh] overflow-y-auto px-1">
        <StepBasicFields form={form} />

        <StepTypeFieldRenderer form={form} stepType={stepType} />

        <StepFormAccordions form={form} />

        <StepFormButtons isSubmitting={isSubmitting} onClose={onClose} />
      </form>
    </Form>
  );
}