import React, { useEffect, useRef, useState } from 'react';
import classNames from 'classnames/bind';
import styles from './ProfileDesc.scss';
import { ReactComponent as IconArrow } from '@assets/img/svg/ico_arrow_down.svg';
// import { ReactComponent as IconTwitter } from '@assets/img/svg/ico_twitter.svg';
import { ReactComponent as IconShare } from '@assets/img/svg/ico_share.svg';
import HtmlUtil from '@src/utils/HtmlUtil';

const cx = classNames.bind(styles);

interface IOwnProps {
  description?: string;
  twitter?: string;
};

const ProfileDesc: React.FC<IOwnProps> = ({ description, twitter }) => {
  const textRef = useRef<HTMLDivElement>(null);
  const [showMore, setShowMore] = useState<boolean>(true);

  useEffect(() => {
    if (textRef.current, description) {
      const textEl = textRef.current;

      if (textEl) {
        const scrollHeight = textEl.scrollHeight;

        setShowMore(scrollHeight <= 117);
      }
    }
  }, [textRef.current, description]);

  const desc = HtmlUtil.replaceNewLineEscape(description || '');

  return (
    <div className={cx('profile_desc')}>
      <div className={cx('text', showMore && 'more')} ref={textRef}>
        <p dangerouslySetInnerHTML={{ __html: desc }} />
        {twitter && (
          <div className={cx('twitter')}>
            <IconShare />
            {twitter}
          </div>
        )}
      </div>
      {!showMore && (
        <button type="button" className={cx('btn_txt_more')} onClick={() => setShowMore(true)}>
          <IconArrow />
        </button>
      )}
    </div>
  );
};

export default ProfileDesc;
