import {IconFont, Utils} from 'tuya-panel-kit'
import {StyleProp, Text, TextStyle, TouchableOpacity, View, ViewStyle} from 'react-native'
import React from 'react'
import ThemeType from "../config/themeType";

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

interface CellProps {
  theme?: ThemeType
  title: string,
  value: string,
  onPress: () => void,
  style?: StyleProp<ViewStyle>
}

export default withTheme(function Cell(props: CellProps) {
  return (
    <TouchableOpacity
      style={[{
        height: cx(50),
        paddingHorizontal: cx(24),
        justifyContent: 'center',
        backgroundColor: props.theme?.card.background,
      }, props.style]}
      onPress={props.onPress}>
      <CellContent title={props.title} value={props.value}/>
    </TouchableOpacity>
  )
}) as React.ComponentType<CellProps>

interface CellContentProps {
  theme?: ThemeType
  title: string
  value: string
  style?: StyleProp<ViewStyle>
  titleStyle?: StyleProp<TextStyle>
  valueStyle?: StyleProp<TextStyle>
  iconStyle?: { color?: any, size?: number }
}

const CellContentBase = (props: CellContentProps) => {
  return (
    <View
      style={[
        {flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'},
        props.style,
      ]}>
      <Text
        style={[
          {
            fontSize: cx(14),
            color: props.theme?.global.secondFontColor,
            fontFamily: 'helvetica_neue_lt_std_roman',
          },
          props.titleStyle,
        ]}>{props.title}</Text>
      <View style={{flexDirection: 'row', alignItems: 'center'}}>
        <Text style={[
          {
            fontSize: cx(14),
            color: props.theme?.global.secondFontColor,
            fontFamily: 'helvetica_neue_lt_std_roman',
          },
          props.valueStyle,
        ]}>{props.value}</Text>
        <View style={{width: cx(4)}}/>
        <IconFont
          name="arrow"
          color={props.iconStyle?.color || props.theme?.global.secondFontColor}
          size={props.iconStyle?.size || cx(11)}/>
      </View>
    </View>
  )
}
const CellContent = withTheme(CellContentBase) as React.ComponentType<CellContentProps>

export { CellContent };
