import {Platform, StyleProp, TouchableOpacity, View, ViewProps, ViewStyle} from 'react-native'
import React, {PropsWithChildren} from 'react'
import {Utils} from 'tuya-panel-kit'
import ThemeType from '../config/themeType'

const cx = Utils.RatioUtils.convertX
const { withTheme } = Utils.ThemeUtils

interface CardProps extends PropsWithChildren<ViewProps> {
  theme?: ThemeType
  shadowHeight?: number | undefined
  onPress?: () => void
  onLongPress?: () => void
  containerStyle?: StyleProp<ViewStyle>
}

const Card = (props: CardProps) => {
  const initHeight = (Platform.OS === 'ios' && props.theme?.type === 'dark') ? 0 : 7
  const shadowHeight = props.shadowHeight || cx(initHeight)
  return (
    <View
      style={[{
        overflow: Platform.OS === 'ios' ? undefined : 'hidden',
        backgroundColor: props.theme?.card.background,
        elevation: shadowHeight,
        shadowColor: props.theme?.card.shadowColor,
        shadowOpacity: 0.2,
        shadowRadius: shadowHeight,
        shadowOffset: {
          width: 0,
          height: shadowHeight,
        },
        borderRadius: cx(10),
      }, props.style]}>
      <TouchableOpacity disabled={!(!!props.onPress)} onPress={props.onPress} onLongPress={props.onLongPress}>
        <View style={props.containerStyle}>{props.children}</View>
      </TouchableOpacity>
    </View>
  )
}

export default withTheme(Card) as React.ComponentType<CardProps>
