import { DEFAULT_TIME_RANGE, TimeRangePicker, TimeRangePickerProps, useTimeRangePicker } from '@tidbcloud/uikit/biz'

import { utcOffsetToTz } from 'dbaas/screens/OrgSettings/features/General/helpers'
import useStores from 'dbaas/stores/useStores'

import { CurrentTimezoneLabel } from './CurrentTimezoneLabel'

function TimeRangePickerWrapper(props: TimeRangePickerProps) {
  const { store } = useStores()
  const timeRangePickerProps = useTimeRangePicker({
    value: props.value ?? DEFAULT_TIME_RANGE,
    onChange: props.onChange,
    minDateTime: props.minDateTime,
    maxDateTime: props.maxDateTime,
    maxDuration: props.maxDuration,
    relativeFormatter: props.relativeFormatter,
    absoluteFormatter: props.absoluteFormatter,
    dateInputFormat: props.dateInputFormat,
    utcOffset: utcOffsetToTz(store.tenantData.timezone)
  })

  return <TimeRangePicker {...props} {...timeRangePickerProps} footer={<CurrentTimezoneLabel />} />
}

export default TimeRangePickerWrapper