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

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

export interface ApplyForTextProps {
  theme?: ThemeType
  expand: boolean
  onExpandChange: (expand: boolean) => void
}

const ApplyForText = (props: ApplyForTextProps) => {
  const styles = StyleSheet.create({
    root: {
      flexDirection: 'row',
      alignItems: 'center',
      marginStart: cx(16),
    },
    text: {
      color: props.theme?.global.secondFontColor,
      fontSize: cx(16),
      letterSpacing: cx(0.12),
      fontFamily: 'helvetica_neue_lt_std_bd',
    },
    icon: {
      tintColor: props.theme?.global.secondFontColor,
      width: cx(24),
      height: cx(24),
    },
  })
  return (
    <TouchableOpacity
      onPress={() => {
        props.onExpandChange(!props.expand)
      }}>
      <View style={styles.root}>
        <Text style={styles.text}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
        <Image
          style={
            [styles.icon,
              {
                transform: [{ rotate: props.expand ? '0deg' : '180deg' }],
              },
            ]}
          source={res.ic_top_arrow}/>
      </View>
    </TouchableOpacity>
  )
}


export default withTheme(ApplyForText)
