import { IconFont, Utils } from 'tuya-panel-kit'
import { StyleProp, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
import React from 'react'

const cx = Utils.RatioUtils.convertX

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

export default function Cell(props: CellProps) {
    return (
        <TouchableOpacity
            style={[{
                height: cx(50),
                paddingHorizontal: cx(24),
                justifyContent: 'center',
            }, props.style]}
            onPress={props.onPress}>
            <CellContent title={props.title} value={props.value} />
        </TouchableOpacity>
    )
}

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

export function CellContent(props: CellContentProps) {
    return (
        <View
            style={[
                { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
                props.style,
            ]}>
            <Text
                style={[
                    {
                        fontSize: cx(14),
                        color: '#444',
                        fontFamily: 'helvetica_neue_lt_std_roman',
                    },
                    props.titleStyle,
                ]}>{props.title}</Text>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <Text style={[
                    {
                        fontSize: cx(14),
                        color: '#444',
                        fontFamily: 'helvetica_neue_lt_std_roman',
                    },
                    props.valueStyle,
                ]}>{props.value}</Text>
                <View style={{ width: cx(4) }} />
                <IconFont
                    name="arrow"
                    color={props.iconStyle?.color || '#444'}
                    size={props.iconStyle?.size || cx(11)} />
            </View>
        </View>
    )
}