import { observer } from 'mobx-react'
import { useCallback } from 'react'

import { tzToUTCOffset } from 'dbaas/screens/OrgSettings/features/General/helpers'
import useStores from 'dbaas/stores/useStores'
import { timeFormatter } from 'dbaas/utils/format'

interface ITimeProps {
  time: Time
  format?: Format
  utcOffset?: UTCOffset
}

type Time = number | string | Date
type Format = string
type UTCOffset = number | null

export const useTimeFormatter = (format?: Format, utcOffset?: UTCOffset) => {
  const { store } = useStores()
  const userSetTimezone = store.tenantData.user_set_timezone
    ? tzToUTCOffset(store.tenantData.user_set_timezone)
    : store.tenantData.timezone

  return useCallback(
    (time: number | string | Date) =>
      timeFormatter(time, utcOffset !== null && utcOffset !== undefined ? utcOffset : userSetTimezone, format),
    [userSetTimezone, format, utcOffset]
  )
}

export default observer(({ time, format, utcOffset }: ITimeProps) => {
  const f = useTimeFormatter(format, utcOffset)

  // if utcOffset is null, use locale utcOffset from browser settings
  return <>{f(time)}</>
})