import React from 'react'
import type { FlexStyle } from 'react-native'
import { TouchableWithoutFeedback, View } from 'react-native'
import FlexItem from './flex-item'
import type { FlexProps, FlexAlign, FlexJustify } from './interface'

const Flex: React.FC<FlexProps> = props => {
  const {
    style,
    direction = 'row',
    wrap = 'nowrap',
    justify = 'start',
    align = 'center',
    children,
    ...restProps
  } = props
  const transferConst: [FlexJustify, FlexAlign] = [justify, align]
  const transferConstStyle = transferConst.map<
    FlexStyle['justifyContent'] | FlexStyle['alignItems']
  >(tc => {
    switch (tc) {
      case 'start':
        return 'flex-start'
      case 'end':
        return 'flex-end'
      case 'between':
        return 'space-between'
      case 'around':
        return 'space-around'
      default:
        return tc
    }
  }) as [FlexStyle['justifyContent'], FlexStyle['alignItems']]

  const flexStyle = {
    flexDirection: direction,
    flexWrap: wrap,
    justifyContent: transferConstStyle[0],
    alignItems: transferConstStyle[1],
  }

  const inner = (
    <View style={[flexStyle, style]} {...restProps}>
      {children}
    </View>
  )

  const shouldWrapInTouchableComponent =
    restProps.onPress ||
    restProps.onLongPress ||
    restProps.onPressIn ||
    restProps.onPressOut

  if (shouldWrapInTouchableComponent) {
    return (
      <TouchableWithoutFeedback {...restProps}>
        {inner}
      </TouchableWithoutFeedback>
    )
  } else {
    return inner
  }
}

export default Object.assign(Flex, { Item: FlexItem })