import { memo } from 'react'
import { DatePicker, } from 'antd'
import moment, { Moment } from 'moment'
import { RangeValue } from 'rc-picker/lib/interface'
import { RangePickerSharedProps } from 'rc-picker/lib/RangePicker'

import { defaultFormat } from '@utils'

const { RangePicker } = DatePicker

export type DateRangeWrapperProps = RangePickerSharedProps<Moment> & {
    value?: RangeValue<Moment>,
    isUTC?: boolean
}

const normalizeDates = (value?: RangeValue<Moment>, isUTC?: boolean): RangeValue<Moment> => {
  if (!value) return [null, null]
  return [
      value[0] ? (isUTC ? moment.utc(value[0]).local() : moment(value[0])) : null,
      value[1] ? (isUTC ? moment.utc(value[1]).local() : moment(value[1])) : null,
  ]
}

export const DateRangeWrapper = memo<DateRangeWrapperProps>(({ value, isUTC, ...other }) => (
  <RangePicker
    showTime
    allowClear={false}
    format={defaultFormat}
    defaultValue={[
      moment().subtract(1, 'days').startOf('day'),
      moment().startOf('day'),
    ]}
    value={normalizeDates(value)}
    {...other}
  />
))

export default DateRangeWrapper