import { DateTimeRangePicker } from '@fluidtruck/core'

function DateTimeRangePickerUsage() {
  const [startDate, setStartDate] = useState(null)
  const [endDate, setEndDate] = useState(null)
  const [startTime, setStartTime] = useState(0)
  const [endTime, setEndTime] = useState(0)

  return (
    <Grid gap={4}>
      <DateTimeRangePicker
        onEndDateChange={setEndDate}
        onStartDateChange={setStartDate}
        onStartTimeChange={setStartTime}
        onEndTimeChange={setEndTime}
        startTime={startTime}
        endTime={endTime}
        maxHours={720}
        timezone={"America/Los_Angeles"}
        endDate={endDate}
        startDate={startDate}
        reservations={[
          {
            start: new Date('2024-08-20T20:00:00Z'),
            end: new Date('2024-08-26T23:00:00Z'),
          },
          {
            start: new Date('2024-09-11T14:00:00Z'),
            end: new Date('2024-09-15T15:00:00Z'),
          },
          {
            start: new Date('2024-09-29T05:00:00Z'),
            end: new Date('2024-09-30T17:00:00Z'),
          },
        ]}
      />

      <Text>Start Date: {moment(startDate).format('DD/MM/YYYY, h:mm:ss a')}</Text>
      <Text>End Date: {moment(endDate).format('DD/MM/YYYY, h:mm:ss a')}</Text>
    </Grid>
  )
}

render(<DateTimeRangePickerUsage />)

function DateTimeRangePickerUsage() {
  const { isOpen, onOpen, onClose } = useDisclosure()

  const timezone = "America/Los_Angeles"
  const pickupDate = moment().tz(timezone).add(1, 'hours').startOf('hour');
  const dropoffDate = moment().tz(timezone).add(2, 'hours').startOf('hour');

  const [startDate, setStartDate] = useState(pickupDate)
  const [endDate, setEndDate] = useState(dropoffDate)
  const [startTime, setStartTime] = useState(pickupDate.hour())
  const [endTime, setEndTime] = useState(dropoffDate.hour())
  return (
    <Box>
    <Button onClick={onOpen}>Open Modal</Button>
      <Modal size="lg" isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent data-test-id="color-modal">
          <ModalCloseButton />
          <ModalHeader>Modal Title</ModalHeader>
          <ModalBody>
            <DateTimeRangePicker
              onEndDateChange={setEndDate}
              onStartDateChange={setStartDate}
              onStartTimeChange={setStartTime}
              onEndTimeChange={setEndTime}
              startTime={startTime}
              endTime={endTime}
              maxHours={720}
              timezone={timezone}
              endDate={endDate}
              startDate={startDate}
            />
          </ModalBody>
        </ModalContent>
      </Modal>

    </Box>
  )
}

render(<DateTimeRangePickerUsage />)

export interface UseDtrpProps {
  endDate: Moment | null;
  endTime: number;
  maxHours: number;
  onEndDateChange: (date: Moment | null) => void;
  onEndTimeChange: (time: number) => void;
  onStartDateChange: (date: Moment | null) => void;
  onStartTimeChange: (time: number) => void;
  reservations?: Types.Reservations;
  startDate: Moment | null;
  startTime: number;
}

type ViewProps = Pick<
  DateRangePickerShape,
  'startDatePlaceholderText' | 'endDatePlaceholderText' | 'displayFormat',
> & { labels: { end?: string, start?: string } }

type DateTimeRangePickerProps = UseDtrpProps & ViewProps