import { AircraftFormSchema, AircraftSchema, FlightFormSchema, } from "@/util/types"; import { ActionIcon, Button, CloseButton, Container, Fieldset, Group, Loader, Modal, NumberInput, ScrollArea, Select, Text, TextInput, Textarea, Tooltip, } from "@mantine/core"; import { DatePickerInput } from "@mantine/dates"; import { useForm } from "@mantine/form"; import dayjs from "dayjs"; import { HourInput, ZeroHourInput } from "./hour-input"; import TimeInput from "./time-input"; import { ZeroIntInput } from "./int-input"; import ListInput from "./list-input"; import { IconPencil, IconPlaneTilt, IconPlus } from "@tabler/icons-react"; import { useDisclosure } from "@mantine/hooks"; import AircraftForm from "./aircraft-form"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useApi } from "@/util/api"; import { useAircraft } from "@/util/hooks"; import { useEffect, useState } from "react"; import ImageUpload from "./image-upload"; import ImageListInput from "./image-list-input"; export default function FlightForm({ onSubmit, isPending, isError, error, initialValues, mah, submitButtonLabel, withCancelButton, cancelFunc, autofillHobbs = false, }: { onSubmit: (values: FlightFormSchema) => void; isPending: boolean; isError: boolean; error: Error | null; initialValues?: FlightFormSchema | null; mah?: string; submitButtonLabel?: string; withCancelButton?: boolean; cancelFunc?: () => void; autofillHobbs?: boolean; }) { const validate_time = (value: number | null) => { if (value === null) return; if (value > 2359) return "Time must be between 0000 and 2359"; if (value % 100 > 59) return "Minutes must not exceed 59"; }; const form = useForm({ initialValues: initialValues ?? { date: dayjs(), aircraft: "", waypoint_from: "", waypoint_to: "", route: "", hobbs_start: null, hobbs_end: null, time_start: null, time_off: null, time_down: null, time_stop: null, time_total: 0.0, time_pic: 0.0, time_sic: 0.0, time_night: 0.0, time_solo: 0.0, time_xc: 0.0, dist_xc: 0.0, landings_day: 0, landings_night: 0, time_instrument: 0.0, time_sim_instrument: 0.0, holds_instrument: 0, dual_given: 0.0, dual_recvd: 0.0, time_sim: 0.0, time_ground: 0.0, tags: [], pax: [], crew: [], comments: "", existing_images: [], images: [], }, validate: { aircraft: (value) => value?.length ?? 0 > 0 ? null : "Please select an aircraft", time_start: (value) => validate_time(value), time_off: (value) => validate_time(value), time_down: (value) => validate_time(value), time_stop: (value) => validate_time(value), }, }); const [aircraftOpened, { open: openAircraft, close: closeAircraft }] = useDisclosure(false); const client = useApi(); const queryClient = useQueryClient(); const addAircraft = useMutation({ mutationFn: async (values: AircraftFormSchema) => { const newAircraft = values; if (newAircraft) { const res = await client.post("/aircraft", newAircraft); return res.data; } throw new Error("Aircraft creation failed"); }, onSuccess: async () => { await queryClient.invalidateQueries({ queryKey: ["aircraft-list"] }); close(); }, }); const [aircraft, setAircraft] = useState( initialValues?.aircraft ?? "" ); const [hobbsTouched, setHobbsTouched] = useState(false); const getHobbs = useQuery({ queryKey: ["hobbs", aircraft], queryFn: async () => await client.get(`/aircraft/tail/${aircraft}`).then((res) => res.data), enabled: !!aircraft && aircraft !== "", }); const getAircraft = useAircraft(); useEffect(() => { if (autofillHobbs && getHobbs.isFetched && getHobbs.data && !hobbsTouched) { form.setFieldValue( "hobbs_start", getHobbs.data.hobbs ?? form.getTransformedValues()["hobbs_start"] ); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [getHobbs.data]); return ( <>

onSubmit(values))}> {/* Date and Aircraft */}

{initialValues?.existing_images?.length ?? 0 > 0 ? (
                <ImageListInput
                  form={form}
                  field="existing_images"
                  mt="md"
                  label="Existing Images"
                  // canAdd={false}
                />
              ) : null}
              <ImageUpload
                form={form}
                mt="md"
                field="images"
                label="Images"
                placeholder="Upload Images"
              />
            </Fieldset>
          </Container>
        </ScrollArea.Autosize>

<Group justify="flex-end" mt="md">
          {isPending ? (
            <Loader />
          ) : isError ? (
            <Text c="red" fw={700}>
              {error?.message}
            </Text>
          ) : null}
          {withCancelButton ? (
            <Button onClick={cancelFunc} color="gray">
              Cancel
            </Button>
          ) : null}
          <Button type="submit" leftSection={<IconPencil />}>
            {submitButtonLabel ?? "Create"}
          </Button>
        </Group>
      </form>
    </>
  );
}