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

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

interface TagProps extends ViewProps {
  theme?: ThemeType
  checked: boolean
  text: string
  onCheckedChange: (boolean) => void
}

const Tag = (props: TagProps) => {

  const styles = StyleSheet.create({
    root: {
      height: cx(24),
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      borderWidth: cx(1),
      borderColor: props.theme?.global.brand,
      borderRadius: cx(12),
    },
    text: {
      marginStart: cx(12),
      color: props.theme?.global.brand,
      fontSize: cx(14),
      fontFamily: 'helvetica_neue_lt_std_roman',
    },
    icon: {
      width: cx(12),
      height: cx(12),
      marginEnd: cx(6),
      tintColor: props.theme?.global.brand,
    },
  })

  return (
    <TouchableOpacity
      onPress={() => {
        props.onCheckedChange(!props.checked)
      }}>
      <View style={[styles.root, props.checked ? {backgroundColor: props.theme?.global.thirdBrand} : {}, props.style]}>
        <Text style={[styles.text, {marginEnd: cx(props.checked ? 4 : 12)}]}>{props.text}</Text>
        {
          props.checked &&
            <Image
                source={res.ic_arrows_nav_clear}
                style={styles.icon}/>
        }
      </View>
    </TouchableOpacity>
  )
}

export default withTheme(Tag)
