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

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

interface LdvTopNameProps {
  theme?: ThemeType
  title?: string,
  rightIcon?: string | undefined | number,
  rightIconClick?: () => void
  showGreenery?: boolean
  greeneryIcon?: string | undefined | number
  headlineIconContent?: React.ReactNode
  headlineTopContent?: React.ReactNode
  headlineContent?: React.ReactNode
}

const LdvTopName = (props: LdvTopNameProps) => {
  const rightIcon = typeof props.rightIcon === 'number' ? props.rightIcon : { uri: props.rightIcon }
  const greeneryIcon = typeof props.greeneryIcon === 'number' ? props.greeneryIcon : { uri: props.greeneryIcon }

  const styles = StyleSheet.create({
    container: {
      marginHorizontal: cx(24),
      marginBottom: cx(12),
    },
    title: {
      color: props.theme?.global.brand,
      fontSize: cx(24),
    },
  })
  return (
    <View style={styles.container}>
      {props.headlineTopContent && props.headlineTopContent}
      {!props.headlineTopContent && <Spacer height={cx(38)} />}
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        {props.headlineContent ? props.headlineContent : <View style={{ flexDirection: 'row', flex: 1 }}>
          <Text style={styles.title}>
            {props.title}
          </Text>
          {props.showGreenery && <Image
            source={greeneryIcon}
            resizeMode="contain"
            style={{ height: cx(16), width: cx(16), left: 0 }}
          /> || null}
        </View>}
        {props.rightIcon && <TouchableOpacity
          onPress={props.rightIconClick}>
          <Image
            style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.brand }}
            source={rightIcon} />
        </TouchableOpacity>}
        {props.headlineIconContent && props.headlineIconContent}
      </View>
    </View>
  )
}

export default withTheme(LdvTopName)
