import {StyleSheet, Text, TouchableOpacity, View, ViewProps, Image} from 'react-native'
import {Utils} from 'tuya-panel-kit'
import React from 'react'
import res from "../res/index";
import ThemeType from '../config/themeType'

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

interface TextFieldStyleButtonProps extends ViewProps {
    theme?: ThemeType
    placeholder: string
    text: string
    onPress: () => void,
    showTipIcon?: boolean,
    onTipIconPress?: () => void,
}

const TextFieldStyleButton = (props: TextFieldStyleButtonProps) => {
    const styles = StyleSheet.create({
        topTip: {
            marginTop: cx(5),
            fontSize: cx(12),
            marginStart: cx(13),
            color: props.theme?.global.secondFontColor,
            fontFamily: 'helvetica_neue_lt_std_bd',
        },
        textGroup: {
            flexDirection: 'row',
            borderRadius: cx(4),
            backgroundColor: props.theme?.textInput.background,
            alignItems: 'center',
        },
        textParent: {
            flex: 1,
            height: cx(44),
            justifyContent: 'center',
        },
        text: {
            marginStart: cx(16),
            marginEnd: cx(6),
            fontSize: cx(16),
            color: props.theme?.textInput.fontColor,
            fontFamily: 'helvetica_neue_lt_std_roman',
        },
        line: {
            height: 1,
            position: 'absolute',
            start: cx(4),
            end: cx(4),
            bottom: 0,
            backgroundColor: props.theme?.textInput.line,
        },
        tipParent: {
            flexDirection: 'row',
            alignItems: 'center',
        },
        tipIcon: {
            width: cx(16),
            height: cx(16),
            marginStart: cx(4),
            tintColor: props.theme?.icon.primary
        }
    })

    return (
      <View style={props.style}>
          <View style={styles.tipParent}>
              <Text style={styles.topTip}>{props.placeholder}</Text>
              {props.showTipIcon && <TouchableOpacity onPress={props.onTipIconPress}>
                  <Image source={res.ic_info} style={styles.tipIcon}/>
              </TouchableOpacity>}
          </View>
          <TouchableOpacity onPress={props.onPress}>
              <View style={styles.textGroup}>
                  <View style={styles.textParent}>
                      <Text style={styles.text}>{props.text}</Text>
                  </View>
                  <View style={styles.line} />
              </View>
          </TouchableOpacity>
      </View>
    )
}


export default withTheme(TextFieldStyleButton)
