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

const backIcon = Platform.OS === 'ios' ? 'backIos' : 'backAndroid'

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

interface TopBarProps {
  theme?: ThemeType
  title: string
  onBackPress: () => void
  rightButtonIcon?: any | {}
  rightButtonStyle?: any | undefined
  rightButtonDisabled?: boolean
  onRightButtonPress?: (() => void) | undefined
}

const LDVTopBar = (props: TopBarProps) => {
  const icon = typeof props.rightButtonIcon === 'string' ? {uri: props.rightButtonIcon} : props.rightButtonIcon
  return (
    <View
      style={{
        flexDirection: 'row',
        height: cx(46),
        alignItems: 'center',
        marginTop: Platform.OS === 'ios' ? Utils.RatioUtils.statusBarHeight : 0,
        justifyContent: 'space-between',
      }}>
      <TouchableOpacity onPress={props.onBackPress} style={{flex: 1, maxWidth: cx(290)}} >
        <View
          style={{
            flexDirection: 'row',
            height: cx(46),
            marginHorizontal: cx(20),
            alignItems: 'center',
            flex: 1,
          }}>
          <IconFont size={cx(16)} color={props.theme?.global.brand} name={backIcon}/>
          <View style={{width: cx(10)}}/>
          <Text
            numberOfLines={1}
            style={{
              maxWidth: cx(290),
              color: props.theme?.global.brand,
              fontSize: cx(16),
              fontFamily: 'helvetica_neue_lt_std_roman',
            }}>{props.title}</Text>
        </View>
      </TouchableOpacity>
      {!!props.rightButtonIcon &&
          <TouchableOpacity
              style={{
                width: cx(44),
                height: cx(44),
                marginRight: cx(10)
              }}
              onPress={props.onRightButtonPress}
              disabled={props.rightButtonDisabled}>
              <Image
                  style={[
                    {
                      width: cx(44),
                      height: cx(44),
                    },
                    props.rightButtonStyle,
                  ]}
                  source={icon}/>
          </TouchableOpacity>
      }
    </View>
  )
}

export default withTheme(LDVTopBar) as React.ComponentType<TopBarProps>
