import * as React from "react";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { BatteryComponentProps } from "../util/types";

const renderIcon = (name: string, color?: string) => <Icon size={20} color={color} name={name} />;

/**
 * BatteryIcon - renders a battery icon based on the charge percentage and if it's charging
 */
const BatteryIcon: React.FC<BatteryComponentProps> = ({ state, color }) => {
  const batteryLevel = state.battery.chargePercent;
  const isCharging = state.battery.isCharging;

  /**
   * renderColor - update the battery color based on whether or not it's low (<30%) or charging
   */
  const renderColor = (): string => {
    if (batteryLevel < 30 && !isCharging) {
      return "#ee4444";
    }
    if (isCharging) {
      return "#ffee66";
    }
    return color;
  };

  /**
   * renderBatteryIcon - render a battery icon based on the battery level and if it's charging
   * @param name the name of the icon to pass (corresponds to the battery percent level)
   */
  const renderBatteryIcon = (level: number | string) =>
    renderIcon(`battery${isCharging ? "-charging" : ""}-${level}`, renderColor());

  // round the charge percent to the nearest int
  switch (Boolean(batteryLevel)) {
    case batteryLevel < 10:
      return renderBatteryIcon("outline");
    case batteryLevel >= 10 && batteryLevel < 20:
      return renderBatteryIcon(10);
    case batteryLevel >= 20 && batteryLevel < 30:
      return renderBatteryIcon(20);
    case batteryLevel >= 30 && batteryLevel < 40:
      return renderBatteryIcon(30);
    case batteryLevel >= 40 && batteryLevel < 50:
      return renderBatteryIcon(40);
    case batteryLevel >= 50 && batteryLevel < 60:
      return renderBatteryIcon(50);
    case batteryLevel >= 60 && batteryLevel < 70:
      return renderBatteryIcon(60);
    case batteryLevel >= 70 && batteryLevel < 80:
      return renderBatteryIcon(70);
    case batteryLevel >= 80 && batteryLevel < 90:
      return renderBatteryIcon(80);
    case batteryLevel >= 90 && batteryLevel < 100:
      return renderBatteryIcon(90);
    case batteryLevel === 100:
      // the 'full battery' icon doesn't follow the same naming pattern (i.e. its not `battery-100` its just `battery`) so we explicitly name the icon here
      return renderIcon(isCharging ? "battery-charging-100" : "battery", renderColor());
    default:
      return renderIcon("battery-unknown", "#ee4444"); // this will never be thrown, but make it red on the off chance
  }
};

BatteryIcon.defaultProps = {
  color: "black"
};

export default BatteryIcon;