import React, { FC } from "react";
import { Ionicons, AntDesign } from "@expo/vector-icons";
import { Text, View } from "react-native";
type name = keyof typeof Ionicons.glyphMap & keyof typeof AntDesign.glyphMap;
type type = "Ionicons" | "AntDesign";
export const initIcon = (
  name: name,
  type: type,
  tabBarBadge: string,
  isInfo: boolean
) => {
  switch (type) {
    case "Ionicons":
      return ({ focused, color, size }) => (
        <>
          {!!tabBarBadge && <Badge tabBarBadge={tabBarBadge} isInfo={isInfo} />}
          <Ionicons
            name={name}
            size={30}
            color={focused ? "#0099CC" : "black"}
          />
        </>
      );
    case "AntDesign":
      return ({ focused, color, size }) => (
        <>
          {!!tabBarBadge && <Badge tabBarBadge={tabBarBadge} isInfo={isInfo} />}
          <AntDesign
            name={name}
            size={30}
            color={focused ? "#0099CC" : "black"}
          />
        </>
      );
  }
};
type BadgeProps = { tabBarBadge: string; isInfo: boolean };

export const Badge: FC<BadgeProps> = ({ tabBarBadge, isInfo }) => {
  return (
    <View
      style={{
        position: "relative",
        top: -5,
        right: 0,
        zIndex: 100,
        padding: 1,
        width: 0,
      }}
    >
      <View
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          backgroundColor: isInfo ? "#00b8ff" : "red",
          borderRadius: 10,
          padding: 2,
          shadowColor: "#000",
          shadowOffset: { width: 0, height: 0 },
          shadowOpacity: 0.5,
          shadowRadius: 4,
          elevation: 2
        }}
      >
        <Text style={{ color: "white", paddingHorizontal: 4 }}>
          {tabBarBadge}
        </Text>
      </View>
    </View>
  );
};