import React from 'react';
import classNames from 'classnames/bind';
import styles from './ProfileInfo.scss';
import { ReactComponent as IconCheck } from '@assets/img/svg/ico_check.svg';
import URLInfo from '@src/constants/URLInfo';
import { ReactComponent as IcoEhtereum } from '@assets/img/svg/logo_ethereum.svg';
import { ReactComponent as LogoMetaRare } from '@assets/img/svg/logo_metarare.svg';
import { ReactComponent as LogoMetaFinance } from '@assets/img/svg/logo_metafinance.svg';
import StringUtil from '@src/utils/StringUtil';

const cx = classNames.bind(styles);

interface IOwnProps {
  thumbnailImage?: string;
  name?: string;
  address?: string;
  isArtist?: boolean;
  userName?: string;
  imgRef?: React.RefObject<HTMLImageElement>;
};

const ProfileInfo: React.FC<IOwnProps> = ({
  thumbnailImage,
  name,
  address,
  isArtist,
  userName,
  imgRef
}) => {
  const handleClickAddress = () => {
    navigator.clipboard.writeText(address || '').then(() => {
      alert('복사되었습니다.');
    });
  };

  return (
    <div className={cx('profile_info')}>
      <div className={cx('profile_image')}>
        <div className={cx('thumb')}>
          <img src={thumbnailImage || '/static/img/svg/user_profile.svg'} alt="" ref={imgRef} />
        </div>
        {isArtist && (
          <span className={cx('checked')}>
            <IconCheck />
          </span>
        )}
      </div>
      <p className={cx('title')}>{name}</p>
      {URLInfo.isProfileCollection() && (
        <p className={cx('text')}>
          <span className={cx('by')}>by</span>
          {userName}
        </p>
      )}
      <button type="button" className={cx('info_area')} onClick={handleClickAddress}>
        <div className={cx('info_img')}>
          <div className={cx('img_wrap')}>
            <IcoEhtereum className={cx('img')} />
          </div>
          <div className={cx('img_wrap')}>
            <LogoMetaRare className={cx('img')} />
          </div>
          <div className={cx('img_wrap')}>
            <LogoMetaFinance className={cx('img')} />
          </div>
        </div>
        <strong className={cx('info_text')}>{StringUtil.summaryWalletAddress(address)}</strong>
      </button>
    </div>
  );
};

export default ProfileInfo;
