import { Skeleton } from '@luxfi/ui/skeleton';
import { Tooltip } from '@luxfi/ui/tooltip';
import type BigNumber from 'bignumber.js';
import React from 'react';

import { resolveColorToken } from 'lib/utils/colorToken';
import CopyToClipboard from 'ui/shared/CopyToClipboard';

import { DEFAULT_ACCURACY, formatBnValue } from './utils';

const TOOLTIP_CONTENT_PROPS = { className: 'max-w-[calc(100vw-8px)] lg:max-w-[400px]' };

export interface Props {
  className?: string;
  color?: string;
  value: BigNumber;
  accuracy?: number;
  prefix?: string;
  postfix?: string;
  startElement?: React.ReactNode;
  endElement?: React.ReactNode;
  tooltipContent?: React.ReactNode;
  noTooltip?: boolean;
  loading?: boolean;
  overflowed?: boolean;
  tooltipContentBefore?: React.ReactNode;
  // Legacy style-prop shims
  fontSize?: string;
  lineHeight?: string;
  maxW?: string;
}

const SimpleValue = ({
  value,
  accuracy = DEFAULT_ACCURACY,
  prefix,
  postfix,
  startElement,
  endElement,
  tooltipContent: tooltipContentProp,
  tooltipContentBefore,
  noTooltip,
  loading,
  overflowed,
  color,
  ...rest
}: Props) => {

  const tooltipContent = React.useMemo(() => {
    return (
      <>
        { tooltipContentBefore }
        <span className="inline whitespace-normal break-all">
          { prefix ?? '' }{ value.toFormat() }{ postfix ?? '' }
          <CopyToClipboard text={ value.toFixed() } className="align-bottom" noTooltip/>
        </span>
      </>
    );
  }, [ postfix, prefix, value, tooltipContentBefore ]);

  return (
    <Skeleton
      loading={ loading }
      display="inline-flex"
      alignItems="center"
      color={ resolveColorToken(color) }
      className="whitespace-pre max-w-full overflow-hidden"
      { ...rest }
    >
      { startElement }
      <Tooltip
        content={ tooltipContentProp ?? tooltipContent }
        contentProps={ TOOLTIP_CONTENT_PROPS }
        disabled={ noTooltip }
        interactive
      >
        <span className="inline-block max-w-full overflow-hidden text-ellipsis">
          { formatBnValue({ value, accuracy, prefix, postfix, overflowed }) }
        </span>
      </Tooltip>
      { typeof endElement === 'string' ? <span>{ endElement }</span> : endElement }
    </Skeleton>
  );
};

export default React.memo(SimpleValue);