import { Image, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { Utils } from 'tuya-panel-kit'
import { DeviceInfo } from '../api/native'
import Spacer from './Spacer'
import res from '../res'
import ThemeType from '../config/themeType'
import { getGlobalParamsDp } from '../utils/common'
import I18n from '../i18n'
import { isNumber } from 'lodash'

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

export interface ApplyForDeviceItemProps {
  theme?: ThemeType
  deviceInfo: DeviceInfo
}

const ApplyForDeviceItem = (props: ApplyForDeviceItemProps) => {
  const { dps } = props.deviceInfo
  const curPowerDp = getGlobalParamsDp('cur_power')
  const curPower = dps && JSON.parse(dps) && JSON.parse(dps)[curPowerDp]

  const styles = StyleSheet.create({
    root: {
      marginHorizontal: cx(8),
      backgroundColor: props.theme?.global.background,
      flexDirection: 'row',
      alignItems: 'center'
    },
    deviceInfo: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: cx(4),
    },
    deviceIcon: {
      width: cx(24),
      height: cx(24),
      marginStart: cx(6),
    },
    deviceName: {
      flex: 1,
      marginStart: cx(8),
      color: props.theme?.global.fontColor,
      fontSize: cx(16),
      fontFamily: 'helvetica_neue_lt_std_roman',
    },
    deviceRoomInfo: {
      marginStart: cx(38),
      flexDirection: 'row',
    },
    roomNameTag: {
      height: cx(16),
      display: 'flex',
      justifyContent: 'center',
      backgroundColor: props.theme?.tag.background,
      borderRadius: cx(8),
    },
    roomName: {
      marginHorizontal: cx(12),
      color: props.theme?.tag.fontColor,
      fontSize: cx(10),
      fontFamily: 'helvetica_neue_lt_std_roman',
    },
    offlineIcon: {
      minWidth: cx(24),
      minHeight: cx(24)
    },
    onlineText: {
      color: props.theme?.global.fontColor,
      fontSize: cx(14),
    }
  })

  return (
    <View style={styles.root}>
      <View style={{ flex: 1 }}>
        <View style={styles.deviceInfo}>
          <Image style={styles.deviceIcon} source={{ uri: props.deviceInfo.deviceIcon }} />
          <Text style={styles.deviceName}>{props.deviceInfo.deviceName}</Text>
        </View>
        <View style={styles.deviceRoomInfo}>
          <View style={styles.roomNameTag}>
            <Text style={styles.roomName}>{props.deviceInfo.roomName}</Text>
          </View>
        </View>
        <Spacer height={cx(6)} />
      </View>
      <View style={[styles.offlineIcon, {marginHorizontal: cx(5)}]}>
        {!props.deviceInfo.status && <Image style={styles.offlineIcon} source={res.offline_wifi} />}
        {!!props.deviceInfo.status && isNumber(curPower) && <View style={{alignItems: 'flex-end'}}>
          <Text style={styles.onlineText}>{`${curPower / 10} W`}</Text>
          <Text style={[styles.onlineText, {fontSize: cx(12),marginTop: cx(5)}]}>{I18n.getLang('consumption_data_field1_headline_text')}</Text>
          </View>}
      </View>
    </View>
  )
}

export default withTheme(ApplyForDeviceItem)
