import clsx from 'clsx';
import { useEffect, useRef, useState } from 'react';

import { ChevronDownIcon, ChevronUpIcon } from '@/icons';

const ExpandableText = ({
  text,
  lineClamp,
}: {
  text: string;
  lineClamp: number;
}) => {
  const [isClamped, setIsClamped] = useState(false);
  const [isTextExpanded, setIsTextExpanded] = useState(false);
  const textRef = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    const checkIfClamped = () => {
      if (textRef.current) {
        setIsClamped(
          textRef.current.scrollHeight > textRef.current.clientHeight
        );
      }
    };

    checkIfClamped();
    window.addEventListener('resize', checkIfClamped);
    return () => window.removeEventListener('resize', checkIfClamped);
  }, [text]);

  return (
    <>
      <span
        ref={textRef}
        className={clsx('text-left font-sans text-foreground-secondary', {
          [`line-clamp-${lineClamp}`]: !isTextExpanded,
        })}
      >
        {text}
      </span>
      {isClamped && (
        <button
          onClick={() => setIsTextExpanded(!isTextExpanded)}
          className='mt-1 ml-1 flex flex-row items-center gap-1 text-sm text-gray-600 hover:text-gray-500'
        >
          {isTextExpanded ? (
            <ChevronUpIcon className='h-4 w-4' />
          ) : (
            <ChevronDownIcon className='h-4 w-4' />
          )}
          {isTextExpanded ? 'See less' : 'See more'}
        </button>
      )}
    </>
  );
};

export default ExpandableText;