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

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

interface DeleteButtonProps {
  theme?: ThemeType
  text: string,
  onPress: () => void,
  style?: StyleProp<ViewStyle>,
  textStyle?: StyleProp<TextStyle>
  disabled?: boolean
}

const DeleteButton = (props: DeleteButtonProps) => {
  const { text, onPress, style, textStyle, disabled } = props
  return (
    <TouchableOpacity
      disabled={disabled}
      onPress={onPress}
      style={[{
        width: '100%',
        height: cx(50),
        backgroundColor: props.theme?.button.delete,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: cx(8),
      }, style]}>
      <Text style={[{
        color: props.theme?.button.fontColor,
        fontSize: cx(16),
        fontFamily: 'helvetica_neue_lt_std_bd',
      }, textStyle]}>{text}</Text>
    </TouchableOpacity>
  )
}

export default withTheme(DeleteButton)
