import {Image, ImageStyle, StyleProp, StyleSheet, Text, TextStyle, View, ViewProps, ViewStyle} from 'react-native'
import React from 'react'
import {Utils} from 'tuya-panel-kit'
import Spacer from './Spacer'
import ThemeType from '../config/themeType'

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

interface InfoTextProps extends ViewProps {
  theme?: ThemeType
  icon: string | number
  text: string
  contentColor?: string
  style?: ViewStyle
  iconStyle?: StyleProp<ImageStyle>
  textStyle?: StyleProp<TextStyle>
}

const InfoText = (props: InfoTextProps) => {
  const contentColor = props.contentColor || props.theme?.global.secondFontColor
  const source = typeof props.icon === 'string' ? {uri: props.icon} : props.icon
  return (
    <View style={[styles.root, props.style]}>
      <Image style={[styles.icon, {tintColor: contentColor}, props.iconStyle]}
             source={source}/>
      <Spacer width={cx(4)} height={0}/>
      <Text style={[styles.text, {color: contentColor}, props.textStyle ]}>{props.text}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    flexDirection: 'row',
  },
  icon: {
    width: cx(16),
    height: cx(16),
  },
  text: {
    flex: 1,
    marginTop: cx(2.5),
    fontSize: cx(12),
    fontFamily: 'helvetica_neue_lt_std_roman',
  },
})

export default withTheme(InfoText)
