import * as React from 'react'
import {IntlConfig, Formatters, IntlFormatters} from '../types'
import {filterProps} from '../utils'
import IntlListFormat, {IntlListFormatOptions} from '@formatjs/intl-listformat'
import {FormatError, ErrorCode} from 'intl-messageformat'
import {ReactIntlError, ReactIntlErrorCode} from '../error'

const LIST_FORMAT_OPTIONS: Array<keyof IntlListFormatOptions> = [
  'localeMatcher',
  'type',
  'style',
]

const now = Date.now()

function generateToken(i: number): string {
  return `${now}_${i}_${now}`
}

export function formatList(
  {locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
  getListFormat: Formatters['getListFormat'],
  values: Array<string>,
  options: Parameters<IntlFormatters['formatList']>[1]
): string
export function formatList(
  {locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
  getListFormat: Formatters['getListFormat'],
  values: Parameters<IntlFormatters['formatList']>[0],
  options: Parameters<IntlFormatters['formatList']>[1] = {}
): React.ReactNode {
  const ListFormat: typeof IntlListFormat = (Intl as any).ListFormat
  if (!ListFormat) {
    onError(
      new FormatError(
        `Intl.ListFormat is not available in this environment.
Try polyfilling it using "@formatjs/intl-listformat"
`,
        ErrorCode.MISSING_INTL_API
      )
    )
  }
  const filteredOptions = filterProps(options, LIST_FORMAT_OPTIONS)

  try {
    const richValues: Record<string, React.ReactNode> = {}
    const serializedValues = values.map((v, i) => {
      if (typeof v === 'object') {
        const id = generateToken(i)
        richValues[id] = v
        return id
      }
      return String(v)
    })
    if (!Object.keys(richValues).length) {
      return getListFormat(locale, filteredOptions).format(serializedValues)
    }
    const parts = getListFormat(locale, filteredOptions).formatToParts(
      serializedValues
    )
    return parts.reduce((all: Array<string | React.ReactNode>, el) => {
      const val = el.value
      if (richValues[val]) {
        all.push(richValues[val])
      } else if (typeof all[all.length - 1] === 'string') {
        all[all.length - 1] += val
      } else {
        all.push(val)
      }
      return all
    }, [])
  } catch (e) {
    onError(
      new ReactIntlError(
        ReactIntlErrorCode.FORMAT_ERROR,
        'Error formatting list.',
        e
      )
    )
  }

  return values
}