import React from "react";
import { AtomCaption } from "native/atoms/Typography/Caption";
import { AtomCardContainer } from "native/atoms/CardContainer/index";
import { AtomIcon } from "native/atoms/Icon";
import {
  Container,
  LeftContainer,
  RightContainer,
  IconContainer,
  DateContainer,
  ArrowContainer,
} from "./styles";
import { keysTheme } from "data/dataMx";
import { AtomTag } from "native/atoms/Tag";
import { TouchableWithoutFeedback } from "react-native";

export interface IHistoryCardProps {
  cardWidth: string;
  cardHeight: string;
  cardPadding?: string;
  iconName?: string;
  iconSize?: number;
  iconColor?: keysTheme;
  iconCaptionText?: string;
  iconCaptionColor?: keysTheme;
  iconDescriptionText?: string;
  date?: string;
  dateDescription?: string;
  tagText?: string;
  tagColor?: keysTheme;
  isClickable?: boolean;
  arrowSize?: number;
  onClick?: () => void;
}

export const MoleculeHistoryCard = ({
  cardWidth,
  cardHeight,
  cardPadding = "20px 16px",
  iconName = "",
  iconSize = 25,
  iconColor = "neutral600",
  iconCaptionText = "",
  iconCaptionColor = "primary",
  iconDescriptionText = "",
  date = "",
  dateDescription = "",
  tagText = "",
  tagColor = "quaternary",
  isClickable = false,
  arrowSize = 25,
  onClick,
}: IHistoryCardProps) => {
  return (
    <AtomCardContainer
      height={cardHeight}
      width={cardWidth}
      managePadding={cardPadding}
      shadowSize="small"
      flexDirection="row"
    >
      <TouchableWithoutFeedback
        testID="touchable"
        onPress={() => (isClickable && onClick ? onClick() : null)}
      >
        <Container>
          <LeftContainer>
            <IconContainer>
              {!!iconName && (
                <AtomIcon name={iconName} size={iconSize} color={iconColor} />
              )}
              <AtomCaption
                text={iconCaptionText}
                size="xlarge"
                color={iconCaptionColor}
                styles={{
                  marginLeft: "5px",
                }}
              />
            </IconContainer>
            {!!iconDescriptionText && (
              <AtomCaption
                text={iconDescriptionText}
                size="medium"
                color={"neutral500"}
                styles={{
                  marginTop: "5px",
                }}
              />
            )}
          </LeftContainer>

          <RightContainer>
            <DateContainer hasTag={!!tagText} hasDate={!!date}>
              {!!date && (
                <AtomCaption
                  text={date}
                  size="medium"
                  align="right"
                  color={"neutral400"}
                  styles={{
                    marginBottom: "5px",
                  }}
                />
              )}
              {tagText ? (
                <AtomTag
                  text={tagText}
                  backgroundColor={tagColor}
                  textColor={"neutral100"}
                />
              ) : (
                !!dateDescription && (
                  <AtomCaption
                    text={dateDescription}
                    size="medium"
                    align="right"
                    color={"neutral500"}
                  />
                )
              )}
            </DateContainer>
            {!!isClickable && (
              <ArrowContainer>
                <AtomIcon
                  name="keyboard_arrow_right"
                  size={arrowSize}
                  color={"neutral400"}
                />
              </ArrowContainer>
            )}
          </RightContainer>
        </Container>
      </TouchableWithoutFeedback>
    </AtomCardContainer>
  );
};
