import React from "react";
import { View, StyleSheet } from "react-native";
import FishingGearList from "./FishingGearList";
import MaterialCostList from "./MaterialCostList";
import TripNameInput from "./TripNameInput";
import TripDurationPicker from "./TripDurationPicker";
import PortSelector from "./PortSelector";
import BasicInfoInput from "./BasicInfoInput";
import ShipSelector from "./ShipSelector";
import AutoFillSection from "./AutoFillSection";
import { FishingGear, TripCost } from "./index";

interface TripFormBodyProps {
  mode: "add" | "edit" | "view";
  tripData?: Model.Trip;
  // Form state
  selectedShipId: string;
  setSelectedShipId: (id: string) => void;
  tripName: string;
  setTripName: (name: string) => void;
  fishingGears: FishingGear[];
  setFishingGears: (gears: FishingGear[]) => void;
  tripCosts: TripCost[];
  setTripCosts: (costs: TripCost[]) => void;
  startDate: Date | null;
  setStartDate: (date: Date | null) => void;
  endDate: Date | null;
  setEndDate: (date: Date | null) => void;
  departurePortId: number;
  setDeparturePortId: (id: number) => void;
  arrivalPortId: number;
  setArrivalPortId: (id: number) => void;
  fishingGroundCodes: string;
  setFishingGroundCodes: (codes: string) => void;
  // Callbacks
  onAutoFill?: (tripData: Model.Trip, selectedThingId: string) => void;
}

export default function TripFormBody({
  mode,
  selectedShipId,
  setSelectedShipId,
  tripName,
  setTripName,
  fishingGears,
  setFishingGears,
  tripCosts,
  setTripCosts,
  startDate,
  setStartDate,
  endDate,
  setEndDate,
  departurePortId,
  setDeparturePortId,
  arrivalPortId,
  setArrivalPortId,
  fishingGroundCodes,
  setFishingGroundCodes,
  onAutoFill,
}: TripFormBodyProps) {
  const isEditMode = mode === "edit";
  const isViewMode = mode === "view";
  const isReadOnly = isViewMode;

  return (
    <View style={styles.container}>
      {/* Auto Fill Section - only show in add mode */}
      {!isEditMode && !isViewMode && onAutoFill && (
        <AutoFillSection onAutoFill={onAutoFill} />
      )}

      {/* Ship Selector - disabled in edit and view mode */}
      <ShipSelector
        selectedShipId={selectedShipId}
        onChange={setSelectedShipId}
        disabled={isEditMode || isViewMode}
      />

      {/* Trip Name */}
      <TripNameInput value={tripName} onChange={setTripName} disabled={isReadOnly} />

      {/* Fishing Gear List */}
      <FishingGearList items={fishingGears} onChange={setFishingGears} disabled={isReadOnly} />

      {/* Trip Cost List */}
      <MaterialCostList items={tripCosts} onChange={setTripCosts} disabled={isReadOnly} />

      {/* Trip Duration */}
      <TripDurationPicker
        startDate={startDate}
        endDate={endDate}
        onStartDateChange={setStartDate}
        onEndDateChange={setEndDate}
        disabled={isReadOnly}
      />

      {/* Port Selector */}
      <PortSelector
        departurePortId={departurePortId}
        arrivalPortId={arrivalPortId}
        onDeparturePortChange={setDeparturePortId}
        onArrivalPortChange={setArrivalPortId}
        disabled={isReadOnly}
      />

      {/* Fishing Ground Codes */}
      <BasicInfoInput
        fishingGroundCodes={fishingGroundCodes}
        onChange={setFishingGroundCodes}
        disabled={isReadOnly}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});