import React from 'react'
import { requireNativeComponent, ViewProps, NativeSyntheticEvent } from 'react-native'
import { defaultStyle, checkStyle, hidden } from './style'
import { finalizeConfig, extractConfigAndImages } from './config'
import pick from 'lodash.pick'
import { id } from './util'

type NativeProps = ViewProps & {
  readonly config: string
  readonly onIFKFilteringError?: (event: NativeSyntheticEvent<{ message: string }>) => void
  readonly onIFKFilteringStart?: (event: NativeSyntheticEvent<{}>) => void
  readonly onIFKFilteringFinish?: (event: NativeSyntheticEvent<{}>) => void
}

type Props = ViewProps & {
  readonly config: object
  readonly onFilteringError?: NativeProps['onIFKFilteringError']
  readonly onFilteringStart?: NativeProps['onIFKFilteringStart']
  readonly onFilteringFinish?: NativeProps['onIFKFilteringFinish']
}

const IFKImageFilter = requireNativeComponent('IFKImageFilter')

const hideEveryTailChild = (child: React.ReactChild, index: number) => (
  index === 0 ? child : hidden(child as React.ReactElement<ViewProps>)
)

export const createImageFilter = (
  name: string,
  shape: object
): React.FunctionComponent<Props> => (
  ({ style, onFilteringError, onFilteringStart, onFilteringFinish, ...props }: Props) => {
    const shapePropKeys = Object.keys(shape)
    const restPropKeys = Object.keys(props).filter(key => !shapePropKeys.includes(key))

    const { config, images } = extractConfigAndImages({
      type: { isImageFilter: true },
      name,
      ...(props.config || pick(props, shapePropKeys))
    })

    checkStyle(style)

    return (
      <IFKImageFilter
        style={[defaultStyle, style]}
        config={JSON.stringify(finalizeConfig(config, images))}
        onIFKFilteringError={onFilteringError || id}
        onIFKFilteringStart={onFilteringStart || id}
        onIFKFilteringFinish={onFilteringFinish || id}
        {...pick(props, restPropKeys) as object}
      >
        {React.Children.map(images, hideEveryTailChild)}
      </IFKImageFilter>
    )
  }
)