import React from 'react';
import styled from 'styled-components';
import { uiFonts } from '../../../../constants/uiFonts';
import { Ellipsis } from '../../../shared/Ellipsis';

interface IProps {
  itemId: string;
  stackQty: number;
  qtyClassName: string;
}

export const onRenderStackInfo = (itemId: string, stackQty: number) => {
  const isFractionalStackQty = stackQty % 1 !== 0;
  const isLargerThan999 = stackQty > 999;

  let qtyClassName = 'regular';
  if (isLargerThan999) qtyClassName = 'small';
  if (isFractionalStackQty) qtyClassName = 'xsmall';

  if (stackQty > 1) {
    return (
      <ItemSlotQty
        itemId={itemId}
        stackQty={stackQty}
        qtyClassName={qtyClassName}
      />
    );
  }
  return undefined;
};

export const ItemSlotQty = ({
  itemId,
  stackQty,
  qtyClassName,
}: IProps): JSX.Element => {
  return (
    <ItemQtyContainer key={`qty-${itemId}`} className="item-slot-qty">
      <Ellipsis maxLines={1} maxWidth="48px">
        <ItemQty className={qtyClassName}>
          {Math.round(stackQty * 100) / 100}{' '}
        </ItemQty>
      </Ellipsis>
    </ItemQtyContainer>
  );
};

const ItemQtyContainer = styled.div`
  position: relative;
  width: 85%;
  height: 16px;
  top: 25px;
  left: 2px;
  pointer-events: none;

  display: flex;
  justify-content: flex-end;
`;

const ItemQty = styled.span`
  &.regular {
    font-size: ${uiFonts.size.small};
  }
  &.small {
    font-size: ${uiFonts.size.xsmall};
  }
  &.xsmall {
    font-size: ${uiFonts.size.xxsmall};
  }
`;
