'use client';

import { useScheduleStore } from '@/stores/schedule';
import { Input } from '@repo/ui/components/ui/input';
import { type FormEvent, type PropsWithChildren } from 'react';

type EditableTimeRangeProps = {
  readonly disabled?: boolean;
  readonly onSubmit: (event: FormEvent) => void;
};

export function EditableTimeRangeForm({
  children,
  disabled = false,
  onSubmit,
}: PropsWithChildren<EditableTimeRangeProps>) {
  const endTime = useScheduleStore((state) => state.endTime);
  const startTime = useScheduleStore((state) => state.startTime);
  const setEndTime = useScheduleStore((state) => state.setEndTime);
  const setStartTime = useScheduleStore((state) => state.setStartTime);

  return (
    <form className="flex flex-row items-center gap-2" onSubmit={onSubmit}>
      <div className="flex-1">
        <Input
          className="rounded-xl"
          disabled={disabled}
          id="start-time"
          onChange={(event) => setStartTime?.(event.target.value)}
          required
          type="time"
          value={startTime}
        />
      </div>
      <div className="flex-1">
        <Input
          className="rounded-xl"
          disabled={disabled}
          id="end-time"
          onChange={(event) => setEndTime?.(event.target.value)}
          required
          type="time"
          value={endTime}
        />
      </div>
      {children}
    </form>
  );
}