import React from "react";
import { theme, keysTheme } from "data/dataMx";
import { AtomIcon } from "native/atoms/Icon";
import { AtomImage } from "native/atoms/Image";
import { AtomCaption } from "native/atoms/Typography/Caption";
import { AtomHeadline } from "native/atoms/Typography/Headline";
import ImageGift from "assets/images/gift.png";
import {
  BackgroundImage,
  Container,
  Content,
  Item,
  ItemLine,
  ListWrapper,
  Separator,
  WrapperReward,
  WrapperText,
} from "./styles";

export interface IChallengeProgressProps {
  /** Card background color */
  backgroundColor?: keysTheme;
  /** Card background image */
  backgroundImage?: string;
  /** Card background shadow */
  backgroundShadow?: string;
  /** Color of icons and their children lines */
  colorIcon?: keysTheme;
  /** Challenges status data list
   * (must be equal or less than four items) */
  data: IItemProps[];
  /** Size icon */
  sizeIcon?: number;
  /** Size image reward */
  sizeImageReward?: string;
  /** Text color */
  textColor?: keysTheme;
  /** Text reward */
  textReward: string;
  /** Text height */
  textHeight?: string;
  /** Text position left */
  textPositionLeft?: string;
  /** Text position top */
  textPositionTop?: string;
  /** Text width */
  textWidth?: string;
  /** Principal text */
  title?: string;
}

interface IItemProps {
  /** Status of each challenge */
  challengeStatus: boolean;
  /** Color of icons and their children lines */
  colorIcon?: keysTheme;
  /** Size icon */
  sizeIcon?: number;
}

const ChallengeIcon = ({
  challengeStatus,
  colorIcon = "neutral100",
  sizeIcon = 44,
}: IItemProps) => {
  return challengeStatus ? (
    <Item>
      <AtomIcon name="earn_quizes" size={sizeIcon} color={colorIcon} />
      <ItemLine colorLine={theme[colorIcon]} />
    </Item>
  ) : (
    <Item>
      <AtomIcon name="lock_icon_circle" size={sizeIcon} color={colorIcon} />
      <ItemLine colorLine={theme[colorIcon]} />
    </Item>
  );
};

export const OrganismChallengeProgress = ({
  backgroundColor = "primary",
  backgroundImage,
  backgroundShadow = "rgba(0, 0, 0, 0.5)",
  colorIcon = "neutral100",
  data,
  sizeIcon,
  sizeImageReward = "110px",
  textColor = "neutral100",
  textReward,
  textHeight = "52px",
  textPositionLeft = "27%",
  textPositionTop = "27%",
  textWidth = "58px",
  title = "",
}: IChallengeProgressProps) => {
  return (
    <Container
      testID="chp-container"
      backgroundColor={
        backgroundImage ? theme.transparent : theme[backgroundColor]
      }
    >
      {backgroundImage && (
        <BackgroundImage>
          <AtomImage
            imgHeight="100%"
            imgWidth="100%"
            resizeMode="cover"
            src={backgroundImage}
          />
        </BackgroundImage>
      )}
      <Content
        background={backgroundImage ? backgroundShadow : theme.transparent}
      >
        <Separator>
          <AtomHeadline
            color={textColor}
            size="small"
            text={title}
            weight="medium"
            styles={{ textAlign: "center" }}
          />
        </Separator>
        <ListWrapper>
          {data.length <= 4 &&
            data.map((item: IItemProps, index: number) => {
              return (
                <ChallengeIcon
                  key={index}
                  challengeStatus={item.challengeStatus}
                  colorIcon={colorIcon}
                  sizeIcon={sizeIcon}
                />
              );
            })}
          {sizeImageReward && (
            <WrapperReward>
              <AtomImage
                imgHeight={sizeImageReward}
                imgWidth={sizeImageReward}
                src={ImageGift}
              />
              <WrapperText
                textPositionLeft={textPositionLeft}
                textPositionTop={textPositionTop}
              >
                <AtomCaption
                  color={textColor}
                  size="small"
                  text={textReward}
                  styles={{
                    maxWidth: textWidth,
                    maxHeight: textHeight,
                    overflow: "hidden",
                    textAlign: "center",
                  }}
                />
              </WrapperText>
            </WrapperReward>
          )}
        </ListWrapper>
      </Content>
    </Container>
  );
};
