import React from "react";
import { useTranslation } from "react-i18next";
import { View, Text, StyleSheet, ViewStyle } from "react-native";

interface BatteryStatusProps {
  status: 1 | 0 | -1 | null;
  style?: ViewStyle;
}

const BatteryStatus: React.FC<BatteryStatusProps> = ({ status, style }) => {
  const getStatusConfig = (): {
    text: string;
    backgroundColor: string;
    textColor: string;
  } => {
    switch (status) {
      case 1:
        return {
          text: "charging",
          backgroundColor: "#DAF5ED",
          textColor: "#006C4D",
        };
      case -1:
        return {
          text: "discharging",
          backgroundColor: "#E5EBFD",
          textColor: "#1249ED",
        };
      case 0:
        return {
          text: "idle",
          backgroundColor: "#D8DDE7",
          textColor: "#565F70",
        };
      default:
        return {
          text: "---",
          backgroundColor: "#D8DDE7",
          textColor: "#565F70",
        };
    }
  };

  const config = getStatusConfig();

  const { t } = useTranslation();

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: config.backgroundColor,
        },
        style,
      ]}
    >
      <Text
        style={[
          styles.text,
          {
            color: config.textColor,
          },
        ]}
      >
        {status !== null && status !== undefined
          ? t(`home.${config.text}`)
          : "---"}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 4,
    justifyContent: "center",
  },
  text: {
    fontSize: 16,
    fontWeight: "500",
  },
});

export default BatteryStatus;