import React from 'react';
import Card from './Card';
import { Battery, Utils } from 'tuya-panel-kit';
import { View, Text, StyleSheet } from 'react-native';
import I18n from '../i18n';
import Spacer from './Spacer';

const cx = Utils.RatioUtils.convertX;
type BatteryProps = {
  batteryState: string;
};

enum BatteryState {
  Low = 'low',
  Middle = 'middle',
  High = 'high',
}

const batteryLevels = {
  [BatteryState.High]: 100,
  [BatteryState.Middle]: 60,
  [BatteryState.Low]: 30,
};

const getBatteryDisplayName = (value: string): string => {
  switch (value) {
    case BatteryState.High:
      return I18n.getLang('contact_sensor_battery_state1');
    case BatteryState.Middle:
      return I18n.getLang('contact_sensor_battery_state2');
    case BatteryState.Low:
    default:
      return I18n.getLang('contact_sensor_battery_state3');
  }
};

export default function BatteryStateView(props: BatteryProps) {
  const { batteryState } = props;
  const calcColor = (_, highColor, middleColor, lowColor) => {
    switch (batteryState) {
      case BatteryState.High:
        return highColor;
      case BatteryState.Middle:
        return middleColor;
      default:
        return lowColor;
    }
  };

  const battery = batteryLevels[batteryState];
  return (
    <Card
      style={{ marginHorizontal: cx(24) }}
      containerStyle={{ flexDirection: 'row', alignItems: 'center' }}
    >
      <Text style={styles.title}>{I18n.getLang('motion_detector_battery__state4')}</Text>
      <Spacer height={0} style={{ flex: 1 }} />
      <View style={styles.batteryRotate}>
        <Battery value={battery} onCalcColor={calcColor} size={cx(30)} middleColor="#999999" />
      </View>
      <Text style={styles.content}>{getBatteryDisplayName(batteryState)}</Text>
    </Card>
  );
}

const styles = StyleSheet.create({
  title: {
    marginStart: cx(16),
    marginVertical: cx(18),
    color: '#000',
    fontSize: cx(16),
    fontFamily: 'helvetica_neue_lt_std_bd',
  },

  batteryRotate: {
    transform: [{ rotate: '90deg' }],
    position: 'relative',
    right: cx(30),
  },

  content: {
    marginEnd: cx(16),
    color: '#000',
    fontSize: cx(14),
    fontFamily: 'helvetica_neue_lt_std_roman',
  },
});
