import { Text } from "../text";
import { Flex } from "../flex";
import { styled } from "../../theme";
import { EllipsisDivider } from "./ellipsis-divider";
import type { WithTestId } from "../../types";

interface EllipsisRowProps {
  /**
   * The text on the left end
   */
  startText: string;
  /**
   * The text on the right end
   */
  endText: string;
  /**
   * The number of dots to be rendered between the startText and the endText.
   * By default 300 dots will be rendered.
   */
  noOfDots?: number;
  /**
   * Extra element on the right end
   */
  endDecoration?: React.ReactNode;
  /**
   * The boolean to determine whether the text at the right end should be uppercase
   */
  endTextUppercase?: boolean;
}

const StyledEndText = styled(Text, {
  color: "$light-off-white",
  width: "100%",
  wordWrap: "break-word",
  textAlign: "right",
  fontWeight: "bold !important",
  variants: {
    uppercase: {
      true: {
        textTransform: "uppercase",
      },
    },
  },
});

const EndTextContainer = styled(Flex, {
  width: "fit-content",
  maxWidth: "50%",
  justifyContent: "flex-end",
  gap: "$1",
  alignItems: "center",
});

export const EllipsisRow: React.FC<WithTestId<EllipsisRowProps>> = ({
  startText,
  endText,
  noOfDots = 300,
  endDecoration,
  endTextUppercase = false,
  ...rest
}) => {
  return (
    <Flex justify="between" css={{ width: "100%", my: "$2" }} {...rest}>
      <Text variant="body4" css={{ color: "$off-white-72-opaque" }} data-id="start-text">
        {startText}
      </Text>
      <EllipsisDivider noOfDots={noOfDots} />
      <EndTextContainer>
        {endText && (
          <StyledEndText variant="body4" uppercase={endTextUppercase}>
            {endText}
          </StyledEndText>
        )}
        {endDecoration}
      </EndTextContainer>
    </Flex>
  );
};