import {useLinkifiedString} from '@common/utils/hooks/use-linkified-string';
import {Fragment, useRef, useState} from 'react';
import {Button} from '@common/ui/buttons/button';
import {Trans} from '@common/i18n/trans';
import clsx from 'clsx';
import {useLayoutEffect} from '@react-aria/utils';

interface TruncatedDescriptionProps {
  description?: string;
  className?: string;
}

export function TruncatedDescription({
  description,
  className,
}: TruncatedDescriptionProps) {
  const linkifiedDescription = useLinkifiedString(description);
  const wrapperRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const [isOverflowing, setIsOverflowing] = useState(false);
  const [isShowingAll, setIsShowingAll] = useState(false);

  useLayoutEffect(() => {
    const wrapperHeight =
      wrapperRef.current?.getBoundingClientRect().height || 0;
    const contentHeight = wrapperRef.current?.scrollHeight || 0;
    if (contentHeight > wrapperHeight) {
      setIsOverflowing(true);
    }
  }, []);

  if (!linkifiedDescription) return null;

  return (
    <Fragment>
      <div
        ref={wrapperRef}
        className={clsx(
          'relative',
          className,
          !isShowingAll && 'max-h-160 overflow-hidden',
          !isShowingAll &&
            isOverflowing &&
            'after:absolute after:bottom-0 after:left-0 after:h-20 after:w-full after:bg-gradient-to-b after:from-transparent after:to-background'
        )}
      >
        <div
          ref={contentRef}
          dangerouslySetInnerHTML={{__html: linkifiedDescription}}
        />
      </div>
      {isOverflowing && (
        <Button
          size="xs"
          className="mt-20"
          variant="outline"
          onClick={() => setIsShowingAll(!isShowingAll)}
        >
          {isShowingAll ? (
            <Trans message="Show less" />
          ) : (
            <Trans message="Show more" />
          )}
        </Button>
      )}
    </Fragment>
  );
}