import React, { useMemo } from "react";
import { useWindowDimensions } from "react-native";
import { AtomImage } from "native/atoms/Image";
import { AtomIcon } from "native/atoms/Icon";
import { AtomBody } from "native/atoms/Typography/Body";
import {
  ButtonBadgeContainer,
  SealImageContainer,
  Separator,
  TextContainer,
} from "./styles";
import { keysTheme } from "data/dataMx";
import { CSSObject } from "styled-components";
import cheersDefault from "assets/images/cheers_2.png";

export interface IButtonBadgeProps {
  /** Text on the badge */
  badgeText: string;
  /** This is to manage the status of the badge */
  badgeStatus: "completed" | "inProgress" | "locked";
  /** the png file that is received to show in front of the svg seal */
  image: string;
  /** bg color of the svg seal */
  bgColor?: keysTheme;
  /** alt text for the image */
  altTextImg?: string;
  /** receives a function to excecute when click the badge */
  onPress?: () => void;
  /** aditional styles for the component */
  styles?: CSSObject;
}

const status: any = {
  completed: {
    icon: "check",
    color: "quaternary500",
  },
  locked: {
    icon: "https",
    color: "neutral400",
  },
  inProgress: {
    icon: "",
    color: "",
  },
};

export const MoleculeButtonBadge = ({
  badgeText,
  badgeStatus,
  bgColor = "secondary",
  image = cheersDefault,
  altTextImg = "badge",
  onPress,
  styles,
}: IButtonBadgeProps) => {
  const { width } = useWindowDimensions();

  const getCurrentStatus: any = useMemo(() => {
    const theStatus = Object.keys(status)
      .filter((key) => badgeStatus === key)
      .reduce((obj: any, key: any) => {
        return {
          ...obj,
          [key]: status[key],
        };
      }, {});

    for (const stat in theStatus) {
      return theStatus[stat];
    }
  }, [badgeStatus]);

  return (
    <ButtonBadgeContainer
      onPress={onPress}
      aria-label="btnBadge"
      styles={styles}
    >
      <AtomIcon
        name={getCurrentStatus.icon}
        size={width <= 640 ? 10 : 15}
        color={getCurrentStatus.color}
      />
      <Separator />
      <SealImageContainer>
        <AtomIcon
          name={"badges_seal"}
          size={width <= 640 ? 64 : 84}
          color={badgeStatus === "locked" ? "neutral400" : bgColor}
        />
        <AtomImage
          src={image}
          alt={altTextImg}
          imgWidth={"35px"}
          imgHeight={"100%"}
          data-testid="badgeImage"
          styles={{
            position: "absolute",
          }}
        />
      </SealImageContainer>
      <TextContainer>
        <AtomBody
          size={width <= 640 ? "small" : "medium"}
          text={badgeText}
          weight="bold"
          color={badgeStatus === "locked" ? "neutral400" : "neutral600"}
          styles={{
            maxWidth: 66,
            height: 40,
            textAlign: "center",
          }}
        />
      </TextContainer>
    </ButtonBadgeContainer>
  );
};
