import * as React from 'react'
import {invariantIntlContext} from '../utils'
import {
  IntlShape,
  FormatDateOptions,
  FormatNumberOptions,
  FormatListOptions,
  FormatDisplayNameOptions,
} from '../types'
import {Context} from './injectIntl'

enum DisplayName {
  formatDate = 'FormattedDate',
  formatTime = 'FormattedTime',
  formatNumber = 'FormattedNumber',
  formatList = 'FormattedList',
  // Note that this DisplayName is the locale display name, not to be confused with
  // the name of the enum, which is for React component display name in dev tools.
  formatDisplayName = 'FormattedDisplayName',
}

enum DisplayNameParts {
  formatDate = 'FormattedDateParts',
  formatTime = 'FormattedTimeParts',
  formatNumber = 'FormattedNumberParts',
  formatList = 'FormattedListParts',
}

type Formatter = {
  formatDate: FormatDateOptions
  formatTime: FormatDateOptions
  formatNumber: FormatNumberOptions
  formatList: FormatListOptions
  formatDisplayName: FormatDisplayNameOptions
}

export const FormattedNumberParts: React.FC<
  Formatter['formatNumber'] & {
    value: Parameters<IntlShape['formatNumber']>[0]

    children(val: Intl.NumberFormatPart[]): React.ReactElement | null
  }
> = props => (
  <Context.Consumer>
    {(intl): React.ReactElement | null => {
      invariantIntlContext(intl)
      const {value, children, ...formatProps} = props
      return children(intl.formatNumberToParts(value, formatProps))
    }}
  </Context.Consumer>
)
FormattedNumberParts.displayName = 'FormattedNumberParts'

export function createFormattedDateTimePartsComponent<
  Name extends 'formatDate' | 'formatTime'
>(
  name: Name
): React.FC<
  Formatter[Name] & {
    value: Parameters<IntlShape[Name]>[0]
    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null
  }
> {
  type FormatFn = IntlShape[Name]
  type Props = Formatter[Name] & {
    value: Parameters<FormatFn>[0]
    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null
  }

  const ComponentParts: React.FC<Props> = props => (
    <Context.Consumer>
      {(intl): React.ReactElement | null => {
        invariantIntlContext(intl)
        const {value, children, ...formatProps} = props
        const date = typeof value === 'string' ? new Date(value || 0) : value
        const formattedParts: Intl.DateTimeFormatPart[] =
          name === 'formatDate'
            ? intl.formatDateToParts(date, formatProps)
            : intl.formatTimeToParts(date, formatProps)

        return children(formattedParts)
      }}
    </Context.Consumer>
  )
  ComponentParts.displayName = DisplayNameParts[name]
  return ComponentParts
}

export function createFormattedComponent<Name extends keyof Formatter>(
  name: Name
): React.FC<
  Formatter[Name] & {
    value: Parameters<IntlShape[Name]>[0]
    children?(val: string): React.ReactElement | null
  }
> {
  type FormatFn = IntlShape[Name]
  type Props = Formatter[Name] & {
    value: Parameters<FormatFn>[0]
    children?(val: string): React.ReactElement | null
  }

  const Component: React.FC<Props> = props => (
    <Context.Consumer>
      {(intl): JSX.Element | null => {
        invariantIntlContext(intl)
        const {value, children, ...formatProps} = props
        // TODO: fix TS type definition for localeMatcher upstream
        const formattedValue = intl[name](value as any, formatProps as any)

        if (typeof children === 'function') {
          return children(formattedValue as any)
        }
        const Text = intl.textComponent || React.Fragment
        return <Text>{formattedValue}</Text>
      }}
    </Context.Consumer>
  )
  Component.displayName = DisplayName[name]
  return Component
}