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

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}
      padding={cardPadding}
      flexDirection="row"
    >
      <Container onClick={() => (isClickable && onClick ? onClick() : null)}>
        <LeftContainer>
          <IconContainer>
            {!!iconName && (
              <AtomIcon icon={iconName} size={iconSize} color={iconColor} />
            )}
            <AtomCaption
              text={iconCaptionText}
              size="xlarge"
              color={iconCaptionColor}
            />
          </IconContainer>
          {!!iconDescriptionText && (
            <AtomCaption
              text={iconDescriptionText}
              size="medium"
              color={"neutral500"}
            />
          )}
        </LeftContainer>

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